m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

button base housekeeping (#16336)

Browse Source 
* button base housekeeping

* add pixel size to description

* snapshot update
This commit is contained in:
Garrett Bear 2022-11-03 11:41:16 -07:00 committed by GitHub
parent 107525bb1d
commit 8bdf820c70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/components/component-library/button-base/README.mdx
View File

@ -22,7 +22,7 @@ The `ButtonBase` accepts all props below as well as all [Box](/docs/ui-component
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js`
to change the size of `ButtonBase`. Defaults to `SIZES.MD` to change the size of `ButtonBase`. Defaults to `SIZES.MD`
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`. Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `SIZES`.
Possible sizes include: Possible sizes include:
@ -86,6 +86,20 @@ import { ButtonBase } from '../ui/component-library';
</ButtonBase> </ButtonBase>
``` ```
### Href
When an `href` prop is passed it will change the element to an anchor(`a`) tag.
<Canvas>
<Story id="ui-components-component-library-button-base-button-base-stories-js--href" />
</Canvas>
```jsx
import { ButtonBase } from '../ui/component-library';
<ButtonBase href="/metamask">Anchor Element</ButtonBase>;
```
### Disabled ### Disabled
Use the boolean `disabled` prop to disable button Use the boolean `disabled` prop to disable button

16
ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
<div>
<button
class="box mm-button mm-button--size-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
data-testid="button-base"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button base
</span>
</button>
</div>
`;

2
ui/components/component-library/button-base/button.constants.js → ui/components/component-library/button-base/button-base.constants.js
View File

@ -1,6 +1,6 @@
import { SIZES } from '../../../helpers/constants/design-system'; import { SIZES } from '../../../helpers/constants/design-system';
export const BUTTON_SIZES = { export const BUTTON_BASE_SIZES = {
SM: SIZES.SM, SM: SIZES.SM,
MD: SIZES.MD, MD: SIZES.MD,
LG: SIZES.LG, LG: SIZES.LG,

25
ui/components/component-library/button-base/button-base.js
View File

@ -15,14 +15,15 @@ import {
SIZES, SIZES,
FLEX_DIRECTION, FLEX_DIRECTION,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { BUTTON_SIZES } from './button.constants'; import { BUTTON_BASE_SIZES } from './button-base.constants';
export const ButtonBase = ({ export const ButtonBase = ({
as = 'button', as = 'button',
block, block,
children, children,
className, className,
size = BUTTON_SIZES.MD, href,
size = BUTTON_BASE_SIZES.MD,
icon, icon,
iconPositionRight, iconPositionRight,
loading, loading,
@ -30,12 +31,12 @@ export const ButtonBase = ({
iconProps, iconProps,
...props ...props
}) => { }) => {
const Tag = props?.href ? 'a' : as; const Tag = href ? 'a' : as;
return ( return (
<Box <Box
as={Tag} as={Tag}
paddingLeft={size === BUTTON_SIZES.AUTO ? 0 : 4} paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
paddingRight={size === BUTTON_SIZES.AUTO ? 0 : 4} paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
className={classnames( className={classnames(
'mm-button', 'mm-button',
`mm-button--size-${size}`, `mm-button--size-${size}`,
@ -61,13 +62,13 @@ export const ButtonBase = ({
iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
} }
gap={2} gap={2}
variant={size === BUTTON_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD} variant={size === BUTTON_BASE_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
color={TEXT_COLORS.INHERIT} color={TEXT_COLORS.INHERIT}
> >
{icon && ( {icon && (
<Icon <Icon
name={icon} name={icon}
size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.SM} size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
{...iconProps} {...iconProps}
/> />
)} )}
@ -77,7 +78,7 @@ export const ButtonBase = ({
<Icon <Icon
className="mm-button__icon-loading" className="mm-button__icon-loading"
name={ICON_NAMES.LOADING_FILLED} name={ICON_NAMES.LOADING_FILLED}
size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.MD} size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
/> />
)} )}
</Box> </Box>
@ -105,6 +106,10 @@ ButtonBase.propTypes = {
* Boolean to disable button * Boolean to disable button
*/ */
disabled: PropTypes.bool, disabled: PropTypes.bool,
/**
* When an `href` prop is passed, ButtonBase will automatically change the root element to be an `a` (anchor) tag
*/
href: PropTypes.string,
/** /**
* Add icon to left side of button text passing icon name * Add icon to left side of button text passing icon name
* The name of the icon to display. Should be one of ICON_NAMES * The name of the icon to display. Should be one of ICON_NAMES
@ -125,9 +130,9 @@ ButtonBase.propTypes = {
loading: PropTypes.bool, loading: PropTypes.bool,
/** /**
* The size of the ButtonBase. * The size of the ButtonBase.
* Possible values could be 'SIZES.AUTO', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', * Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
*/ */
size: PropTypes.oneOf(Object.values(BUTTON_SIZES)), size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
/** /**
* Addition style properties to apply to the button. * Addition style properties to apply to the button.
*/ */

10
ui/components/component-library/button-base/button-base.stories.js
View File

@ -9,7 +9,7 @@ import {
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon'; import { ICON_NAMES } from '../icon';
import { Text } from '../text'; import { Text } from '../text';
import { BUTTON_SIZES } from './button.constants'; import { BUTTON_BASE_SIZES } from './button-base.constants';
import { ButtonBase } from './button-base'; import { ButtonBase } from './button-base';
import README from './README.mdx'; import README from './README.mdx';
@ -66,7 +66,7 @@ export default {
}, },
size: { size: {
control: 'select', control: 'select',
options: Object.values(BUTTON_SIZES), options: Object.values(BUTTON_BASE_SIZES),
}, },
marginTop: { marginTop: {
options: marginSizeControlOptions, options: marginSizeControlOptions,
@ -145,6 +145,12 @@ export const As = (args) => (
</Box> </Box>
); );
export const Href = (args) => <ButtonBase {...args}>Anchor Element</ButtonBase>;
Href.args = {
href: '/metamask',
};
export const Disabled = (args) => ( export const Disabled = (args) => (
<ButtonBase {...args}>Disabled Button</ButtonBase> <ButtonBase {...args}>Disabled Button</ButtonBase>
); );

41
ui/components/component-library/button-base/button-base.test.js
View File

@ -1,17 +1,18 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { BUTTON_SIZES } from './button.constants'; import { BUTTON_BASE_SIZES } from './button-base.constants';
import { ButtonBase } from './button-base'; import { ButtonBase } from './button-base';
describe('ButtonBase', () => { describe('ButtonBase', () => {
it('should render button element correctly', () => { it('should render button element correctly and match snapshot', () => {
const { getByTestId, getByText, container } = render( const { getByTestId, getByText, container } = render(
<ButtonBase data-testid="button-base">Button base</ButtonBase>, <ButtonBase data-testid="button-base">Button base</ButtonBase>,
); );
expect(getByText('Button base')).toBeDefined(); expect(getByText('Button base')).toBeDefined();
expect(container.querySelector('button')).toBeDefined(); expect(container.querySelector('button')).toBeDefined();
expect(getByTestId('button-base')).toHaveClass('mm-button'); expect(getByTestId('button-base')).toHaveClass('mm-button');
expect(container).toMatchSnapshot();
}); });
it('should render anchor element correctly', () => { it('should render anchor element correctly', () => {
@ -40,23 +41,35 @@ describe('ButtonBase', () => {
it('should render with different size classes', () => { it('should render with different size classes', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<ButtonBase size={BUTTON_SIZES.AUTO} data-testid={BUTTON_SIZES.AUTO} /> <ButtonBase
<ButtonBase size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM} /> size={BUTTON_BASE_SIZES.AUTO}
<ButtonBase size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD} /> data-testid={BUTTON_BASE_SIZES.AUTO}
<ButtonBase size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG} /> />
<ButtonBase
size={BUTTON_BASE_SIZES.SM}
data-testid={BUTTON_BASE_SIZES.SM}
/>
<ButtonBase
size={BUTTON_BASE_SIZES.MD}
data-testid={BUTTON_BASE_SIZES.MD}
/>
<ButtonBase
size={BUTTON_BASE_SIZES.LG}
data-testid={BUTTON_BASE_SIZES.LG}
/>
</>, </>,
); );
expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass( expect(getByTestId(BUTTON_BASE_SIZES.AUTO)).toHaveClass(
`mm-button--size-${BUTTON_SIZES.AUTO}`, `mm-button--size-${BUTTON_BASE_SIZES.AUTO}`,
); );
expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass( expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
`mm-button--size-${BUTTON_SIZES.SM}`, `mm-button--size-${BUTTON_BASE_SIZES.SM}`,
); );
expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass( expect(getByTestId(BUTTON_BASE_SIZES.MD)).toHaveClass(
`mm-button--size-${BUTTON_SIZES.MD}`, `mm-button--size-${BUTTON_BASE_SIZES.MD}`,
); );
expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass( expect(getByTestId(BUTTON_BASE_SIZES.LG)).toHaveClass(
`mm-button--size-${BUTTON_SIZES.LG}`, `mm-button--size-${BUTTON_BASE_SIZES.LG}`,
); );
}); });

2
ui/components/component-library/button-base/index.js
View File

@ -1,2 +1,2 @@
export { ButtonBase } from './button-base'; export { ButtonBase } from './button-base';
export { BUTTON_SIZES } from './button.constants'; export { BUTTON_BASE_SIZES } from './button-base.constants';