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

fix broken stories and readme from TS update (#17703)

Browse Source
This commit is contained in:
Garrett Bear 2023-02-14 09:33:04 -08:00 committed by GitHub
parent 3814616c7a
commit ec870cebc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 195 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/component-library/avatar-account/README.mdx
View File

@ -26,7 +26,7 @@ component props
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount`
Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES`
Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Possible sizes include:
@ -36,10 +36,10 @@ Possible sizes include:
- `Size.LG` 40px
- `Size.XL` 48px
Defaults to `SIZES.MD`
Defaults to `Size.MD`
<Canvas>
<Story id="components-componentlibrary-avataraccount--size" />
<Story id="components-componentlibrary-avataraccount--size-story" />
</Canvas>
```jsx

4
ui/components/component-library/avatar-base/avatar-base.js
View File

@ -44,12 +44,12 @@ AvatarBase.propTypes = {
children: PropTypes.node,
/**
* The background color of the AvatarBase
* Defaults to COLORS.BACKGROUND_ALTERNATIVE
* Defaults to Color.backgroundAlternative
*/
backgroundColor: Box.propTypes.backgroundColor,
/**
* The background color of the AvatarBase
* Defaults to COLORS.BORDER_DEFAULT
* Defaults to Color.borderDefault
*/
borderColor: Box.propTypes.borderColor,
/**

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

@ -37,10 +37,10 @@ Possible sizes include:
- `Size.LG` 40px
- `Size.XL` 48px
Defaults to `SIZES.MD`
Defaults to `Size.MD`
<Canvas>
<Story id="components-componentlibrary-avatarfavicon--size" />
<Story id="components-componentlibrary-avatarfavicon--size-story" />
</Canvas>
```jsx

2
ui/components/component-library/avatar-favicon/avatar-favicon.js
View File

@ -71,7 +71,7 @@ AvatarFavicon.propTypes = {
size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
/**
* The border color of the AvatarFavicon
* Defaults to COLORS.TRANSPARENT
* Defaults to Color.transparent
*/
borderColor: Box.propTypes.borderColor,
/**

4
ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
View File

@ -28,6 +28,9 @@ export default {
src: {
control: 'text',
},
name: {
control: 'text',
},
borderColor: {
options: Object.values(BorderColor),
control: 'select',
@ -36,6 +39,7 @@ export default {
args: {
src: 'https://uniswap.org/favicon.ico',
size: Size.MD,
name: 'Uniswap',
},
};

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

@ -24,7 +24,7 @@ component props
### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon`
Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
@ -36,10 +36,10 @@ Possible sizes include:
- `Size.LG` 40px
- `Size.XL` 48px
Defaults to `SIZES.MD`
Defaults to `Size.MD`
<Canvas>
<Story id="components-componentlibrary-avataricon--size" />
<Story id="components-componentlibrary-avataricon--size-story" />
</Canvas>
```jsx

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

@ -106,7 +106,7 @@ export const SizeStory = (args) => (
);
SizeStory.storyName = 'Size';
Size.args = {
SizeStory.args = {
iconName: ICON_NAMES.CONFIRMATION,
};

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

@ -31,7 +31,7 @@ Possible sizes include:
Defaults to `md`
<Canvas>
<Story id="components-componentlibrary-avatarnetwork--size" />
<Story id="components-componentlibrary-avatarnetwork--size-story" />
</Canvas>
```jsx

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

@ -31,7 +31,7 @@ Possible sizes include:
Defaults to `md`
<Canvas>
<Story id="components-componentlibrary-avatartoken--size" />
<Story id="components-componentlibrary-avatartoken--size-story" />
</Canvas>
```jsx

6
ui/components/component-library/avatar-token/avatar-token.js
View File

@ -100,17 +100,17 @@ AvatarToken.propTypes = {
size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)),
/**
* The background color of the AvatarToken
* Defaults to COLORS.BACKGROUND_ALTERNATIVE
* Defaults to Color.backgroundAlternative
*/
backgroundColor: Box.propTypes.backgroundColor,
/**
* The background color of the AvatarToken
* Defaults to COLORS.BORDER_DEFAULT
* Defaults to Color.borderDefault
*/
borderColor: Box.propTypes.borderColor,
/**
* The color of the text inside the AvatarToken
* Defaults to COLORS.TEXT_DEFAULT
* Defaults to Color.textDefault
*/
color: Box.propTypes.color,
/**

8
ui/components/component-library/avatar-with-badge/README.mdx
View File

@ -31,7 +31,7 @@ import { AvatarWithBadge } from '../ui/component-library';
badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
badge={
<AvatarNetwork
size={SIZES.XS}
size={Size.XS}
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
@ -39,7 +39,7 @@ import { AvatarWithBadge } from '../ui/component-library';
>
<AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
size={SIZES.MD}
size={Size.MD}
type={TYPES.JAZZICON}
/>
</AvatarWithBadge>
@ -48,7 +48,7 @@ import { AvatarWithBadge } from '../ui/component-library';
badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
badge={
<AvatarNetwork
size={SIZES.XS}
size={Size.XS}
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
@ -56,7 +56,7 @@ import { AvatarWithBadge } from '../ui/component-library';
>
<AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
size={SIZES.MD}
size={Size.MD}
type={TYPES.JAZZICON}
/>
</AvatarWithBadge>

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

@ -14,7 +14,7 @@ import { BannerBase } from '..';
The `BannerAlert` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Banner} />
<ArgsTable of={BannerAlert} />
The `BannerAlert` accepts all `BannerBase` component props below

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

@ -90,7 +90,7 @@ BannerAlert.propTypes = {
*/
severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)),
/**
* Banner accepts all the props from BannerBase
* BannerAlert accepts all the props from BannerBase
*/
...BannerBase.propTypes,
};

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

