Replace deprecated Typography with Text component

[georgewrmarshall]

Description

In an effort to reduce duplication and replace our old design system components with new components it would be great to replace all <Typography /> with <Text /> components. This is a massive undertaking by itself and creating a single PR would be too large. Instead this issue could be broken up into multiple PRs.

Technical Details

• Swap all Typography components with Text equivalent(make sure to check the component apis as they are slightly different)
• boxProps should be migrated appropriately e.g. boxProps={{marginTop: 1}} => marginTop={1}
• Some TextVariant have bold font weight options which can be used instead of fontWeight={FONT_WEIGHT.BOLD} => variant={TextVariant.bodyMdBold}
• Check the Typography => Text component map below for the correct variant prop values

Typography => Text component map

<Typography variant={TypographyVariant.H1}> => <Text variant={TextVariant.displayMd}> <Typography variant={TypographyVariant.H2}> => <Text variant={TextVariant.headingLg}> <Typography variant={TypographyVariant.H3}> => <Text variant={TextVariant.headingMd}> <Typography variant={TypographyVariant.H4}> => <Text variant={TextVariant.headingSm}> <Typography variant={TypographyVariant.H5}> => <Text variant={TextVariant.bodyMd}> <Typography variant={TypographyVariant.H6}> => <Text variant={TextVariant.bodySm}> <Typography variant={TypographyVariant.Paragraph}> => <Text variant={TextVariant.bodyMd} <Typography variant={TypographyVariant.H7}> => <Text variant={TextVariant.bodySm}> <Typography variant={TypographyVariant.H8}> => <Text variant={TextVariant.bodyXs}> <Typography variant={TypographyVariant.H9}> => <Text variant={TextVariant.bodyXs}>

Acceptance Criteria

• All Typography components have been replaced with their Text equivalent
• PR contains a minimum of 1 file and a maximum of 3 files
• Add Before / After screenshots to your PR to ensure no visual regressions
• Reference this issue in the description of your PR
• All CI tests are passing jest, lint, e2e etc

PRs that don't meet the acceptance criteria may be closed.

References

Text component documentation

[georgewrmarshall]

Please take note that the current Text documentation will be out of date until https://github.com/MetaMask/metamask-extension/pull/17674 has been merged 🙏

[itsAfnanAlam]

Hi, can I work on this?

[georgewrmarshall]

Hi @itsAfnanAlam, you're welcome to submit a PR toward this issue please title it Part of #17670: Replace Typography with Text component

[itsAfnanAlam]

@georgewrmarshall, working on it. Thanks!

[Aathirajan]

hi @georgewrmarshall is it up for grabs? if yes can I?

[itsAfnanAlam]

@Aathirajan I am working on it.

[Aathirajan]

Great! Glad you mentioned it.

[georgewrmarshall]

Hey @itsAfnanAlam and @Aathirajan, this issue is intended to be broken up in to multiple PRs for easy review. I'm listing files engineers would like to, or are working on in the description under "Files being currently converted". You could both comment on the files you would like to convert and I'll add them to the list. See example PR here https://github.com/MetaMask/metamask-extension/pull/17753

[sammaji]

@georgewrmarshall can you point out some files that need change first and we'll look into them? Here's some that I found:

• \ui\components\app\add-network\add-network.js
• \ui\components\app\advanced-gas-fee-popover\advanced-gas-fee-defaults\advanced-gas-fee-defaults.js
• \ui\components\app\advanced-gas-fee-popover\advanced-gas-fee-gas-limit\advanced-gas-fee-gas-limit.js
• \ui\components\app\approve-content-card\approve-content-card.js

We could work on these first.

[georgewrmarshall]

Hey @samyabrata-maji, some of those are being worked on see "Files currently being converted" at the bottom section in this issue.

• \ui\components\app\add-network\add-network.js in-progress 🚫
• \ui\components\app\advanced-gas-fee-popover\advanced-gas-fee-defaults\advanced-gas-fee-defaults.js available to work on ✅
• \ui\components\app\advanced-gas-fee-popover\advanced-gas-fee-gas-limit\advanced-gas-fee-gas-limit.js available to work on ✅
• \ui\components\app\approve-content-card\approve-content-card.js in-progress 🚫

I'll add your name to the list for the available files in that list thanks!

[spiritanand]

