m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Component library adding global index and other housekeeping (#16441)

Browse Source 
* Adding global index.js file

* Removing style prop from button base

* Fixing comment on generate-icon-names.js file

* Re-ordering sass imports to atomic structure

* Updating component paths code examples of MDX docs
This commit is contained in:
George Marshall 2022-11-16 14:15:08 -08:00 committed by GitHub
parent a5b70c363d
commit 23b412c13f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 93 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
development/generate-icon-names.js
View File

@ -4,7 +4,7 @@
* Reads all the icon svg files in app/images/icons
* and returns an object of icon name key value pairs
* stored in the environment variable ICON_NAMES
* Used with the Icon component in ./ui/component-library/icon
* Used with the Icon component in ./ui/components/component-library/icon/icon.js
*/
const fs = require('fs');
const path = require('path');

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

@ -37,7 +37,7 @@ Possible sizes include:
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
<ButtonBase size={SIZES.AUTO} />
<ButtonBase size={SIZES.SM} />
@ -55,7 +55,7 @@ Use boolean `block` prop to quickly enable a full width block button
```jsx
import { DISPLAY } from '../../../helpers/constants/design-system';
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
<ButtonBase>Default Button</ButtonBase>
<ButtonBase block>Block Button</ButtonBase>
@ -77,7 +77,7 @@ Button `as` options:
</Canvas>
```jsx
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
<ButtonBase as="button">Button Element</ButtonBase>
@ -95,7 +95,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas>
```jsx
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
<ButtonBase href="/metamask">Anchor Element</ButtonBase>;
```
@ -109,7 +109,7 @@ Use the boolean `disabled` prop to disable button
</Canvas>
```jsx
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
<ButtonBase disabled>Disabled Button</ButtonBase>;
```
@ -123,21 +123,21 @@ Use the boolean `loading` prop to set loading spinner
</Canvas>
```jsx
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
<ButtonBase loading>Loading Button</ButtonBase>;
```
### Icon
Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
<Canvas>
<Story id="ui-components-component-library-button-base-button-base-stories-js--icon" />
</Canvas>
```jsx
import { ButtonBase } from '../ui/component-library';
import { ButtonBase } from '../../ui/components/component-library';
import { ICON_NAMES } from '../icon';
<ButtonBase icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</ButtonBase>;

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

@ -133,10 +133,6 @@ ButtonBase.propTypes = {
* Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
*/
size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
/**
* Addition style properties to apply to the button.
*/
style: PropTypes.object,
/**
* ButtonBase accepts all the props from Box
*/

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

@ -35,7 +35,7 @@ Possible sizes include:
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
import { ButtonLink } from '../../ui/components/component-library';
<ButtonLink size={SIZES.AUTO} />
<ButtonLink size={SIZES.SM} />
@ -52,7 +52,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
</Canvas>
```jsx
import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
import { ButtonLink } from '../../ui/components/component-library';
<ButtonLink>Normal</ButtonLink>
<ButtonLink danger>Danger</ButtonLink>
@ -67,7 +67,7 @@ When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
</Canvas>
```jsx
import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
import { ButtonLink } from '../../ui/components/component-library';
<ButtonLink href="/">Href Example</ButtonLink>;
```

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

@ -34,7 +34,7 @@ Possible sizes include:
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
import { ButtonPrimary } from '../../ui/components/component-library';
<ButtonPrimary size={SIZES.SM} />
<ButtonPrimary size={SIZES.MD} />
@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
</Canvas>
```jsx
import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
import { ButtonPrimary } from '../../ui/components/component-library';
<ButtonPrimary>Normal</ButtonPrimary>
<ButtonPrimary danger>Danger</ButtonPrimary>

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

@ -34,7 +34,7 @@ Possible sizes include:
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
import { ButtonSecondary } from '../../ui/components/component-library';
<ButtonSecondary size={SIZES.SM} />
<ButtonSecondary size={SIZES.MD} />
@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
</Canvas>
```jsx
import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
import { ButtonSecondary } from '../../ui/components/component-library';
<ButtonSecondary>Normal</ButtonSecondary>
<ButtonSecondary danger>Danger</ButtonSecondary>

19
ui/components/component-library/component-library-components.scss
View File

@ -1,21 +1,28 @@
/** Please import your files in alphabetical order **/
/**
* Please import your styles in order of atomicity.
* The most atomic styles should be imported first.
* This will help improve specificity and reduce the chance of
* unintended overrides.
**/
// Atoms
@import 'text/text';
@import 'icon/icon';
@import 'label/label';
@import 'tag/tag';
@import 'base-avatar/base-avatar';
@import 'avatar-account/avatar-account';
@import 'avatar-favicon/avatar-favicon';
@import 'avatar-network/avatar-network';
@import 'avatar-token/avatar-token';
@import 'avatar-with-badge/avatar-with-badge';
@import 'base-avatar/base-avatar';
@import 'button-base/button-base';
@import 'button-icon/button-icon';
@import 'button-link/button-link';
@import 'button-primary/button-primary';
@import 'button-secondary/button-secondary';
@import 'icon/icon';
@import 'label/label';
// Molecules
@import 'picker-network/picker-network';
@import 'tag/tag';
@import 'tag-url/tag-url';
@import 'text/text';
@import 'text-field/text-field';
@import 'text-field-base/text-field-base';
@import 'text-field-search/text-field-search';

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

@ -26,8 +26,8 @@ The `children` of the `HelpText` can be plain text or react nodes.
```jsx
import { SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
import { HelpText } from '../../ui/component-library/help-text';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { HelpText } from '../../ui/components/component-library';
<HelpText>Plain text</HelpText>
<HelpText>
@ -50,7 +50,7 @@ Use the `error` prop to show the `HelpText` in error state.
</Canvas>
```jsx
import { HelpText } from '../../ui/component-library/help-text';
import { HelpText } from '../../ui/components/component-library';
<HelpText error>This HelpText in error state</HelpText>;
```
@ -65,7 +65,7 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { HelpText } from '../../ui/component-library/help-text';
import { HelpText } from '../../ui/components/component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={COLORS.TEXT_DEFAULT}>

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

@ -23,7 +23,7 @@ Use the `name` prop and the `ICON_NAMES` object to change the icon.
Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
```jsx
import { Icon, ICON_NAMES } from '../ui/component-library';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
<Icon name={ICON_NAMES.BANK_FILLED} />
@ -55,7 +55,7 @@ Possible sizes include:
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../ui/component-library';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
@ -79,7 +79,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../ui/component-library';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />

25
ui/components/component-library/index.js Normal file
View File

@ -0,0 +1,25 @@
export { AvatarAccount } from './avatar-account';
export { AvatarFavicon } from './avatar-favicon';
export { AvatarNetwork } from './avatar-network';
export { AvatarToken } from './avatar-token';
export { AvatarWithBadge } from './avatar-with-badge';
export { BaseAvatar } from './base-avatar';
export { Button } from './button';
export { ButtonBase } from './button-base';
export { ButtonIcon } from './button-icon';
export { ButtonLink } from './button-link';
export { ButtonPrimary } from './button-primary';
export { ButtonSecondary } from './button-secondary';
export { HelpText } from './help-text';
export { Icon, ICON_NAMES } from './icon';
export { Label } from './label';
export { PickerNetwork } from './picker-network';
export { Tag } from './tag';
export { TagUrl } from './tag-url';
export { Text } from './text';
export { TextField } from './text-field';
export {
TextFieldBase,
TEXT_FIELD_BASE_SIZES,
TEXT_FIELD_BASE_TYPES,
} from './text-field-base';

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

@ -26,9 +26,9 @@ The `children` of the label can be text or a react node.
```jsx
import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
import { Label } from '../../ui/component-library/label';
import { TextFieldBase } from '../../ui/component-library/text-field-base'
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { Label } from '../../ui/components/component-library';
import { TextFieldBase } from '../../ui/components/component-library';
<Label>Plain text</Label>
<Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
@ -59,8 +59,8 @@ Use the `htmlFor` prop to allow the `Label` to focus on an input with the same i
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { Label } from '../../ui/component-library/label';
import { TextFieldBase } from '../../ui/components/component-library';
import { Label } from '../../ui/components/component-library';
<Label htmlFor="add-network">Add network</Label>
<TextFieldBase id="add-network" placeholder="Enter network name" />
@ -75,7 +75,7 @@ Use the `required` prop to add a required red asterisk next to the `children` of
</Canvas>
```jsx
import { Label } from '../../ui/component-library/label';
import { Label } from '../../ui/components/component-library';
<Label required>Label</Label>;
```
@ -89,7 +89,7 @@ Use the `disabled` prop to set the `Label` in disabled state
</Canvas>
```jsx
import { Label } from '../../ui/component-library/label';
import { Label } from '../../ui/components/component-library';
<Label disabled>Label</Label>;
```

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

@ -35,7 +35,7 @@ Defaults to `md`
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
import { SIZES } from '../../../helpers/constants/design-system';
<TextFieldBase size={SIZES.SM} />
@ -60,7 +60,7 @@ Defaults to `text`.
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase type="text" /> // (Default)
<TextFieldBase type="number" />
@ -76,7 +76,7 @@ Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Default
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase truncate />; // truncate is set to `true` by default
<TextFieldBase truncate={false} />;
@ -92,9 +92,9 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
```jsx
import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/component-library/icons';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { TextFieldBase } from '../../ui/component-library/text-field';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase
placeholder="Search"
@ -156,7 +156,7 @@ Use the `inputRef` prop to access the ref of the `<input />` html element of `Te
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
const inputRef = useRef(null);
const [value, setValue] = useState('');
@ -252,7 +252,7 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase type="password" autoComplete />;
```
@ -266,7 +266,7 @@ Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase autoFocus />;
```
@ -280,7 +280,7 @@ Use the `defaultValue` prop to set the default value of the `TextFieldBase`
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase defaultValue="default value" />;
```
@ -294,7 +294,7 @@ Use the `disabled` prop to set the disabled state of the `TextFieldBase`
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase disabled />;
```
@ -308,7 +308,7 @@ Use the `error` prop to set the error state of the `TextFieldBase`
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase error />;
```
@ -322,7 +322,7 @@ Use the `maxLength` prop to set the maximum allowed input characters for the `Te
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase maxLength={10} />;
```
@ -336,7 +336,7 @@ Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly`
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
<TextFieldBase readOnly />;
```
@ -350,7 +350,7 @@ Use the `required` prop to set the `TextFieldBase` to required. Currently there
</Canvas>
```jsx
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/components/component-library';
// Currently no visual difference
<TextFieldBase required />;

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

@ -29,7 +29,7 @@ The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-
</Canvas>
```jsx
import { TextField } from '../../ui/component-library/text-field';
import { TextField } from '../../ui/components/component-library';
const [value, setValue] = useState('show clear');
@ -66,7 +66,7 @@ import {
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { TextField } from '../../ui/component-library/text-field';
import { TextField } from '../../ui/components/component-library';
const [value, setValue] = useState('show clear');

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

@ -25,7 +25,7 @@ Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { TEXT } from '../../../helpers/constants/design-system';
<Text variant={TEXT.DISPLAY_MD}>display-md</Text>
@ -47,7 +47,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { COLORS } from '../../../helpers/constants/design-system';
<Text color={COLORS.TEXT_DEFAULT}>
@ -104,7 +104,7 @@ Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/consta
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
<Text fontWeight={FONT_WEIGHT.NORMAL}>
@ -130,7 +130,7 @@ Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constant
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { FONT_STYLE } from '../../../helpers/constants/design-system';
<Text fontStyle={FONT_STYLE.NORMAL}>
@ -150,7 +150,7 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
<Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
@ -173,7 +173,7 @@ Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constant
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
<Text textAlign={TEXT_ALIGN.LEFT}>
@ -202,7 +202,7 @@ Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/co
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
<div
@ -230,7 +230,7 @@ Use the boolean `ellipsis` prop to change the if the `Text` component to have an
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
<div
style={{
@ -253,7 +253,7 @@ Use the `as` prop to change the root html element of the `Text` component
</Canvas>
```jsx
import { Text } from '../../ui/component-library/text';
import { Text } from '../../ui/components/component-library';
<Text as="dd">dd</Text>
<Text as="div">div</Text>