mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
15090: add primary button (#16079)
* 15090: add primary button * updates * add button base props * add button base props to primary * remove button base props and improve classname test * update box shadow animation * fix anchor test and update documentation * fix button base iconProps proptype
This commit is contained in:
parent
a993509afc
commit
12aa200ad0
@ -39,9 +39,9 @@ export const ButtonBase = ({
|
||||
'mm-button',
|
||||
`mm-button--size-${size}`,
|
||||
{
|
||||
'mm-button--loading': Boolean(loading),
|
||||
'mm-button--disabled': Boolean(disabled),
|
||||
'mm-button--block': Boolean(block),
|
||||
'mm-button--loading': loading,
|
||||
'mm-button--disabled': disabled,
|
||||
'mm-button--block': block,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
@ -117,7 +117,7 @@ ButtonBase.propTypes = {
|
||||
/**
|
||||
* iconProps accepts all the props from Icon
|
||||
*/
|
||||
iconProps: Icon.propTypes,
|
||||
iconProps: PropTypes.object,
|
||||
/**
|
||||
* Boolean to show loading spinner in button
|
||||
*/
|
||||
|
@ -18,9 +18,9 @@ describe('ButtonBase', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<ButtonBase as="a" data-testid="button-base" />,
|
||||
);
|
||||
expect(getByTestId('button-base')).toBeDefined();
|
||||
expect(container.querySelector('a')).toBeDefined();
|
||||
expect(getByTestId('button-base')).toHaveClass('mm-button');
|
||||
const anchor = container.getElementsByTagName('a').length;
|
||||
expect(anchor).toBe(1);
|
||||
});
|
||||
|
||||
it('should render button as block', () => {
|
||||
@ -51,6 +51,13 @@ describe('ButtonBase', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<ButtonBase data-testid="classname" className="mm-button--test" />,
|
||||
);
|
||||
expect(getByTestId('classname')).toHaveClass('mm-button--test');
|
||||
});
|
||||
|
||||
it('should render with different button states', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
|
57
ui/components/component-library/button-primary/README.mdx
Normal file
57
ui/components/component-library/button-primary/README.mdx
Normal file
@ -0,0 +1,57 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import { ButtonPrimary } from './button-primary';
|
||||
|
||||
# ButtonPrimary
|
||||
|
||||
The `ButtonPrimary` is an extension of `ButtonBase` to support primary styles.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-primary-button-primary-stories-js--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
The `ButtonPrimary` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) and [ButtonBase](/docs/ui-components-component-library-button-base-button-base-stories-js--default-story#props) component props
|
||||
|
||||
<ArgsTable of={ButtonPrimary} />
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonPrimary`. Defaults to `SIZES.MD`
|
||||
|
||||
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
|
||||
|
||||
Possible sizes include:
|
||||
|
||||
- `SIZES.SM` 32px
|
||||
- `SIZES.MD` 40px
|
||||
- `SIZES.LG` 48px
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-primary-button-primary-stories-js--size" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { SIZES } from '../../../helpers/constants/design-system';
|
||||
import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
|
||||
|
||||
<ButtonPrimary size={SIZES.SM} />
|
||||
<ButtonPrimary size={SIZES.MD} />
|
||||
<ButtonPrimary size={SIZES.LG} />
|
||||
```
|
||||
|
||||
### Type
|
||||
|
||||
Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonPrimary`.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-primary-button-primary-stories-js--type" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
|
||||
|
||||
<ButtonPrimary>Normal</ButtonPrimary>
|
||||
<ButtonPrimary danger>Danger</ButtonPrimary>
|
||||
```
|
@ -0,0 +1,7 @@
|
||||
import { SIZES } from '../../../helpers/constants/design-system';
|
||||
|
||||
export const BUTTON_PRIMARY_SIZES = {
|
||||
SM: SIZES.SM,
|
||||
MD: SIZES.MD,
|
||||
LG: SIZES.LG,
|
||||
};
|
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { ButtonBase } from '../button-base';
|
||||
import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
|
||||
|
||||
export const ButtonPrimary = ({
|
||||
className,
|
||||
danger,
|
||||
size = BUTTON_PRIMARY_SIZES.MD,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<ButtonBase
|
||||
className={classnames(className, 'mm-button-primary', {
|
||||
'mm-button-primary--type-danger': danger,
|
||||
})}
|
||||
size={size}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonPrimary.propTypes = {
|
||||
/**
|
||||
* An additional className to apply to the ButtonPrimary.
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Boolean to change button type to Danger when true
|
||||
*/
|
||||
danger: PropTypes.bool,
|
||||
/**
|
||||
* The possible size values for ButtonPrimary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
|
||||
* Default value is 'SIZES.MD'.
|
||||
*/
|
||||
size: PropTypes.oneOf(Object.values(BUTTON_PRIMARY_SIZES)),
|
||||
/**
|
||||
* ButtonPrimary accepts all the props from ButtonBase
|
||||
*/
|
||||
...ButtonBase.propTypes,
|
||||
};
|
||||
|
||||
export default ButtonPrimary;
|
@ -0,0 +1,43 @@
|
||||
.mm-button-primary {
|
||||
color: var(--color-primary-inverse);
|
||||
background-color: var(--color-primary-default);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-inverse);
|
||||
box-shadow: var(--component-button-primary-shadow);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary-inverse);
|
||||
background-color: var(--color-primary-alternative);
|
||||
}
|
||||
|
||||
&.mm-button--disabled {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-primary-default);
|
||||
}
|
||||
}
|
||||
|
||||
&--type-danger {
|
||||
color: var(--color-error-inverse);
|
||||
background-color: var(--color-error-default);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-error-inverse);
|
||||
box-shadow: var(--component-button-danger-shadow);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-error-inverse);
|
||||
background-color: var(--color-error-alternative);
|
||||
}
|
||||
|
||||
&.mm-button--disabled:active {
|
||||
background-color: var(--color-error-default);
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,137 @@
|
||||
import React from 'react';
|
||||
import { ALIGN_ITEMS, DISPLAY } from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { ButtonPrimary } from './button-primary';
|
||||
import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
|
||||
import README from './README.mdx';
|
||||
|
||||
const marginSizeControlOptions = [
|
||||
undefined,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
'auto',
|
||||
];
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/ButtonPrimary',
|
||||
id: __filename,
|
||||
component: ButtonPrimary,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
as: {
|
||||
control: 'select',
|
||||
options: ['button', 'a'],
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
block: {
|
||||
control: 'boolean',
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
children: {
|
||||
control: 'text',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
danger: {
|
||||
control: 'boolean',
|
||||
},
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
icon: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
iconPositionRight: {
|
||||
control: 'boolean',
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
iconProps: {
|
||||
control: 'object',
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
|
||||
loading: {
|
||||
control: 'boolean',
|
||||
table: { category: 'button base props' },
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: Object.values(BUTTON_PRIMARY_SIZES),
|
||||
},
|
||||
marginTop: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginRight: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginBottom: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginLeft: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
},
|
||||
args: {
|
||||
children: 'Button Primary',
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<>
|
||||
<ButtonPrimary {...args} />
|
||||
</>
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Size = (args) => (
|
||||
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
|
||||
<ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.SM}>
|
||||
Small Button
|
||||
</ButtonPrimary>
|
||||
<ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.MD}>
|
||||
Medium (Default) Button
|
||||
</ButtonPrimary>
|
||||
<ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.LG}>
|
||||
Large Button
|
||||
</ButtonPrimary>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Type = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<ButtonPrimary {...args}>Normal</ButtonPrimary>
|
||||
{/* Test Anchor tag to match exactly as button */}
|
||||
<ButtonPrimary as="a" {...args} href="#" danger>
|
||||
Danger
|
||||
</ButtonPrimary>
|
||||
</Box>
|
||||
);
|
@ -0,0 +1,97 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { ButtonPrimary } from './button-primary';
|
||||
import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
|
||||
|
||||
describe('ButtonPrimary', () => {
|
||||
it('should render button element correctly', () => {
|
||||
const { getByText, getByTestId, container } = render(
|
||||
<ButtonPrimary data-testid="button-primary">
|
||||
Button Primary
|
||||
</ButtonPrimary>,
|
||||
);
|
||||
expect(getByText('Button Primary')).toBeDefined();
|
||||
expect(container.querySelector('button')).toBeDefined();
|
||||
expect(getByTestId('button-primary')).toHaveClass('mm-button');
|
||||
});
|
||||
|
||||
it('should render anchor element correctly', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<ButtonPrimary as="a" data-testid="button-primary" />,
|
||||
);
|
||||
expect(getByTestId('button-primary')).toHaveClass('mm-button');
|
||||
const anchor = container.getElementsByTagName('a').length;
|
||||
expect(anchor).toBe(1);
|
||||
});
|
||||
|
||||
it('should render button as block', () => {
|
||||
const { getByTestId } = render(<ButtonPrimary block data-testid="block" />);
|
||||
expect(getByTestId('block')).toHaveClass(`mm-button--block`);
|
||||
});
|
||||
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<ButtonPrimary data-testid="classname" className="mm-button--test" />,
|
||||
);
|
||||
expect(getByTestId('classname')).toHaveClass('mm-button--test');
|
||||
});
|
||||
|
||||
it('should render with different size classes', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonPrimary
|
||||
size={BUTTON_PRIMARY_SIZES.SM}
|
||||
data-testid={BUTTON_PRIMARY_SIZES.SM}
|
||||
/>
|
||||
<ButtonPrimary
|
||||
size={BUTTON_PRIMARY_SIZES.MD}
|
||||
data-testid={BUTTON_PRIMARY_SIZES.MD}
|
||||
/>
|
||||
<ButtonPrimary
|
||||
size={BUTTON_PRIMARY_SIZES.LG}
|
||||
data-testid={BUTTON_PRIMARY_SIZES.LG}
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(getByTestId(BUTTON_PRIMARY_SIZES.SM)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_PRIMARY_SIZES.SM}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_PRIMARY_SIZES.MD)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_PRIMARY_SIZES.MD}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_PRIMARY_SIZES.LG)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_PRIMARY_SIZES.LG}`,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render with different types', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonPrimary danger data-testid="danger" />
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(getByTestId('danger')).toHaveClass('mm-button-primary--type-danger');
|
||||
});
|
||||
|
||||
it('should render with different button states', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonPrimary loading data-testid="loading" />
|
||||
<ButtonPrimary disabled data-testid="disabled" />
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId('loading')).toHaveClass(`mm-button--loading`);
|
||||
expect(getByTestId('disabled')).toHaveClass(`mm-button--disabled`);
|
||||
});
|
||||
it('should render with icon', () => {
|
||||
const { container } = render(
|
||||
<ButtonPrimary data-testid="icon" icon="add-square-filled" />,
|
||||
);
|
||||
|
||||
const icons = container.getElementsByClassName('icon').length;
|
||||
expect(icons).toBe(1);
|
||||
});
|
||||
});
|
1
ui/components/component-library/button-primary/index.js
Normal file
1
ui/components/component-library/button-primary/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { ButtonPrimary } from './button-primary';
|
@ -3,5 +3,6 @@
|
||||
@import 'avatar-token/avatar-token';
|
||||
@import 'base-avatar/base-avatar';
|
||||
@import 'button-base/button-base';
|
||||
@import 'button-primary/button-primary';
|
||||
@import 'icon/icon';
|
||||
@import 'text/text';
|
||||
|
Loading…
Reference in New Issue
Block a user