MetaMask / MetaMask/metamask-extension

Replace deprecated FormField component with FormTextField from the component-library

Open
#19,737 4 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### Description

Currently, the extension is using an outdated `FormField` component, which needs to be replaced with the new `FormTextField` 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 FormField component (`ui/components/ui/form-field/form-field.js`) with FormTextField component (`ui/components/component-library/form-text-field/form-text-field.js`)
- Component APIs are slightly different so ensure all props have been migrated appropriately

### Acceptance Criteria

- Instances of FormField component are completely replaced with the new FormTextField component
- The component APIs are updated to reflect the changes in the new FormField 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

Open the contributing guide

Research direction

Start by reviewing usages of ui/components/ui/form-field/form-field.js and the replacement at ui/components/component-library/form-text-field/form-text-field.js. For one small set of usages, compare the component APIs and update no more than 3 files. Verify Jest tests, linting, Storybook, and before-and-after screenshots with no functional or visual regression.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, storybook, typescript
Domain
frontend, testing
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.