MetaMask / MetaMask/metamask-mobile
Replace deprecated GenericButton component with Button from the component-library
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
### Description
Currently, mobile is using an outdated `GenericButton` component, which needs to be replaced with the `Button` component from `@metamask/design-system-react-native`.
This is a massive undertaking by itself and assigning to a single contributor and creating a single PR would be too large. Smaller PRs can be submitted against this issue from multiple contributors to ensure easier review and gradual improvements.
### Technical Details
- Replace instances of `GenericButton` component (`app/components/UI/GenericButton/`) with the `Button` component from `@metamask/design-system-react-native`
- Reference: https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react-native/src/components/Button
- Component APIs are slightly different so ensure all props have been migrated appropriately
### Acceptance Criteria
- Instances of `GenericButton` component are completely replaced with the new `Button` component from `@metamask/design-system-react-native`
- The component APIs are updated to reflect the changes in the new `Button` component and there is no functional changes or visual regression
- Each Pull Request (PR) should include **no more than 3 files**
- PR descriptions must adhere to the designated template, ensuring that all relevant sections are completed including before and after screenshots of UI.
- The code changes should pass Jest tests, e2e tests, linting, and Storybook without any errors.
If the acceptance criteria is not met, PRs may be closed.
### Difficulty: Intermediate
Good first issue for: External contributors who are familiar with running mobile locally, have knowledge of React Native, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in mobile
Contributor guide
Research direction
Start by reviewing instances under app/components/UI/GenericButton/ and the referenced Button component in the design-system-react-native package. Migrate one small set of instances, limited to no more than 3 files, while checking the differing component APIs. Done means the selected instances use Button without functional or visual regressions and pass the applicable Jest, e2e, linting, and Storybook checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100