@ -128,12 +128,12 @@ Use the `startAccessory` prop to add components such as icons or fox image to th
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import { BannerBase, Icon, ICON_NAMES } from '../../component-library';
<BannerBase
title="Start accessory demo"
startAccessory={<Icon name={ICON_NAMES.INFO} size={SIZES.LG} />}
startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />}
>
The info icon on the left is passed through the startAccessory prop
</BannerBase>;

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

@ -19,19 +19,19 @@ The `ButtonBase` accepts all props below as well as all [Box](/docs/components-u
### Size
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`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js`
to change the size of `ButtonBase`. Defaults to `Size.MD`
Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `SIZES`.
Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `Size`.
Possible sizes include:
- `SIZES.SM` 32px
- `SIZES.MD` 40px
- `SIZES.LG` 48px
- `Size.SM` 32px
- `Size.MD` 40px
- `Size.LG` 48px
<Canvas>
<Story id="components-componentlibrary-buttonbase--size" />
<Story id="components-componentlibrary-buttonbase--size-story" />
</Canvas>
```jsx

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

@ -34,10 +34,10 @@ import { ICON_NAMES } from '../icon';
### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js`
to change the size of `ButtonIcon`. Defaults to `SIZES.SM`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js`
to change the size of `ButtonIcon`. Defaults to `Size.SM`
Optional: `BUTTON_ICON_SIZES` from `./button-icon` object can be used instead of `SIZES`.
Optional: `BUTTON_ICON_SIZES` from `./button-icon` object can be used instead of `Size`.
Possible sizes include:
@ -45,7 +45,7 @@ Possible sizes include:
- `Size.LG` 32px
<Canvas>
<Story id="components-componentlibrary-buttonicon--size" />
<Story id="components-componentlibrary-buttonicon--size-story" />
</Canvas>
```jsx
@ -65,11 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
</Canvas>
```jsx
import { ButtonIcon } from '../ui/component-library';
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
```
### As
@ -86,11 +87,12 @@ Button `as` options:
</Canvas>
```jsx
import { ButtonIcon } from '../ui/component-library';
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
```
### Href
@ -102,31 +104,33 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas>
```jsx
import { ButtonIcon } from '../ui/component-library';
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon
href="https://metamask.io/"
target="_blank"
iconName={ICON_NAMES.EXPORT}
color={COLORS.PRIMARY_DEFAULT}
color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io"
/>;
```
### Color
Use the `color` prop and the `COLORS` object to change the color of the `ButtonIcon`. Defaults to `COLORS.ICON_DEFAULT`.
Use the `color` prop and the `Color` object to change the color of the `ButtonIcon`. Defaults to `Color.iconDefault`.
<Canvas>
<Story id="components-componentlibrary-buttonicon--color" />
<Story id="components-componentlibrary-buttonicon--color-story" />
</Canvas>
```jsx
import { ButtonIcon } from '../ui/component-library';
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon
iconName={ICON_NAMES.EXPORT}
color={COLORS.PRIMARY_DEFAULT}
color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io"
/>;
```

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

@ -23,9 +23,9 @@ The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-butt
### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.AUTO`.
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `Size.auto`.
Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `SIZES`
Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `Size`
Possible sizes include:
@ -36,7 +36,7 @@ Possible sizes include:
- `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
<Canvas>
<Story id="components-componentlibrary-buttonlink--size" />
<Story id="components-componentlibrary-buttonlink--size-story" />
</Canvas>
```jsx
@ -57,18 +57,18 @@ import { ButtonLink, Text, TextVariant } from '../../component-library';
</ButtonLink>
<Text variant={TextVariant.bodyLgMedium}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodyMd}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodySm}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
<Text variant={TextVariant.bodyXs}>
Inherits the font-size of the parent element and example with textProps override for a success color.
<ButtonLink size={Size.INHERIT}>Learn more</ButtonLink>
<ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text>
```
@ -103,7 +103,7 @@ import { ButtonLink } from '../../component-library';
### 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%.
The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `Size.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" />
@ -115,16 +115,16 @@ import { ButtonLink } from '../../component-library';
<ButtonLink paddingLeft={4} paddingRight={4}>
Auto (default)
</ButtonLink>
<ButtonLink size={SIZES.SM} paddingLeft={4} paddingRight={4}>
<ButtonLink size={Size.SM} paddingLeft={4} paddingRight={4}>
Small
</ButtonLink>
<ButtonLink size={SIZES.MD} paddingLeft={4} paddingRight={4}>
<ButtonLink size={Size.MD} paddingLeft={4} paddingRight={4}>
Medium
</ButtonLink>
<ButtonLink size={SIZES.LG} paddingLeft={4} paddingRight={4}>
<ButtonLink size={Size.LG} paddingLeft={4} paddingRight={4}>
Large
</ButtonLink>
<ButtonLink size={SIZES.LG} block>
<ButtonLink size={Size.LG} block>
Large block
</ButtonLink>
```

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

@ -18,18 +18,18 @@ The `ButtonPrimary` accepts all props below as well as all [Box](/docs/component
### 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`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonPrimary`. Defaults to `Size.MD`
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `Size`.
Possible sizes include:
- `SIZES.SM` 32px
- `SIZES.MD` 40px
- `SIZES.LG` 48px
- `Size.SM` 32px
- `Size.MD` 40px
- `Size.LG` 48px
<Canvas>
<Story id="components-componentlibrary-buttonprimary--size" />
<Story id="components-componentlibrary-buttonprimary--size-story" />
</Canvas>
```jsx

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

