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 link housekeeping (#16885)

Browse Source 
* button link housekeeping

Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
Garrett Bear 2023-01-26 10:32:11 -08:00 committed by GitHub
parent e33b8976cd
commit 30520a3352
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 272 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/banner-base/README.mdx
View File

@ -68,7 +68,7 @@ import { BannerBase, ICON_NAMES } from '../../component-library';
title="Action prop demo"
actionButtonLabel="Action"
actionButtonProps={{
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
iconName: ICON_NAMES.ARROW_2_RIGHT,
iconPositionRight: true,
}}
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}

3
ui/components/component-library/banner-base/banner-base.js
View File

@ -57,8 +57,7 @@ export const BannerBase = ({
)}
{actionButtonLabel && (
<ButtonLink
// noPadding TODO: Use noPadding option when released
size={SIZES.AUTO} // TODO: Remove when noPadding is added
size={SIZES.AUTO}
onClick={actionButtonOnClick}
{...actionButtonProps}
>

2
ui/components/component-library/banner-base/banner-base.stories.js
View File

@ -126,7 +126,7 @@ ActionButton.args = {
actionButtonLabel: 'Action',
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
actionButtonProps: {
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
iconName: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
iconPositionRight: true,
},
children:

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

@ -26,7 +26,6 @@ Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of
Possible sizes include:
- `SIZES.AUTO` inherits the font-size of the parent element.
- `SIZES.SM` 32px
- `SIZES.MD` 40px
- `SIZES.LG` 48px
@ -39,7 +38,6 @@ Possible sizes include:
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonBase } from '../../component-library';
<ButtonBase size={SIZES.AUTO} />
<ButtonBase size={SIZES.SM} />
<ButtonBase size={SIZES.MD} />
<ButtonBase size={SIZES.LG} />

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

@ -4,5 +4,4 @@ export const BUTTON_BASE_SIZES = {
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
AUTO: SIZES.AUTO,
};

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

@ -31,7 +31,8 @@ export const ButtonBase = ({
loading,
disabled,
iconProps,
buttonTextProps,
iconLoadingProps,
textProps,
...props
}) => {
const Tag = href ? 'a' : as;
@ -41,13 +42,13 @@ export const ButtonBase = ({
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
color={COLORS.TEXT_DEFAULT}
href={href}
paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
borderRadius={BORDER_RADIUS.PILL}
paddingLeft={4}
paddingRight={4}
className={classnames(
'mm-button-base',
`mm-button-base--size-${size}`,
{
[`mm-button-base--size-${size}`]:
Object.values(BUTTON_BASE_SIZES).includes(size),
'mm-button-base--loading': loading,
'mm-button-base--disabled': disabled,
'mm-button-base--block': block,
@ -58,6 +59,7 @@ export const ButtonBase = ({
display={DISPLAY.INLINE_FLEX}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
borderRadius={BORDER_RADIUS.PILL}
{...props}
>
<Text
@ -69,24 +71,19 @@ export const ButtonBase = ({
iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
}
gap={2}
variant={size === BUTTON_BASE_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
variant={TEXT.BODY_MD}
color={TEXT_COLORS.INHERIT}
{...buttonTextProps}
{...textProps}
>
{iconName && (
<Icon
name={iconName}
size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
{...iconProps}
/>
)}
{iconName && <Icon name={iconName} size={SIZES.SM} {...iconProps} />}
{children}
</Text>
{loading && (
<Icon
className="mm-button__icon-loading"
className="mm-button-base__icon-loading"
name={ICON_NAMES.LOADING}
size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
size={SIZES.MD}
{...iconLoadingProps}
/>
)}
</Box>
@ -135,16 +132,27 @@ ButtonBase.propTypes = {
/**
* iconProps accepts all the props from Icon
*/
iconProps: PropTypes.object,
iconProps: PropTypes.shape(Icon.PropTypes),
/**
* iconLoadingProps accepts all the props from Icon
*/
iconLoadingProps: PropTypes.shape(Icon.PropTypes),
/**
* Boolean to show loading spinner in button
*/
loading: PropTypes.bool,
/**
* The size of the ButtonBase.
* Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
* Possible values could be 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
*/
size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
size: PropTypes.oneOfType([
PropTypes.shape(BUTTON_BASE_SIZES),
PropTypes.string,
]),
/**
* textProps accepts all the props from Icon
*/
textProps: PropTypes.shape(Text.PropTypes),
/**
* ButtonBase accepts all the props from Box
*/

12
ui/components/component-library/button-base/button-base.scss
View File

@ -32,18 +32,6 @@
height: 48px;
}
&--size-auto {
height: auto;
background-color: transparent;
border-radius: 0;
vertical-align: top;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
&--loading {
cursor: not-allowed;
}

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

@ -4,11 +4,9 @@ import {
DISPLAY,
FLEX_DIRECTION,
SIZES,
TEXT,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon';
import { Text } from '../text';
import { BUTTON_BASE_SIZES } from './button-base.constants';
import { ButtonBase } from './button-base';
import README from './README.mdx';
@ -57,7 +55,7 @@ export default {
disabled: {
control: 'boolean',
},
icon: {
iconName: {
control: 'select',
options: Object.values(ICON_NAMES),
},
@ -116,12 +114,6 @@ export const Size = (args) => (
Button LG
</ButtonBase>
</Box>
<Text variant={TEXT.BODY_SM}>
<ButtonBase {...args} size={SIZES.AUTO}>
Button Auto
</ButtonBase>{' '}
inherits the font-size of the parent element.
</Text>
</>
);

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

@ -47,10 +47,6 @@ describe('ButtonBase', () => {
it('should render with different size classes', () => {
const { getByTestId } = render(
<>
<ButtonBase
size={BUTTON_BASE_SIZES.AUTO}
data-testid={BUTTON_BASE_SIZES.AUTO}
/>
<ButtonBase
size={BUTTON_BASE_SIZES.SM}
data-testid={BUTTON_BASE_SIZES.SM}
@ -65,9 +61,6 @@ describe('ButtonBase', () => {
/>
</>,
);
expect(getByTestId(BUTTON_BASE_SIZES.AUTO)).toHaveClass(
`mm-button-base--size-${BUTTON_BASE_SIZES.AUTO}`,
);
expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
`mm-button-base--size-${BUTTON_BASE_SIZES.SM}`,
);

75
ui/components/component-library/button-link/README.mdx
View File

@ -1,10 +1,11 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { ButtonLink } from './button-link';
import { ButtonBase } from '../button-base';
# ButtonLink
The `ButtonLink` is an extension of `ButtonBase` to support link styles.
The `ButtonLink` is an extension of `ButtonBase` to support link styles
<Canvas>
<Story id="components-componentlibrary-buttonlink--default-story" />
@ -16,18 +17,23 @@ The `ButtonLink` accepts all props below as well as all [Box](/docs/components-u
<ArgsTable of={ButtonLink} />
The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
<ArgsTable of={ButtonBase} />
### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.MD`
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.AUTO`.
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `SIZES`
Possible sizes include:
- `SIZES.AUTO` inherits the font-size of the parent element.
- `SIZES.AUTO` sets the height to auto but retains `ButtonLink` font-size
- `SIZES.SM` 32px
- `SIZES.MD` 40px
- `SIZES.LG` 48px
- `SIZES.INHERIT` inherits the font-size of the parent element. Used for inline links in paragraphs.
<Canvas>
<Story id="components-componentlibrary-buttonlink--size" />
@ -35,12 +41,33 @@ Possible sizes include:
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonLink } from '../../component-library';
import { ButtonLink, Text, TEXT } from '../../component-library';
<ButtonLink size={SIZES.AUTO} />
<ButtonLink size={SIZES.SM} />
<ButtonLink size={SIZES.MD} />
<ButtonLink size={SIZES.LG} />
<ButtonLink size={SIZES.AUTO}>
Auto (default)
</ButtonLink>
<ButtonLink size={SIZES.SM}>
Small
</ButtonLink>
<ButtonLink size={SIZES.MD}>
Medium
</ButtonLink>
<ButtonLink size={SIZES.LG}>
Large
</ButtonLink>
<Text variant={TEXT.BODY_LG_MEDIUM}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
</Text>
<Text variant={TEXT.BODY_MD}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
</Text>
<Text variant={TEXT.BODY_SM}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
</Text>
<Text variant={TEXT.BODY_XS}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
</Text>
```
### Danger
@ -69,5 +96,33 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
```jsx
import { ButtonLink } from '../../component-library';
<ButtonLink href="/">Anchor Element</ButtonLink>;
<ButtonLink href="/">Href example</ButtonLink>;
```
### Hit area
The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `SIZES.AUTO` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
<Canvas>
<Story id="components-componentlibrary-buttonlink--hit-area" />
</Canvas>
```jsx
import { ButtonLink } from '../../component-library';
<ButtonLink paddingLeft={4} paddingRight={4}>
Auto (default)
</ButtonLink>
<ButtonLink size={SIZES.SM} paddingLeft={4} paddingRight={4}>
Small
</ButtonLink>
<ButtonLink size={SIZES.MD} paddingLeft={4} paddingRight={4}>
Medium
</ButtonLink>
<ButtonLink size={SIZES.LG} paddingLeft={4} paddingRight={4}>
Large
</ButtonLink>
<ButtonLink size={SIZES.LG} block>
Large block
</ButtonLink>
```

2
ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonLink should render button element correctly 1`] = `
<div>
<button
class="box mm-button-base mm-button-base--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill"
class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="button-link"
>
<span

1
ui/components/component-library/button-link/button-link.constants.js
View File

@ -5,4 +5,5 @@ export const BUTTON_LINK_SIZES = {
MD: SIZES.MD,
LG: SIZES.LG,
AUTO: SIZES.AUTO,
INHERIT: SIZES.INHERIT,
};

35
ui/components/component-library/button-link/button-link.js
View File

@ -3,26 +3,39 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonBase } from '../button-base';
import { COLORS } from '../../../helpers/constants/design-system';
import { COLORS, TEXT, SIZES } from '../../../helpers/constants/design-system';
import { BUTTON_LINK_SIZES } from './button-link.constants';
export const ButtonLink = ({
className,
danger,
disabled,
size = BUTTON_LINK_SIZES.MD,
size = SIZES.AUTO,
...props
}) => {
return (
<ButtonBase
className={classnames(className, 'mm-button-link', {
'mm-button-link--type-danger': danger,
'mm-button-link--disabled': disabled,
'mm-button-link--size-inherit': size === BUTTON_LINK_SIZES.INHERIT,
'mm-button-link--size-auto': size === BUTTON_LINK_SIZES.AUTO,
})}
size={size}
color={danger ? COLORS.ERROR_DEFAULT : COLORS.PRIMARY_DEFAULT}
paddingLeft={0}
paddingRight={0}
size={size === BUTTON_LINK_SIZES.INHERIT ? null : size}
backgroundColor={COLORS.TRANSPARENT}
{...{ disabled, ...props }}
color={danger ? COLORS.ERROR_DEFAULT : COLORS.PRIMARY_DEFAULT}
borderRadius={null}
{...props}
textProps={{
variant:
size === BUTTON_LINK_SIZES.INHERIT ? TEXT.INHERIT : TEXT.BODY_MD,
}}
iconProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.SM,
}}
iconLoadingProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.MD,
}}
/>
);
};
@ -37,12 +50,8 @@ ButtonLink.propTypes = {
*/
danger: PropTypes.bool,
/**
* Boolean to disable button
*/
disabled: PropTypes.bool,
/**
* Possible size values: 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
* Default value is 'SIZES.MD'.
* Possible size values: 'SIZES.AUTO'(auto), 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px), 'SIZES.INHERIT'(inherits parents font-size)
* Default value is 'SIZES.AUTO'.
*/
size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)),
/**

15
ui/components/component-library/button-link/button-link.scss
View File

@ -35,4 +35,19 @@
&--type-danger#{&}--disabled:hover {
opacity: 0.3;
}
&--size-auto {
height: auto;
}
&--size-inherit {
height: auto;
background-color: transparent;
vertical-align: top;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
}

99
ui/components/component-library/button-link/button-link.stories.js
View File

@ -1,6 +1,8 @@
import React from 'react';
import {
ALIGN_ITEMS,
BORDER_STYLE,
COLORS,
DISPLAY,
SIZES,
TEXT,
@ -65,7 +67,7 @@ export default {
href: {
control: 'text',
},
icon: {
iconName: {
control: 'select',
options: Object.values(ICON_NAMES),
table: { category: 'button base props' },
@ -118,28 +120,49 @@ DefaultStory.storyName = 'Default';
export const Size = (args) => (
<>
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START} gap={4}>
<ButtonLink {...args} size={SIZES.AUTO}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} size={SIZES.SM}>
Small Button
Small
</ButtonLink>
<ButtonLink {...args} size={SIZES.MD}>
Medium (Default) Button
Medium
</ButtonLink>
<ButtonLink {...args} size={SIZES.LG}>
Large Button
Large
</ButtonLink>
</Box>
<Text variant={TEXT.BODY_LG_MEDIUM}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={SIZES.INHERIT}>
Learn more
</ButtonLink>
</Text>
<Text variant={TEXT.BODY_MD}>
<ButtonLink {...args} size={SIZES.AUTO}>
Button Auto
</ButtonLink>{' '}
inherits the font-size of the parent element.
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={SIZES.INHERIT}>
Learn more
</ButtonLink>
</Text>
<Text variant={TEXT.BODY_SM}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={SIZES.INHERIT}>
Learn more
</ButtonLink>
</Text>
<Text variant={TEXT.BODY_XS}>
Inherits the font-size of the parent element.{' '}
<ButtonLink {...args} size={SIZES.INHERIT}>
Learn more
</ButtonLink>
</Text>
</>
);
export const Danger = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<Box display={DISPLAY.FLEX} gap={4}>
<ButtonLink {...args}>Normal</ButtonLink>
{/* Test Anchor tag to match exactly as button */}
<ButtonLink as="a" {...args} href="#" danger>
@ -148,8 +171,62 @@ export const Danger = (args) => (
</Box>
);
export const Href = (args) => <ButtonLink {...args}>Anchor Element</ButtonLink>;
export const Href = (args) => <ButtonLink {...args}>Href example</ButtonLink>;
Href.args = {
href: '/metamask',
};
export const HitArea = (args) => (
<>
<Text marginBottom={4}>Default</Text>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_START}
gap={4}
marginBottom={4}
>
<ButtonLink {...args} size={SIZES.AUTO}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} size={SIZES.SM}>
Small
</ButtonLink>
<ButtonLink {...args} size={SIZES.MD}>
Medium
</ButtonLink>
<ButtonLink {...args} size={SIZES.LG}>
Large
</ButtonLink>
</Box>
<Text marginBottom={4}>Add paddingLeft and paddingRight props</Text>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_START}
gap={4}
marginBottom={4}
>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.AUTO}>
Auto (default)
</ButtonLink>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.SM}>
Small
</ButtonLink>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.MD}>
Medium
</ButtonLink>
<ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.LG}>
Large
</ButtonLink>
</Box>
<Text marginBottom={4}>Add block prop</Text>
<ButtonLink {...args} size={SIZES.LG} block>
Large block
</ButtonLink>
</>
);
HitArea.args = {
borderColor: COLORS.ERROR_DEFAULT,
borderStyle: BORDER_STYLE.DASHED,
};

11
ui/components/component-library/button-link/button-link.test.js
View File

@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
import React from 'react';
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonLink } from './button-link';
import { BUTTON_LINK_SIZES } from './button-link.constants';
describe('ButtonLink', () => {
it('should render button element correctly', () => {
@ -42,7 +43,6 @@ describe('ButtonLink', () => {
<ButtonLink size={SIZES.SM} data-testid={SIZES.SM} />
<ButtonLink size={SIZES.MD} data-testid={SIZES.MD} />
<ButtonLink size={SIZES.LG} data-testid={SIZES.LG} />
<ButtonLink size={SIZES.AUTO} data-testid={SIZES.AUTO} />
</>,
);
@ -55,9 +55,14 @@ describe('ButtonLink', () => {
expect(getByTestId(SIZES.LG)).toHaveClass(
`mm-button-base--size-${SIZES.LG}`,
);
expect(getByTestId(SIZES.AUTO)).toHaveClass(
`mm-button-base--size-${SIZES.AUTO}`,
});
it('should render ButtonLink inherit size', () => {
const { getByTestId } = render(
<ButtonLink size={BUTTON_LINK_SIZES.INHERIT} data-testid="inherit" />,
);
// Different size classname compared to SIZES.SM, SIZES.MD, SIZES.LG
expect(getByTestId('inherit')).toHaveClass(`mm-button-link--size-inherit`);
});
it('should render as danger', () => {

2
ui/components/component-library/button-primary/button-primary.stories.js
View File

@ -60,7 +60,7 @@ export default {
control: 'boolean',
table: { category: 'button base props' },
},
icon: {
iconName: {
control: 'select',
options: Object.values(ICON_NAMES),
table: { category: 'button base props' },

2
ui/components/component-library/button-secondary/button-secondary.stories.js
View File

@ -60,7 +60,7 @@ export default {
control: 'boolean',
table: { category: 'button base props' },
},
icon: {
iconName: {
control: 'select',
options: Object.values(ICON_NAMES),
table: { category: 'button base props' },

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

@ -55,7 +55,8 @@ Optional: `BUTTON_SIZES` from `./button` object can be used instead of `SIZES`.
Possible sizes include:
- `SIZES.AUTO` inherits the font-size of the parent element. (Only used for `ButtonLink`)
- `SIZES.INHERIT` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `SIZES.AUTO` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `SIZES.SM` 32px
- `SIZES.MD` 40px
- `SIZES.LG` 48px
@ -68,7 +69,7 @@ Possible sizes include:
import { SIZES } from '../../../helpers/constants/design-system';
import { Button } from '../ui/component-library';
<Button size={SIZES.AUTO} />
<Button size={SIZES.INHERIT} />
<Button size={SIZES.SM} />
<Button size={SIZES.MD} />
<Button size={SIZES.LG} />

2
ui/components/component-library/button/__snapshots__/button.test.js.snap
View File

@ -38,7 +38,7 @@ exports[`Button should render with different button types 1`] = `
</span>
</button>
<button
class="box mm-button-base mm-button-base--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill"
class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="link"
>
<span

1
ui/components/component-library/button/button.constants.js
View File

@ -4,6 +4,7 @@ export const BUTTON_SIZES = {
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
INHERIT: SIZES.INHERIT,
AUTO: SIZES.AUTO,
};

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

@ -146,12 +146,15 @@ export const Size = (args) => (
<Button {...args} size={SIZES.LG}>
Large Button
</Button>
<Button {...args} type={BUTTON_TYPES.LINK}>
Auto ButtonLink
</Button>
</Box>
<Text variant={TEXT.BODY_SM}>
<Button {...args} type={BUTTON_TYPES.LINK} size={SIZES.AUTO}>
Button Auto
<Button {...args} type={BUTTON_TYPES.LINK} size={SIZES.INHERIT}>
Button Inherit
</Button>{' '}
inherits the font-size of the parent element. Auto size only used for
inherits the font-size of the parent element. Inherit size only used for
ButtonLink.
</Text>
</>

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

@ -75,11 +75,11 @@ describe('Button', () => {
const { getByTestId } = render(
<>
<Button
size={BUTTON_SIZES.AUTO}
size={BUTTON_SIZES.INHERIT}
type={BUTTON_TYPES.LINK}
data-testid={BUTTON_SIZES.AUTO}
data-testid={BUTTON_SIZES.INHERIT}
>
Button {BUTTON_SIZES.AUTO}
Button {BUTTON_SIZES.INHERIT}
</Button>
<Button size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM}>
Button {BUTTON_SIZES.SM}
@ -92,8 +92,8 @@ describe('Button', () => {
</Button>
</>,
);
expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass(
`mm-button-base--size-${BUTTON_SIZES.AUTO}`,
expect(getByTestId(BUTTON_SIZES.INHERIT)).toHaveClass(
`mm-button-link--size-${BUTTON_SIZES.INHERIT}`,
);
expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
`mm-button-base--size-${BUTTON_SIZES.SM}`,

9
ui/components/component-library/form-text-field/README.mdx
View File

@ -296,12 +296,12 @@ import {
color={COLORS.ICON_ALTERNATIVE}
/>
</Box>
<ButtonLink size={SIZES.AUTO}>Use default</ButtonLink>
<ButtonLink>Use default</ButtonLink>
</Box>
<FormTextField
id="custom-spending-cap"
placeholder="Enter a number"
rightAccessory={<ButtonLink size={SIZES.AUTO}>Max</ButtonLink>}
rightAccessory={<ButtonLink>Max</ButtonLink>}
marginBottom={4}
type={TEXT_FIELD_TYPES.NUMBER}
/>
@ -314,6 +314,7 @@ import {
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.FLEX_START}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
marginTop={1}
>
{/**
* If you need a custom help text
@ -321,11 +322,11 @@ import {
* import the HelpText component separately and handle the error
* logic yourself
*/}
<HelpText htmlFor="chainId" required paddingRight={2} marginTop={1}>
<HelpText htmlFor="chainId" required marginRight={2}>
Only enter a number that you're comfortable with the contract accessing
now or in the future. You can always increase the token limit later.
</HelpText>
<ButtonLink size={SIZES.AUTO} marginLeft="auto" marginTop={1}>
<ButtonLink marginLeft="auto">
Max
</ButtonLink>
</Box>

6
ui/components/component-library/form-text-field/form-text-field.stories.js
View File

@ -441,12 +441,12 @@ export const CustomLabelOrHelpText = () => (
color={COLORS.ICON_ALTERNATIVE}
/>
</Box>
<ButtonLink size={SIZES.AUTO}>Use default</ButtonLink>
<ButtonLink>Use default</ButtonLink>
</Box>
<FormTextField
id="custom-spending-cap"
placeholder="Enter a number"
rightAccessory={<ButtonLink size={SIZES.AUTO}>Max</ButtonLink>}
rightAccessory={<ButtonLink>Max</ButtonLink>}
marginBottom={4}
type={TEXT_FIELD_TYPES.NUMBER}
/>
@ -469,7 +469,7 @@ export const CustomLabelOrHelpText = () => (
accessing now or in the future. You can always increase the token limit
later.
</HelpText>
<ButtonLink size={SIZES.AUTO} marginLeft="auto" marginTop={1}>
<ButtonLink marginLeft="auto" marginTop={1}>
Max
</ButtonLink>
</Box>

2
ui/components/component-library/help-text/README.mdx
View File

@ -41,7 +41,7 @@ import { HelpText, Icon, ICON_NAMES } from '../../component-library';
marginLeft={1}
color={COLORS.INHERIT}
name={ICON_NAMES.WARNING}
size={SIZES.AUTO}
size={SIZES.INHERIT}
/>
</HelpText>
```

2
ui/components/component-library/help-text/help-text.stories.js
View File

@ -58,7 +58,7 @@ export const Children = (args) => (
marginLeft={1}
color={COLORS.INHERIT}
name={ICON_NAMES.WARNING}
size={SIZES.AUTO}
size={SIZES.INHERIT}
/>
</HelpText>
</Box>

4
ui/components/component-library/icon/README.mdx
View File

@ -47,7 +47,7 @@ Possible sizes include:
- `SIZES.MD` 20px
- `SIZES.LG` 24px
- `SIZES.XL` 32px
- `SIZES.AUTO` inherits the font-size from parent element. This is useful for inline icons in text.
- `SIZES.INHERIT` inherits the font-size from parent element. This is useful for inline icons in text.
<Canvas>
<Story id="components-componentlibrary-icon--size" />
@ -63,7 +63,7 @@ import { Icon, ICON_NAMES } from '../../components/component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} size={SIZES.LG} />
<Icon name={ICON_NAMES.ADD_SQUARE} size={SIZES.XL} />
<Text as="p" variant={TEXT.BODY_SM}>
<Icon size={SIZES.AUTO} /> Auto also exists and inherits the
<Icon size={SIZES.INHERIT} /> inherits the
font-size of the parent element.
</Text>
```

2
ui/components/component-library/icon/icon.constants.js
View File

@ -20,5 +20,5 @@ export const ICON_SIZES = {
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
AUTO: SIZES.AUTO,
AUTO: SIZES.INHERIT,
};

2
ui/components/component-library/icon/icon.scss
View File

@ -37,7 +37,7 @@
--size: 32px;
}
&--size-auto {
&--size-inherit {
--size: 1em; // Inherits parent font-size
position: relative; // Fixes vertical alignment

6
ui/components/component-library/icon/icon.stories.js
View File

@ -203,7 +203,7 @@ export const DefaultStory = (args) => {
<Text>
No matches. Please try again or ask in the{' '}
<ButtonLink
size={SIZES.AUTO}
size={SIZES.INHERIT}
color={COLORS.PRIMARY_DEFAULT}
href="https://consensys.slack.com/archives/C0354T27M5M"
target="_blank"
@ -258,8 +258,8 @@ export const Size = (args) => (
<Icon {...args} size={SIZES.XL} />
</Box>
<Text as="p" variant={TEXT.BODY_SM}>
<Icon {...args} size={SIZES.AUTO} /> Auto also exists and inherits the
font-size of the parent element.
<Icon {...args} size={SIZES.INHERIT} /> inherits the font-size of the
parent element.
</Text>
</>
);

4
ui/components/component-library/icon/icon.test.js
View File

@ -96,7 +96,7 @@ describe('Icon', () => {
/>
<Icon
name={ICON_NAMES.ADD_SQUARE}
size={SIZES.AUTO}
size={SIZES.INHERIT}
data-testid="icon-auto"
/>
</>,
@ -106,7 +106,7 @@ describe('Icon', () => {
expect(getByTestId('icon-md')).toHaveClass('mm-icon--size-md');
expect(getByTestId('icon-lg')).toHaveClass('mm-icon--size-lg');
expect(getByTestId('icon-xl')).toHaveClass('mm-icon--size-xl');
expect(getByTestId('icon-auto')).toHaveClass('mm-icon--size-auto');
expect(getByTestId('icon-auto')).toHaveClass('mm-icon--size-inherit');
});
it('should render with icon colors', () => {
const { getByTestId } = render(

2
ui/components/component-library/label/README.mdx
View File

@ -40,7 +40,7 @@ import { Label, TextField, Icon, ICON_NAMES } from '../../component-library';
<Icon
color={COLORS.ICON_ALTERNATIVE}
name={ICON_NAMES.INFO}
size={SIZES.AUTO}
size={SIZES.INHERIT}
/>
</Label>
<Label

2
ui/components/component-library/label/label.stories.js
View File

@ -63,7 +63,7 @@ export const Children = (args) => (
<Icon
color={COLORS.ICON_ALTERNATIVE}
name={ICON_NAMES.INFO}
size={SIZES.AUTO}
size={SIZES.INHERIT}
/>
</Label>
<Label

3
ui/helpers/constants/design-system.js
View File

@ -186,7 +186,8 @@ export const SIZES = {
MD: 'md',
LG: 'lg',
XL: 'xl',
AUTO: 'auto', // Used for Text, Icon, and Button components to inherit the parent elements font-size
INHERIT: 'inherit', // Used for Text, Icon, and Button components to inherit the parent elements font-size
AUTO: 'auto',
NONE,
};