Hey @georgewrmarshall are all the files being worked by other contributors? Could I contribute in any way?

[sammaji]

Hey @georgewrmarshall are all the files being worked by other contributors? Could I contribute in any way? There are other files that require changes. @spiritanand Just make sure to let us know which ones you would be working on 👍

[spiritanand]

@samyabrata-maji I did not understand. Are the ones in the ss available for me to work on?

[Yomna-J]

@georgewrmarshall A quick update: I've been working on the following and changes have been made. However, I'm unable to add screenshots as "This conversation has been locked and limited to collaborators."

• ui/components/app/add-network/add-network.js @Yomna-J Part of #17670: Replace Typography with Text component #17681
• ui/components/app/confirm-page-container/confirm-page-container.component.js @Yomna-J Part of #17670: Replace Typography with Text component #17681

[sammaji]

@samyabrata-maji I did not understand. Are the ones in the ss available for me to work on?

Some of them are available. There are other files too that are not in the ss.

[georgewrmarshall]

Hey @spiritanand, you can do a search for <Typography in your code editor. Excluding the Typography folder itself(ui/components/ui/typography) There are 119 files you can choose from that need to be converted. So far the bottom section "Files currently being converted" at the bottom of this issue description is what is being worked on. So you can comment here on what file you would like to work on and I will add it to the list under your name.

1. Search <Typography

2. Pick a file that has not been taken and IS NOT in this list

3. Comment on this issue the file that you'd like to convert and I will add it to the description under your name

[SawanKumarBhagat]

Hey! @georgewrmarshall I worked on these files and made a pr #17766 can you check them please? metamask-extension\ui\components\app\asset-list\asset-list.js metamask-extension\ui\components\app\beta-header\index.js metamask-extension\ui\components\app\cancel-speedup-popover\cancel-speedup-popover.js metamask-extension\ui\components\app\confirm-page-container\confirm-page-container.component.js metamask-extension\ui\components\app\confirm-page-container\confirm-page-container-content\confirm-page-container-content.component.js

[ayushj1910]

Hey @georgewrmarshall , I would like to work on this issue.

[georgewrmarshall]

Hey @ayushj1910, That's great! Please read the issue and comment thread for details 🙏

[moheet333]

Hey @georgewrmarshall , I am new to open source where do i start working on this issue?

[georgewrmarshall]

Hey @moheet333, a great start would be

• Get the extension running on your local machine by reading through the contributor docs
• Carefully read through this issue
• See example PR https://github.com/MetaMask/metamask-extension/pull/17753

[spiritanand]

Hey @georgewrmarshall, I will get started with the file /ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js and ui/pages/home/home.component.js. Please assign them to me.

[georgewrmarshall]

Hey @spiritanand, updated description and looking forward to your PRs. Thanks!

[spiritanand]

Happy Holi 🎉 @georgewrmarshall

I have created a PR for the two files confirm-approve-content.component.js and home.component.js. Please have a look 🤞

[spiritanand]

Hey @georgewrmarshall, Please add welcome.js and edit-gas-display.component.js under my tab. I will be working on them this weekend.

Also, should I create a new PR for them or add them in the same PR I created?

[georgewrmarshall]

Hey @spiritanand, please create a new PR it helps get approved updates in faster as well as prevent stale PRs which could be in danger of having merge conflicts if those files are update during the time the PR is open. Smaller PRs are almost always best! Will add those file next to your name. Cheers! One suggestion is to tackle components with .stories.js files so we can easily review your changes in isolation. Oh both have storybook files so that's great 💯

[sambhavgupta0705]

Hey @georgewrmarshall is there any file through which I can contribute?

[spiritanand]

Hey @georgewrmarshall is there any file through which I can contribute?

@sambhavgupta0705 please read the above thread, there are many files you can contribute to by searching for <Typography> component in your fork.

For reference, see the already merged PR ⇒ #17753

All the best.

[sambhavgupta0705]

Hey @georgewrmarshall is there any file through which I can contribute?

@sambhavgupta0705 please read the above thread, there are many files you can contribute to by searching for <Typography> component in your fork.

For reference, see the already merged PR ⇒ #17753

All the best.

Thanks @spiritanand

[sscode]

Just submitted my first PR for file - ui/components/app/create-new-vault/create-new-vault.js