@ -18,18 +18,18 @@ The `ButtonSecondary` accepts all props below as well as all [Box](/docs/compone
### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonSecondary`. Defaults to `SIZES.MD`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonSecondary`. Defaults to `Size.MD`
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `Size`.
Possible sizes include:
- `SIZES.SM` 32px
- `SIZES.MD` 40px
- `SIZES.LG` 48px
- `Size.SM` 32px
- `Size.MD` 40px
- `Size.LG` 48px
<Canvas>
<Story id="components-componentlibrary-buttonsecondary--size" />
<Story id="components-componentlibrary-buttonsecondary--size-story" />
</Canvas>
```jsx

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

@ -49,30 +49,30 @@ import { Button, BUTTON_TYPES } from '../ui/component-library/button';
### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `SIZES.MD`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `Size.MD`
Optional: `BUTTON_SIZES` from `./button` object can be used instead of `SIZES`.
Optional: `BUTTON_SIZES` from `./button` object can be used instead of `Size`.
Possible sizes include:
- `Size.inherit` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.auti` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.auto` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.SM` 32px
- `Size.MD` 40px
- `Size.LG` 48px
<Canvas>
<Story id="components-componentlibrary-button--size" />
<Story id="components-componentlibrary-button--size-story" />
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Size } from '../../../helpers/constants/design-system';
import { Button } from '../ui/component-library';
<Button size={SIZES.INHERIT} />
<Button size={SIZES.SM} />
<Button size={SIZES.MD} />
<Button size={SIZES.LG} />
<Button size={Size.inherit} />
<Button size={Size.SM} />
<Button size={Size.MD} />
<Button size={Size.LG} />
```
### Danger

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

@ -62,10 +62,10 @@ import { HelpText } from '../../component-library';
### Color
It may be useful to change the color of the `HelpText`. Use the `color` prop and the `COLORS` object to change the color of the `HelpText`. Defaults to `COLORS.TEXT_DEFAULT`.
It may be useful to change the color of the `HelpText`. Use the `color` prop and the `Color` object to change the color of the `HelpText`. Defaults to `Color.textDefault`.
<Canvas>
<Story id="components-componentlibrary-helptext--color" />
<Story id="components-componentlibrary-helptext--color-story" />
</Canvas>
```jsx

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

