MetaMask/metamask-extension

Replace deprecated mixins `@include H1` - `@include H9` in SCSS with Text component

Open

#20496 opened on Aug 17, 2023

View on GitHub
 (10 comments) (0 reactions) (0 assignees)JavaScript (11,014 stars) (4,848 forks)batch import
INVALID-ISSUE-TEMPLATEgood first issuerelease-12.2.0release-12.3.0team-design-system

Description

Description

Currently, the extension is using outdated mixins @include H1 - @include H9. This CSS should be removed and the JSX associated with these styles replaced with the Text component. This will reduce the amount of CSS in the extension and improve the cohesiveness of the UI.

This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements.

Technical Details

  • Remove instances of the deprecated mixins from the CSS and replace the JSX element with Text component (ui/components/component-library/text/text.tsx) or appropriate component from the component-library.
  • There will also be CSS that can be removed in favor of the style utility props that are available on the Text component. For example, display: flex can be replaced with display={Display.Flex} prop on the Text component. Check out all the available style utility props in the Text docs in storybook.
  • The Text component has a variant prop that can be used to set the font size and weight. Use the TextVariant enum (ui/helpers/constants/design-system.ts) to set the appropriate variant.
  • There are 9 deprecated mixins that need to be replaced. The following is a mapping of the mixin to the component that should be used to replace it:

@include H1 => <Text variant={TextVariant.displayMd}> @include H2 => <Text variant={TextVariant.displayLg}> @include H3 => <Text variant={TextVariant.headingMd}> @include H4 => <Text variant={TextVariant.headingSm}> @include H5 => <Text variant={TextVariant.bodyMd}> @include H6 => <Text variant={TextVariant.bodyMd}> @include H7 => <Text variant={TextVariant.bodySm}> @include H8 => <Text variant={TextVariant.bodyXs}> @include H9 => <Text variant={TextVariant.bodyXs}>

Acceptance Criteria

  • Instances of deprecated mixins @include H1 - @include H9 are completely replaced with the Text component or appropriate component from the component-library
  • Each Pull Request (PR) should include no more than 3 files
  • The code changes should pass Jest tests, e2e tests, linting, and Storybook without any errors.
  • The PR must include before and after screenshots of the UI to ensure there are no visual regressions.

If the acceptance criteria is not met, PRs may be closed.

Difficulty: Intermediate

Good first issue for: External contributors who are familiar with running the extension locally, have knowledge of React, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in the extension

Contributor guide

Tech stack
reacttypescriptcssstorybookjest
Domain
frontenddesigntesting
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJestStorybook
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Start by understanding the mapping of deprecated mixins H1 H9 to Text component variants provided in the issue. Scan the SCSS files for instances of @include H1 through @include H9 and trace the corresponding JSX elements. Replace each instance with the appropriate <Text> component and remove the associated CSS. Refer to the MetaMask Storybook documentation for Text component props and style utilities. Ensure each PR touches no more than 3 files, includes before/after screenshots, and passes tests, linting, and Storybook builds.