MetaMask/metamask-extension

Replace deprecated Box component with new Box component

Open

#19526 opened on Jun 8, 2023

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (11,014 stars) (4,848 forks)batch import
INVALID-ISSUE-TEMPLATEgood first issueteam-design-system

Description

Description

Currently, the extension is using an outdated Box component, which needs to be replaced with the new Box component from @metamask/design-system-react.

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. PRs should contain no more than 3 files

Technical Details

  • The old Box component (ui/components/ui/box/box.js)
  • The new Box component from @metamask/design-system-react (documentation)
  • Component APIs should be the same so minimal changes should be needed in the code that uses the Box component.

Acceptance Criteria

  • The old Box component (ui/components/ui/box/box.js) is completely replaced with the new Box component from @metamask/design-system-react throughout all files included in the PR.
  • The component APIs are updated to reflect the changes in the new Box component.
  • Each Pull Request (PR) should include no more than 3 files with Box replacements.
  • The code changes should pass Jest tests, linting, and all CI checks 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 are 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
javascriptreact
Domain
frontend
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.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Knowledge of ReactFamiliarity with Jest testingUnderstand component propsRun extension locally
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Start by understanding the old Box component at `ui/components/ui/box/box.js` and compare its API with the new Box component from `@metamask/design system react` (documentation provided in issue). Replace the old component usage in files, ensuring no more than 3 files per PR. Run Jest tests and linting locally to verify changes. Include screenshots of before and after UI changes as per acceptance criteria. Review existing comments in the issue for any clarifications.