mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
button base housekeeping (#16336)
* button base housekeeping * add pixel size to description * snapshot update
This commit is contained in:
Garrett Bear
GitHub
parent
107525bb1d
commit
8bdf820c70
@ -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`
|
||||
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:
|
||||
|
||||
@ -86,6 +86,20 @@ import { ButtonBase } from '../ui/component-library';
|
||||
</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
|
||||
|
||||
Use the boolean `disabled` prop to disable button
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
@ -1,6 +1,6 @@
|
||||
import { SIZES } from '../../../helpers/constants/design-system';
|
||||
|
||||
export const BUTTON_SIZES = {
|
||||
export const BUTTON_BASE_SIZES = {
|
||||
SM: SIZES.SM,
|
||||
MD: SIZES.MD,
|
||||
LG: SIZES.LG,
|
||||
@ -15,14 +15,15 @@ import {
|
||||
SIZES,
|
||||
FLEX_DIRECTION,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { BUTTON_SIZES } from './button.constants';
|
||||
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
|
||||
export const ButtonBase = ({
|
||||
as = 'button',
|
||||
block,
|
||||
children,
|
||||
className,
|
||||
size = BUTTON_SIZES.MD,
|
||||
href,
|
||||
size = BUTTON_BASE_SIZES.MD,
|
||||
icon,
|
||||
iconPositionRight,
|
||||
loading,
|
||||
@ -30,12 +31,12 @@ export const ButtonBase = ({
|
||||
iconProps,
|
||||
...props
|
||||
}) => {
|
||||
const Tag = props?.href ? 'a' : as;
|
||||
const Tag = href ? 'a' : as;
|
||||
return (
|
||||
<Box
|
||||
as={Tag}
|
||||
paddingLeft={size === BUTTON_SIZES.AUTO ? 0 : 4}
|
||||
paddingRight={size === BUTTON_SIZES.AUTO ? 0 : 4}
|
||||
paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
|
||||
paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
|
||||
className={classnames(
|
||||
'mm-button',
|
||||
`mm-button--size-${size}`,
|
||||
@ -61,13 +62,13 @@ export const ButtonBase = ({
|
||||
iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
|
||||
}
|
||||
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}
|
||||
>
|
||||
{icon && (
|
||||
<Icon
|
||||
name={icon}
|
||||
size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
|
||||
size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
|
||||
{...iconProps}
|
||||
/>
|
||||
)}
|
||||
@ -77,7 +78,7 @@ export const ButtonBase = ({
|
||||
<Icon
|
||||
className="mm-button__icon-loading"
|
||||
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>
|
||||
@ -105,6 +106,10 @@ ButtonBase.propTypes = {
|
||||
* Boolean to disable button
|
||||
*/
|
||||
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
|
||||
* The name of the icon to display. Should be one of ICON_NAMES
|
||||
@ -125,9 +130,9 @@ ButtonBase.propTypes = {
|
||||
loading: PropTypes.bool,
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { Text } from '../text';
|
||||
import { BUTTON_SIZES } from './button.constants';
|
||||
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
import { ButtonBase } from './button-base';
|
||||
import README from './README.mdx';
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: Object.values(BUTTON_SIZES),
|
||||
options: Object.values(BUTTON_BASE_SIZES),
|
||||
},
|
||||
marginTop: {
|
||||
options: marginSizeControlOptions,
|
||||
@ -145,6 +145,12 @@ export const As = (args) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Href = (args) => <ButtonBase {...args}>Anchor Element</ButtonBase>;
|
||||
|
||||
Href.args = {
|
||||
href: '/metamask',
|
||||
};
|
||||
|
||||
export const Disabled = (args) => (
|
||||
<ButtonBase {...args}>Disabled Button</ButtonBase>
|
||||
);
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { BUTTON_SIZES } from './button.constants';
|
||||
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
import { ButtonBase } from './button-base';
|
||||
|
||||
describe('ButtonBase', () => {
|
||||
it('should render button element correctly', () => {
|
||||
it('should render button element correctly and match snapshot', () => {
|
||||
const { getByTestId, getByText, container } = render(
|
||||
<ButtonBase data-testid="button-base">Button base</ButtonBase>,
|
||||
);
|
||||
expect(getByText('Button base')).toBeDefined();
|
||||
expect(container.querySelector('button')).toBeDefined();
|
||||
expect(getByTestId('button-base')).toHaveClass('mm-button');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render anchor element correctly', () => {
|
||||
@ -40,23 +41,35 @@ describe('ButtonBase', () => {
|
||||
it('should render with different size classes', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonBase size={BUTTON_SIZES.AUTO} data-testid={BUTTON_SIZES.AUTO} />
|
||||
<ButtonBase size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM} />
|
||||
<ButtonBase size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD} />
|
||||
<ButtonBase size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG} />
|
||||
<ButtonBase
|
||||
size={BUTTON_BASE_SIZES.AUTO}
|
||||
data-testid={BUTTON_BASE_SIZES.AUTO}
|
||||
/>
|
||||
<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(
|
||||
`mm-button--size-${BUTTON_SIZES.AUTO}`,
|
||||
expect(getByTestId(BUTTON_BASE_SIZES.AUTO)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_BASE_SIZES.AUTO}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.SM}`,
|
||||
expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_BASE_SIZES.SM}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.MD}`,
|
||||
expect(getByTestId(BUTTON_BASE_SIZES.MD)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_BASE_SIZES.MD}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.LG}`,
|
||||
expect(getByTestId(BUTTON_BASE_SIZES.LG)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_BASE_SIZES.LG}`,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export { ButtonBase } from './button-base';
|
||||
export { BUTTON_SIZES } from './button.constants';
|
||||
export { BUTTON_BASE_SIZES } from './button-base.constants';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user