@ -36,7 +36,7 @@ HelpText.propTypes = {
error: PropTypes.bool,
/**
* The color of the HelpText will be overridden if error is true
* Defaults to COLORS.TEXT_DEFAULT
* Defaults to Color.textDefault
*/
color: PropTypes.oneOf(Object.values(TextColor)),
/**

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

@ -38,19 +38,19 @@ import { Icon, ICON_NAMES } from '../../component-library';
### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `SIZES.SM`
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `Size.SM`
Possible sizes include:
- `SIZES.XS` 12px
- `SIZES.SM` 16px
- `SIZES.MD` 20px
- `SIZES.LG` 24px
- `SIZES.XL` 32px
- `SIZES.INHERIT` inherits the font-size from parent element. This is useful for inline icons in text.
- `Size.XS` 12px
- `Size.SM` 16px
- `Size.MD` 20px
- `Size.LG` 24px
- `Size.XL` 32px
- `Size.inherit` inherits the font-size from parent element. This is useful for inline icons in text.
<Canvas>
<Story id="components-componentlibrary-icon--size" />
<Story id="components-componentlibrary-icon--size-story" />
</Canvas>
```jsx
@ -70,10 +70,10 @@ import { Icon, ICON_NAMES } from '../../component-library';
### Color
Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `COLORS.INHERIT` which will use the text color of the parent element. This is useful for inline icons.
Use the `color` prop and the `Color` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `Color.inherit` which will use the text color of the parent element. This is useful for inline icons.
<Canvas>
<Story id="components-componentlibrary-icon--color" />
<Story id="components-componentlibrary-icon--color-story" />
</Canvas>
```jsx

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

@ -253,7 +253,6 @@ export const SizeStory = (args) => (
gap={1}
marginBottom={4}
>
<Icon {...args} size={Size.XXS} />
<Icon {...args} size={Size.XS} />
<Icon {...args} size={Size.SM} />
<Icon {...args} size={Size.MD} />

15
ui/components/component-library/text-field-base/README.mdx
View File

@ -31,7 +31,7 @@ Possible sizes include:
Defaults to `md`
<Canvas>
<Story id="components-componentlibrary-textfieldbase--size" />
<Story id="components-componentlibrary-textfieldbase--size-story" />
</Canvas>
```jsx
@ -91,14 +91,14 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
</Canvas>
```jsx
import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { Color, DISPLAY } from '../../../helpers/constants/design-system';
import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-library';
<TextFieldBase
placeholder="Search"
leftAccessory={
<Icon
color={COLORS.ICON_ALTERNATIVE}
color={Color.iconAlternative}
name={ICON_NAMES.SEARCH}
/>
}
@ -110,7 +110,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-lib
<ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE}
ariaLabel="Scan QR code"
iconProps={{ color: COLORS.PRIMARY_DEFAULT }}
iconProps={{ color: Color.primaryDefault }}
/>
}
/>
@ -131,7 +131,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-lib
isAddressValid && (
<Icon
name={ICON_NAMES.CHECK}
color={COLORS.SUCCESS_DEFAULT}
color={Color.successDefault}
/>
)
}
@ -208,16 +208,17 @@ To function fully the custom component should accept the following props:
```jsx
import { TextFieldBase, Icon, ICON_NAMES } from '../../component-library';
import { Size } from '../../../helpers/constants/design-system';
// should map the props to the custom input component
const CustomInputComponent = () => <div>{/* Custom input component */}</div>;
const TextFieldCustomInput = (args) => (
<TextFieldBase
size={SIZES.LG}
size={Size.LG}
InputComponent={CustomInputComponent}
leftAccessory={
<Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET} />
<Icon color={Color.iconAlternative} name={ICON_NAMES.WALLET} />
}
/>
);

10
ui/components/component-library/text-field-search/README.mdx
View File

