Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component library adding global index and other housekeeping #16441

Merged
merged 5 commits into from
Nov 16, 2022
Merged

Component library adding global index and other housekeeping #16441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bcb1b0e
Adding global index.js file
georgewrmarshall Nov 15, 2022
ebd2636
Removing style prop from button base
georgewrmarshall Nov 15, 2022
8dab133
Fixing comment on generate-icon-names.js file
georgewrmarshall Nov 15, 2022
971cb5c
Re-ordering sass imports to atomic structure
georgewrmarshall Nov 15, 2022
1f4c26b
Updating component paths code examples of MDX docs
georgewrmarshall Nov 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion development/generate-icon-names.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Corrects path

*/
const fs = require('fs');
const path = require('path');
Expand Down
16 changes: 8 additions & 8 deletions ui/components/component-library/button-base/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>;
```
Expand All @@ -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>;
```
Expand All @@ -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>;
Expand Down
4 changes: 0 additions & 4 deletions ui/components/component-library/button-base/button-base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed from ButtonBase housekeeping

/**
* ButtonBase accepts all the props from Box
*/
Expand Down
6 changes: 3 additions & 3 deletions ui/components/component-library/button-link/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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>
Expand All @@ -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 changes: 2 additions & 2 deletions ui/components/component-library/button-primary/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/component-library/button-secondary/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` 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>
Expand Down
19 changes: 13 additions & 6 deletions ui/components/component-library/component-library-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
/** 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';
8 changes: 4 additions & 4 deletions ui/components/component-library/help-text/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>;
```
Expand All @@ -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}>
Expand Down
6 changes: 3 additions & 3 deletions ui/components/component-library/icon/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down Expand Up @@ -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} />
Expand All @@ -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} />
Expand Down
25 changes: 25 additions & 0 deletions ui/components/component-library/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Comment on lines +7 to +12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to what you did with TextFieldBase, it would be nice to export the constants as well.

Suggested change
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 { Button, BUTTON_TYPES } from './button';
export { ButtonBase, BUTTON_BASE_SIZES } from './button-base';
export { ButtonIcon, BUTTON_ICON_SIZES } from './button-icon';
export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
export { ButtonPrimary, BUTTON_PRIMARY_SIZES } from './button-primary';
export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';

Looks like will need to actually add export of BUTTON_LINK_SIZES, BUTTON_PRIMARY_SIZES, and BUTTON_SECONDARY_SIZES to the index file of their folder.

Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Nov 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I can add any that are already exported from the index. Then we could add all the missing consts as apart of another housekeeping round? Otherwise this PR will just need to be constantly updated and waiting on others?

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 changes: 7 additions & 7 deletions ui/components/component-library/label/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -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" />
Expand All @@ -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>;
```
Expand All @@ -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>;
```
Loading