tag component housekeeping

[NidhiKJha]

Explanation

Housekeeping Checklist

• Has a className prop and the PropType descriptions are all the same
• Prop table in MDX docs have the "Accepts all Box component props" description and link
• We are consistent when using the same prop names like size and are suggesting the use of the generalized design-system.js constants e.g. SIZES as the primary option but noting the component consts in the documentation and using them for propType validation and storybook controls only
• Standardize all similar prop names for images imgSrc, imgAlt(html element + attribute) (needs audit)
• We have a story for each component prop and we use the prop name verbatim e.g. size prop would be export const Size = (args) => (
• Are multiple props stories allowed? e.g. Color, Background Color And Border Color story in base-avatar - [ ] yes when it makes sense to
• We have the accompanying documentation for each component prop and we use the prop name verbatim e.g. size prop would be ### Size
• All Base components follow the suffix convention e.g. ButtonBase
• All Base component MDX documentation have the base component notification at the top
• Add mm- prefix to all classNames
• className is kebab case version of the component name
• Spread base components props and reduce duplication of props when props aren't being changed and remain the same for both variant and base components
• Remove Component.displayName not needed
• Add component to root index.js file in component-library
• Add locals for any default text I18nContext as default context
• Add any "to dos" with a // TODO: comment so we can search for them at a later date e.g. blocking components etc
• Add snapshot testing
• Add pixel values to propType descriptions if we use abstracted prop types that relate to pixel values e.g. SIZE.MD (32px)

More Information

Fixes: #16180

Manual Testing Steps

yarn test:unit:jest .ui/components/component-library/tag/tag.test.js

Pre-Merge Checklist

• PR template is filled out
• IF this PR fixes a bug, a test that would have caught the bug has been added
• PR is linked to the appropriate GitHub issue
• PR has been added to the appropriate release Milestone

+ If there are functional changes:

• Manual testing complete & passed
• "Extension QA Board" label has been applied

[metamaskbot]

Builds ready [44d83a5]

• 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 (2407 ± 144 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	96	2224	226	459	220
		domContentLoaded	1719	2770	2372	286	137
		load	1782	2906	2407	300	144
		domInteractive	1719	2770	2372	286	137

highlights:

storybook

• ui/components/component-library/tag/tag.stories.js
• ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
• ui/pages/confirm-approve/confirm-approve.stories.js
• ui/pages/confirm-import-token/confirm-import-token.stories.js
• ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js

[georgewrmarshall]

Nice one! 🔥