MetaMask/metamask-extension

Replace deprecated CheckBox component with Checkbox from the component-library

Open

#20163 opened on Jul 24, 2023

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

Description

Description

Currently, the extension is using an outdated CheckBox component, which needs to be replaced with the new Checkbox component.

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

  • Replace instances of CheckBox component (ui/components/ui/check-box/check-box.component.js) with Checkbox component (ui/components/component-library/checkbox/checkbox.tsx)
  • Component APIs are slightly different so ensure all props have been migrated appropriately

Acceptance Criteria

  • Instances of Checkbox component are completely replaced with the new Checkbox component
  • The component APIs are updated to reflect the changes in the new Checkbox component and there is no functional changes or visual regression
  • Each Pull Request (PR) should include no more than 3 files
  • The code changes should pass Jest 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
javascripttypescriptreactstorybookjest
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.
half day
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
React basicsComponent propsRunning MetaMask extension locallyJest and Storybook familiarity
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Start by examining the deprecated CheckBox component at `ui/components/ui/check box/check box.component.js` and the new Checkbox component at `ui/components/component library/checkbox/checkbox.tsx`. Identify the differences in their APIs (props). Plan small pull requests that replace up to 3 files each, ensuring no functional or visual regression. For each PR, update imports, component usage, and props according to the new Checkbox API. Run Jest tests, linting, and Storybook to verify. Include before and after screenshots in the PR description. Look at existing PRs or comments on this issue for guidance.