Replace deprecated Box component with new Box component

[georgewrmarshall]

Description

Currently, the extension is using an outdated Box component, which needs to be replaced with the new Box component. The new Box component is available from ui/components/component-library.

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. PRs should contain no more than 3 files

Technical Details

• The old Box component (ui/components/ui/box/box.js)
• The new Box component (ui/components/component-library/box/box.tsx) storybook documentation
• Component APIs should be the same so no changes should be needed in the code that uses the Box component.

Acceptance Criteria

• The old Box component (ui/components/ui/box/box.component.js) is completely replaced with the new Box component (ui/components/component-library/box/box.tsx) throughout all files included in the PR.
• The component APIs are updated to reflect the changes in the new Box component.
• Each Pull Request (PR) should include no more than 3 files with Box replacements.
• The code changes should pass Jest tests, linting, and all CI checks 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 are 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

[SamantaTarun]

I'd like to work on this issue. Please assign it to me

[georgewrmarshall]

Hey @tarunsamanta2k20, thanks for your interest! Feel free to create a PR that meets all of the acceptance criteria against this issue and tag me as a reviewer. This issue encompasses a task that is quite large and I think would be best if we left it unassigned to encourage others to contribute. It would be great to start on the ui/components/component-library folder first

[dhruvv173]

hey @georgewrmarshall, just had a question related to this issue while adding props, is this correct?

[Jah2233]

І ти теж вибач але я нічого не маю)) я на війні і щей ви типу зробили мене відомим) добре!! Але я не знав що так !! Лише казали можна!! А як виводити я читав питав но толком ніхто не міг пояснити!! Бувай друже!! З Богом

сб, 10 черв. 2023 р., 19:04 користувач Dhruv @.***> пише:

hey @georgewrmarshall https://github.com/georgewrmarshall, just had a question related to this issue while adding props, is this correct? [image: image] https://user-images.githubusercontent.com/79097544/244880608-18e2ebb9-c2a6-4da8-9ed9-b5cf7196c47c.png

— Reply to this email directly, view it on GitHub https://github.com/MetaMask/metamask-extension/issues/19526#issuecomment-1585715340, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5VAND7NN3L44NOMX5BY7TDXKSLHLANCNFSM6AAAAAAY7WKH3A . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[georgewrmarshall]

Hey @dhruvv173, not quite there is some rearchitecting needed for all of our TS components for the polymorphic as type to work properly. I have a PR open for the Text component you can use https://github.com/MetaMask/metamask-extension/pull/19572

[legobeat]

If anyone is picking components from the bucket, ui/components/component-library/badge-wrapper/badge-wrapper.tsx seems to exhibit type errors when upgrading TypeScript so it might warrant some looking at.