@ -71,11 +71,7 @@ Use the `clearButtonProps` to access other props of the clear button.
```jsx
import React, { useState } from 'react';
import {
SIZES,
COLORS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { Color, BorderRadius } from '../../../helpers/constants/design-system';
import { TextFieldSearch } from '../../component-library';
@ -94,8 +90,8 @@ const handleOnClear = () => {
onChange={handleOnChange}
clearButtonOnClick={handleOnClear}
clearButtonProps={{
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
borderRadius: BORDER_RADIUS.XS,
backgroundColor: Color.backgroundAlternative,
borderRadius: BorderRadius.XS,
'data-testid': 'clear-button',
}}
/>;

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

@ -67,11 +67,7 @@ Use the `clearButtonProps` to access other props of the clear button.
```jsx
import React, { useState } from 'react';
import {
SIZES,
COLORS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { Color, BorderRadius } from '../../../helpers/constants/design-system';
import { TextField } from '../../component-library';
@ -92,8 +88,8 @@ const handleOnClear = () => {
showClearButton
clearButtonOnClick={handleOnClear}
clearButtonProps={{
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
borderRadius: BORDER_RADIUS.XS,
backgroundColor: Color.backgroundAlternative,
borderRadius: BorderRadius.XS,
'data-testid': 'clear-button',
}}
/>;

118
ui/components/ui/box/README.mdx
View File

@ -14,43 +14,43 @@ Box is a utility component that can be used for layout or as a base for other UI
## Props
| Name | Description | Default |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
| className | Additional className of the Box component | - |
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineStart| 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| Name | Description | Default |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------- |
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
| className | Additional className of the Box component | - |
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW |
| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| alignItems | ALIGN_ITEMS values or array of ALIGN_ITEMS values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| justifyContent | JUSTIFY_CONTENT values or array of JUSTIFY_CONTENT values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| borderRadius | BORDER_RADIUS values or array of BORDER_RADIUS values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW |
| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
## Usage
@ -145,13 +145,13 @@ import Box from '../ui/box';
### Color
The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `COLORS.TEXT_DEFAULT`
The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `Color.textDefault`.
<Canvas>
<Story id="components-ui-box--color" />
<Story id="components-ui-box--color-story" />
</Canvas>
Example of importing `COLORS` object with `Box` component
Example of importing `TextColor` object with `Box` component
```jsx
import { TextColor } from '../../../helpers/constants/design-system';
@ -162,54 +162,65 @@ import Box from '../ui/box';
### Background Color
Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
Use the `backgroundColor` prop along with the `Color` or `BackgroundColor` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="components-ui-box--background-color" />
<Story id="components-ui-box--background-color-story" />
</Canvas>
Example of importing `COLORS` object with `Box` component
Example of importing `BackgroundColor` object with `Box` component
```jsx
import { BackgroundColor, TextColor } from '../../../helpers/constants/design-system';
import {
BackgroundColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box backgroundColor={BackgroundColor.backgroundDefault}>
<Typography color={TextColor.textDefault}>COLORS.BACKGROUND_DEFAULT</Typography>
<Typography color={TextColor.textDefault}>
BackgroundColor.backgroundDefault
</Typography>
</Box>;
```
### Border Color
Use the `borderColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props.
Use the `borderColor` prop along with the `Color` or `BorderColor` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="components-ui-box--border-color" />
<Story id="components-ui-box--border-color-story" />
</Canvas>
Example of importing `BorderColor` object with `Box` component
```jsx
import { BackgroundColor, BorderColor, TextColor } from '../../../helpers/constants/design-system';
import {
BackgroundColor,
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box
backgroundColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.borderDefault}
>
<Typography color={TextColor.textDefault}>COLORS.BORDER_DEFAULT</Typography>
<Typography color={TextColor.textDefault}>
BorderColor.borderDefault
</Typography>
</Box>;
```
### Border Radius
Use the `borderRadius` prop along with the `BORDER_RADIUS` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props.
Use the `borderRadius` prop along with the `BorderRadius` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas>
<Story id="components-ui-box--border-radius" />
<Story id="components-ui-box--border-radius-story" />
</Canvas>
Example of importing `BORDER_RADIUS` object with `Box` component
Example of importing `BorderRadius` object with `Box` component
```jsx
import { BorderRadius } from '../../../helpers/constants/design-system';
@ -251,7 +262,10 @@ The box component provides a responsive props api in the form of array props. Ar
</Canvas>
```jsx
import { BorderColor, BackgroundColor } from '../../../helpers/constants/design-system';
import {
BorderColor,
BackgroundColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box';
<Box

6
ui/components/ui/box/box.stories.js
View File

@ -522,7 +522,7 @@ export const BorderColorStory = () => {
</Box>
<Box
padding={3}
backgroundColor={BackgroundColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
borderColor={BorderColor.successDefault}
borderWidth={2}
marginBottom={1}
@ -546,7 +546,7 @@ export const BorderColorStory = () => {
};
BorderColorStory.storyName = 'BorderColor';
export const BorderRadiusStories = () => {
export const BorderRadiusStory = () => {
return (
<>
<Box
@ -634,7 +634,7 @@ export const BorderRadiusStories = () => {
</>
);
};
BorderRadiusStories.storyName = 'BorderRadius';
BorderRadiusStory.storyName = 'BorderRadius';
export const ResponsiveProps = () => {
return (

4
ui/components/ui/card/README.mdx
View File

@ -27,7 +27,7 @@ The Card component has a set of default props that should meet most card use cas
That being said all props can be overwritten if necessary.
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system';
// To remove the border
<Card border={false} />
@ -38,5 +38,5 @@ import { COLORS } from '../../../helpers/constants/design-system';
// All padding related props of the Box component will work
// To change the background color
<Card backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} />
<Card backgroundColor={Color.backgroundAlternative} />
```

2
ui/components/ui/card/card.js
View File

@ -49,7 +49,7 @@ Card.propTypes = {
padding: Box.propTypes.padding,
/**
* The background color of the card
* Defaults to COLORS.BACKGROUND_DEFAULT
* Defaults to Color.backgroundDefault
*/
backgroundColor: Box.propTypes.backgroundColor,
/**

2
ui/components/ui/icon/README.mdx
View File

@ -31,7 +31,7 @@ The following describes the props and example usage for this component.
Use the `size` prop to change the size of the icon it should adhere to an `8px` grid e.g. `16px`, `24px`, `32px`
<Canvas>
<Story id="components-ui-icon--size" />
<Story id="components-ui-icon--size-story" />
</Canvas>
### Color

12
ui/components/ui/typography/README.mdx
View File

@ -72,7 +72,7 @@ Use the `color` prop and the `COLOR` object from `./ui/helpers/constants/design-
```jsx
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
import Typography from '../../ui/typography';
import { TextColor, Colors, BackgroundColor } from '../../../helpers/constants/design-system';
import { TextColor, Color, BackgroundColor } from '../../../helpers/constants/design-system';
<Typography color={TextColor.textDefault}>
text-default
@ -83,7 +83,7 @@ import { TextColor, Colors, BackgroundColor } from '../../../helpers/constants/d
<Typography color={TextColor.textMuted}>
text-muted
</Typography>
<Typography color={Colors.overlayInverse} boxProps={{backgroundColor:{BackgroundColor.overlayDefault}}}>
<Typography color={Color.overlayInverse} boxProps={{backgroundColor:{BackgroundColor.overlayDefault}}}>
overlay-inverse
</Typography>
<Typography color={TextColor.primaryDefault}>
@ -308,16 +308,16 @@ Use the `boxProps` prop object to pass any valid [Box](/?path=/story/components-
```jsx
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
import Typography from '../../ui/typography';
import { COLORS } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system';
<Typography
boxProps={{
backgroundColor: COLORS.INFO_MUTED,
borderColor: COLORS.INFO_DEFAULT,
backgroundColor: Color.infoMuted,
borderColor: Color.infoDefault,
padding: 4,
borderRadius: 4,
}}
color={COLORS.TEXT_DEFAULT}
color={Color.textDefault}
>
This uses the boxProps prop
</Typography>;

3
ui/components/ui/typography/typography.js
View File

@ -23,6 +23,7 @@ export const ValidColors = [
Color.errorDefault,
Color.errorInverse,
Color.successDefault,
Color.successInverse,
Color.sepoliaInverse,
Color.warningDefault,
Color.warningInverse,
@ -30,7 +31,7 @@ export const ValidColors = [
Color.infoInverse,
Color.goerli,
Color.sepolia,
Color.goerli,
Color.goerliInverse,
Color.sepoliaInverse,
];