Replace deprecated FormField component with FormTextField from the component-library

[georgewrmarshall]

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

[dhruvv173]

hey @georgewrmarshall, just had one question about this, how do we plan on handling the tooltips?

[georgewrmarshall]

Hey @dhruvv173, great question if it has tooltips then we could use the atomic component TextField, Label and HelpText to reconstruct it?

[dhruvv173]

Hey @dhruvv173, great question if it has tooltips then we could use the atomic component TextField, Label and HelpText to reconstruct it?

Something like combining example 2 and 3 from the image below(using Tooltip component instead of Icon) if im not wrong?

[georgewrmarshall]

Something like combining example 2 and 3 from the image below(using Tooltip component instead of Icon) if im not wrong?

Yes, that would work!