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 #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 #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.

[metamaskbot]

Missing release label release-12.2.0 on issue. Adding release label release-12.2.0 on issue, as issue is linked to PR #25176 which has this release label.

[metamaskbot]

Missing release label release-12.2.0 on issue. Adding release label release-12.2.0 on issue, as issue is linked to PR #25050 which has this release label.

[metamaskbot]

Missing release label release-12.2.0 on issue. Adding release label release-12.2.0 on issue, as issue is linked to PR #25019 which has this release label.

[metamaskbot]

Missing release label release-12.2.0 on issue. Adding release label release-12.2.0 on issue, as issue is linked to PR #25017 which has this release label.

[metamaskbot]

Missing release label release-12.2.0 on issue. Adding release label release-12.2.0 on issue, as issue is linked to PR #25149 which has this release label.