Replace deprecated CheckBox component with Checkbox from the component-library

[georgewrmarshall]

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

[PrgrmrHarshShukla]

Hey @georgewrmarshall , There is an issue I am facing while replacing the CheckBox component with Checkbox from the component-library. There is no visual regression upfront, but the checkmark and background do not appear and disappear on clicking the checkbox.

Please help. To keep things separate I opened a PR #20335 on the issue.

[PRIZZA21]

hello I want to know if this issue is still open, can I work on it

[PrgrmrHarshShukla]

Yes, it is still open. Make sure to follow the rules while creating a PR for the same. 👍