Component library adding global index and other housekeeping #16441

georgewrmarshall · 2022-11-09T23:46:42Z

Explanation

What is the current state of things and why does it need to change?
Currently to import a component from the component-library/ you have to import it from it's folder. This means for every component there is a new line of code.

What is the solution your changes offer and how does it work?

To allow the ability to import multiple components in one import this PR creates a global index.js file and exports all of the components that currently exists from it.
Updates all import documentation to use paths based on import from the ui/pages/ directory e.g ui/pages/page-name/page-name.js folder
Re-orders styling imports atomically. Molecule components should be able to overwrite atomic component level css
Removes an unused proptype from button-base.js

Fixes 🧹 [UI House Keeping] General #16440

Screenshots/Screencaps

Before

import { AvatarAccount } from '../../ui/components/component-library/avatar-account';
import { ButtonLink } from '../../ui/components/component-library/button-secondary';
import { ButtonPrimary } from '../../ui/components/component-library/button-primary';
import { ButtonSecondary } from '../../ui/components/component-library/button-secondary';
import { Icon, ICON_NAMES } from '../../ui/components/component-library/icon';
import { TextField } from '../../ui/components/component-library/text-field';

After

import {
  AvatarAccount,
  ButtonLink,
  ButtonPrimary,
  ButtonSecondary,
  Icon,
  ICON_NAMES,
  TextField,
} from '../../ui/components/component-library';

Manual Testing Steps

Pull this branch
in an app component e.g. ui/components/app/account-list-item/account-list-item.js
import a component import { AvatarAccount } from '../../component-library'
Run storybook yarn storybook
See if the component renders by searching AccountListItem in the search bar

Pre-merge author checklist

I've clearly explained:
- What problem this PR is solving
- How this problem was solved
- How reviewers can test my changes
Sufficient automated test coverage has been added

Pre-merge reviewer checklist

Manual testing (e.g. pull and build branch, run in browser, test code being changed)
PR is linked to the appropriate GitHub issue
IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

github-actions · 2022-11-09T23:46:53Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

georgewrmarshall · 2022-11-10T00:18:24Z

development/generate-icon-names.js

@@ -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


Corrects path

georgewrmarshall · 2022-11-10T00:18:51Z

ui/components/component-library/button-base/button-base.js

-  /**
-   * Addition style properties to apply to the button.
-   */
-  style: PropTypes.object,


Missed from ButtonBase housekeeping

metamaskbot · 2022-11-10T00:44:10Z

Builds ready [f4c9c20]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2639 ± 236 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	95	3577	339	769	369
		domContentLoaded	1827	3646	2619	486	234
		load	1827	3646	2639	492	236
		domInteractive	1827	3646	2619	486	234

highlights:

storybook

metamaskbot · 2022-11-15T16:28:21Z

Builds ready [1f4c26b]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2378 ± 161 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	98	881	162	166	79
		domContentLoaded	1749	3228	2362	336	161
		load	1749	3228	2378	335	161
		domInteractive	1749	3228	2362	336	161

Bundle size diffs

background: 0 bytes
ui: 0 bytes
common: 0 bytes

highlights:

storybook

garrettbear · 2022-11-15T17:29:55Z

ui/components/component-library/index.js

+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';


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.

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?

georgewrmarshall self-assigned this Nov 9, 2022

georgewrmarshall added area-UI Relating to the user interface. team-design-system All issues relating to design system in Extension IA/NAV labels Nov 9, 2022

georgewrmarshall requested review from garrettbear and NidhiKJha November 10, 2022 00:18

georgewrmarshall commented Nov 10, 2022

View reviewed changes

georgewrmarshall marked this pull request as ready for review November 10, 2022 00:28

georgewrmarshall requested review from a team and kumavis as code owners November 10, 2022 00:28

georgewrmarshall force-pushed the fix/16440/house-keeping-general branch from f4c9c20 to 9c6daaf Compare November 15, 2022 01:16

georgewrmarshall added 5 commits November 14, 2022 19:26

Adding global index.js file

bcb1b0e

Removing style prop from button base

ebd2636

Fixing comment on generate-icon-names.js file

8dab133

Re-ordering sass imports to atomic structure

971cb5c

Updating component paths code examples of MDX docs

1f4c26b

georgewrmarshall force-pushed the fix/16440/house-keeping-general branch from 9c6daaf to 1f4c26b Compare November 15, 2022 01:29

garrettbear reviewed Nov 15, 2022

View reviewed changes

georgewrmarshall requested a review from garrettbear November 16, 2022 18:56

garrettbear approved these changes Nov 16, 2022

View reviewed changes

darkwing approved these changes Nov 16, 2022

View reviewed changes

georgewrmarshall merged commit 23b412c into develop Nov 16, 2022

georgewrmarshall deleted the fix/16440/house-keeping-general branch November 16, 2022 22:15

github-actions bot locked and limited conversation to collaborators Nov 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Component library adding global index and other housekeeping #16441

Component library adding global index and other housekeeping #16441

georgewrmarshall commented Nov 9, 2022 •

edited

Loading

github-actions bot commented Nov 9, 2022

georgewrmarshall Nov 10, 2022

georgewrmarshall Nov 10, 2022

metamaskbot commented Nov 10, 2022

metamaskbot commented Nov 15, 2022

garrettbear Nov 15, 2022

georgewrmarshall Nov 15, 2022 •

edited

Loading

Component library adding global index and other housekeeping #16441

Component library adding global index and other housekeeping #16441

Conversation

georgewrmarshall commented Nov 9, 2022 • edited Loading

Explanation

Screenshots/Screencaps

Before

After

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Nov 9, 2022

georgewrmarshall Nov 10, 2022

Choose a reason for hiding this comment

georgewrmarshall Nov 10, 2022

Choose a reason for hiding this comment

metamaskbot commented Nov 10, 2022

highlights:

metamaskbot commented Nov 15, 2022

highlights:

garrettbear Nov 15, 2022

Choose a reason for hiding this comment

georgewrmarshall Nov 15, 2022 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall commented Nov 9, 2022 •

edited

Loading

georgewrmarshall Nov 15, 2022 •

edited

Loading