Skip to content

Commit 13baa70

Browse files
georgewrmarshallcursoragent
georgewrmarshall
and
cursoragent
authored
refactor(card): migrate deprecated Text to design system (#27395)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Migrates deprecated `Text` components to `@metamask/design-system-react-native` in the @MetaMask/card code owner paths. Part of the ongoing #6887 migration. Files migrated: - `app/components/UI/Card/components/CardMessageBox/CardMessageBox.tsx` - `app/components/UI/Card/components/ManageCardListItem/ManageCardListItem.tsx` - `app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx` - `app/components/UI/Card/components/SpendingLimitWarning/SpendingLimitWarning.tsx` **What:** Replace `app/component-library/components/Texts/Text` imports with `Text` from `@metamask/design-system-react-native`. Updates `TextVariant` casing (e.g. `HeadingMD` → `HeadingMd`), adds explicit `FontWeight` props for combined variants (e.g. `BodyMDMedium`), and maps `TextColor` values to their new semantic names (e.g. `TextColor.Alternative` → `TextColor.TextAlternative`). Snapshots updated to reflect new rendered style shape. **Why:** Part of #6887 — eliminating deprecated internal Text wrappers in favour of the shared design system component. > [!NOTE] > This PR was produced by the [`migrate-text-component`](.cursor/automations/migrate-text-component.md) automation. Cursor lacks permission to open PRs directly, so it was opened manually. ## **Changelog** CHANGELOG entry: null (internal refactor, no user-visible change) ## **Related issues** Part of: #6887 ## **Manual testing steps** \`\`\`gherkin Feature: Card UI text rendering Scenario: user views Card screens Given the app is open When the user navigates to any Card screen (CardMessageBox, ManageCardListItem, SpendingLimitProgressBar, SpendingLimitWarning) Then all text renders correctly with the same visual appearance as before the migration \`\`\` ## **Screenshots/Recordings** N/A — styling parity migration, no visual change intended. *(If a visual difference is noticed during review, add before/after screenshots.)* ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk refactor of Card UI presentation components; primary risk is minor visual/regression differences from variant/color/weight mapping and updated button implementation. > > **Overview** > Migrates Card UI components off the deprecated internal `Text` wrapper to `@metamask/design-system-react-native`, updating `TextVariant` casing and replacing combined variants (e.g., medium/bold) with explicit `fontWeight` and new `TextColor` semantics. > > Refactors `SpendingLimitWarning` to use design-system `Button`s (removing custom touchable/button styles) and adds a new English i18n string for the warning’s dismiss CTA; Jest snapshots are updated to match the new rendered style arrays/weights. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit bef36a5. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
1 parent eccdfba commit 13baa70

8 files changed

Lines changed: 291 additions & 213 deletions

File tree

‎app/components/UI/Card/Views/CardHome/__snapshots__/CardHome.test.tsx.snap‎

Lines changed: 132 additions & 84 deletions
Large diffs are not rendered by default.

‎app/components/UI/Card/components/CardMessageBox/CardMessageBox.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { View } from 'react-native';
33
import Button, {
44
ButtonVariants,
55
} from '../../../../../component-library/components/Buttons/Button';
6-
import Text, {
6+
import {
7+
FontWeight,
8+
Text,
79
TextVariant,
8-
} from '../../../../../component-library/components/Texts/Text';
10+
} from '@metamask/design-system-react-native';
911
import Icon, {
1012
IconName,
1113
IconSize,
@@ -91,8 +93,10 @@ const CardMessageBox = ({
9193
/>
9294
<View style={styles.contentContainer}>
9395
<View style={styles.textsContainer}>
94-
<Text variant={TextVariant.BodyMDBold}>{config.title}</Text>
95-
<Text variant={TextVariant.BodyMD}>{config.description}</Text>
96+
<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Bold}>
97+
{config.title}
98+
</Text>
99+
<Text variant={TextVariant.BodyMd}>{config.description}</Text>
96100
</View>
97101

98102
<View

‎app/components/UI/Card/components/ManageCardListItem/ManageCardListItem.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ import ListItem from '../../../../../component-library/components/List/ListItem/
1010
import ListItemColumn, {
1111
WidthType,
1212
} from '../../../../../component-library/components/List/ListItemColumn';
13-
import Text, {
14-
TextVariant,
13+
import {
14+
FontWeight,
15+
Text,
1516
TextColor,
16-
} from '../../../../../component-library/components/Texts/Text';
17+
TextVariant,
18+
} from '@metamask/design-system-react-native';
1719
import createStyles from './ManageCardListItem.styles';
1820

1921
export interface ManageCardListItemProps {
@@ -44,9 +46,14 @@ const ManageCardListItem: React.FC<ManageCardListItemProps> = ({
4446
<TouchableOpacity onPress={onPress} {...generateTestId(Platform, testID)}>
4547
<ListItem style={styles.root}>
4648
<ListItemColumn widthType={WidthType.Fill} style={styles.description}>
47-
<Text variant={TextVariant.BodyMDMedium}>{title}</Text>
49+
<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
50+
{title}
51+
</Text>
4852
{typeof description === 'string' ? (
49-
<Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
53+
<Text
54+
variant={TextVariant.BodySm}
55+
color={TextColor.TextAlternative}
56+
>
5057
{description}
5158
</Text>
5259
) : (

‎app/components/UI/Card/components/ManageCardListItem/__snapshots__/ManageCardListItem.test.tsx.snap‎

Lines changed: 99 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -347,13 +347,17 @@ exports[`ManageCardListItem Component renders with React.ReactNode description a
347347
<Text
348348
accessibilityRole="text"
349349
style={
350-
{
351-
"color": "#131416",
352-
"fontFamily": "Geist-Medium",
353-
"fontSize": 16,
354-
"letterSpacing": 0,
355-
"lineHeight": 24,
356-
}
350+
[
351+
{
352+
"color": "#131416",
353+
"fontFamily": "Geist-Medium",
354+
"fontSize": 16,
355+
"fontWeight": 400,
356+
"letterSpacing": 0,
357+
"lineHeight": 24,
358+
},
359+
undefined,
360+
]
357361
}
358362
>
359363
Title with React Node
@@ -725,27 +729,35 @@ exports[`ManageCardListItem Component renders with all props and matches snapsho
725729
<Text
726730
accessibilityRole="text"
727731
style={
728-
{
729-
"color": "#131416",
730-
"fontFamily": "Geist-Medium",
731-
"fontSize": 16,
732-
"letterSpacing": 0,
733-
"lineHeight": 24,
734-
}
732+
[
733+
{
734+
"color": "#131416",
735+
"fontFamily": "Geist-Medium",
736+
"fontSize": 16,
737+
"fontWeight": 400,
738+
"letterSpacing": 0,
739+
"lineHeight": 24,
740+
},
741+
undefined,
742+
]
735743
}
736744
>
737745
Custom Title
738746
</Text>
739747
<Text
740748
accessibilityRole="text"
741749
style={
742-
{
743-
"color": "#66676a",
744-
"fontFamily": "Geist-Regular",
745-
"fontSize": 14,
746-
"letterSpacing": 0,
747-
"lineHeight": 22,
748-
}
750+
[
751+
{
752+
"color": "#66676a",
753+
"fontFamily": "Geist-Regular",
754+
"fontSize": 14,
755+
"fontWeight": 400,
756+
"letterSpacing": 0,
757+
"lineHeight": 22,
758+
},
759+
undefined,
760+
]
749761
}
750762
>
751763
Custom description
@@ -1145,27 +1157,35 @@ exports[`ManageCardListItem Component renders with custom right icon when rightI
11451157
<Text
11461158
accessibilityRole="text"
11471159
style={
1148-
{
1149-
"color": "#131416",
1150-
"fontFamily": "Geist-Medium",
1151-
"fontSize": 16,
1152-
"letterSpacing": 0,
1153-
"lineHeight": 24,
1154-
}
1160+
[
1161+
{
1162+
"color": "#131416",
1163+
"fontFamily": "Geist-Medium",
1164+
"fontSize": 16,
1165+
"fontWeight": 400,
1166+
"letterSpacing": 0,
1167+
"lineHeight": 24,
1168+
},
1169+
undefined,
1170+
]
11551171
}
11561172
>
11571173
Custom Icon Test
11581174
</Text>
11591175
<Text
11601176
accessibilityRole="text"
11611177
style={
1162-
{
1163-
"color": "#66676a",
1164-
"fontFamily": "Geist-Regular",
1165-
"fontSize": 14,
1166-
"letterSpacing": 0,
1167-
"lineHeight": 22,
1168-
}
1178+
[
1179+
{
1180+
"color": "#66676a",
1181+
"fontFamily": "Geist-Regular",
1182+
"fontSize": 14,
1183+
"fontWeight": 400,
1184+
"letterSpacing": 0,
1185+
"lineHeight": 22,
1186+
},
1187+
undefined,
1188+
]
11691189
}
11701190
>
11711191
Should use Edit icon
@@ -1565,27 +1585,35 @@ exports[`ManageCardListItem Component renders with required props and matches sn
15651585
<Text
15661586
accessibilityRole="text"
15671587
style={
1568-
{
1569-
"color": "#131416",
1570-
"fontFamily": "Geist-Medium",
1571-
"fontSize": 16,
1572-
"letterSpacing": 0,
1573-
"lineHeight": 24,
1574-
}
1588+
[
1589+
{
1590+
"color": "#131416",
1591+
"fontFamily": "Geist-Medium",
1592+
"fontSize": 16,
1593+
"fontWeight": 400,
1594+
"letterSpacing": 0,
1595+
"lineHeight": 24,
1596+
},
1597+
undefined,
1598+
]
15751599
}
15761600
>
15771601
Test Title
15781602
</Text>
15791603
<Text
15801604
accessibilityRole="text"
15811605
style={
1582-
{
1583-
"color": "#66676a",
1584-
"fontFamily": "Geist-Regular",
1585-
"fontSize": 14,
1586-
"letterSpacing": 0,
1587-
"lineHeight": 22,
1588-
}
1606+
[
1607+
{
1608+
"color": "#66676a",
1609+
"fontFamily": "Geist-Regular",
1610+
"fontSize": 14,
1611+
"fontWeight": 400,
1612+
"letterSpacing": 0,
1613+
"lineHeight": 22,
1614+
},
1615+
undefined,
1616+
]
15891617
}
15901618
>
15911619
Test description
@@ -1953,27 +1981,35 @@ exports[`ManageCardListItem Component renders without right icon when rightIcon
19531981
<Text
19541982
accessibilityRole="text"
19551983
style={
1956-
{
1957-
"color": "#131416",
1958-
"fontFamily": "Geist-Medium",
1959-
"fontSize": 16,
1960-
"letterSpacing": 0,
1961-
"lineHeight": 24,
1962-
}
1984+
[
1985+
{
1986+
"color": "#131416",
1987+
"fontFamily": "Geist-Medium",
1988+
"fontSize": 16,
1989+
"fontWeight": 400,
1990+
"letterSpacing": 0,
1991+
"lineHeight": 24,
1992+
},
1993+
undefined,
1994+
]
19631995
}
19641996
>
19651997
No Icon Test
19661998
</Text>
19671999
<Text
19682000
accessibilityRole="text"
19692001
style={
1970-
{
1971-
"color": "#66676a",
1972-
"fontFamily": "Geist-Regular",
1973-
"fontSize": 14,
1974-
"letterSpacing": 0,
1975-
"lineHeight": 22,
1976-
}
2002+
[
2003+
{
2004+
"color": "#66676a",
2005+
"fontFamily": "Geist-Regular",
2006+
"fontSize": 14,
2007+
"fontWeight": 400,
2008+
"letterSpacing": 0,
2009+
"lineHeight": 22,
2010+
},
2011+
undefined,
2012+
]
19772013
}
19782014
>
19792015
Should render without any right icon

‎app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { useMemo } from 'react';
22
import { View } from 'react-native';
3-
import Text, {
4-
TextVariant,
3+
import {
4+
FontWeight,
5+
Text,
56
TextColor,
6-
} from '../../../../../component-library/components/Texts/Text';
7+
TextVariant,
8+
} from '@metamask/design-system-react-native';
79
import createStyles from './SpendingLimitProgressBar.styles';
810
import { useTheme } from '../../../../../util/theme';
911
import ProgressBar from 'react-native-progress/Bar';
@@ -86,8 +88,14 @@ const SpendingLimitProgressBar = ({
8688
<View style={styles.container}>
8789
<View style={styles.divider} />
8890
<View style={styles.textContainer}>
89-
<Text variant={TextVariant.BodySMMedium}>Spending Limit</Text>
90-
<Text variant={TextVariant.BodySMMedium} color={TextColor.Alternative}>
91+
<Text variant={TextVariant.BodySm} fontWeight={FontWeight.Medium}>
92+
Spending Limit
93+
</Text>
94+
<Text
95+
variant={TextVariant.BodySm}
96+
fontWeight={FontWeight.Medium}
97+
color={TextColor.TextAlternative}
98+
>
9199
{consumedAmountDisplay}/{totalAllowanceDisplay} {symbol}
92100
</Text>
93101
</View>

‎app/components/UI/Card/components/SpendingLimitWarning/SpendingLimitWarning.styles.ts‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,44 +23,15 @@ const createStyles = (theme: Theme) =>
2323
flex: 1,
2424
},
2525
mainText: {
26-
fontSize: 16,
27-
fontWeight: '600',
28-
color: theme.colors.text.default,
2926
marginBottom: 4,
3027
},
31-
subText: {
32-
fontSize: 14,
33-
fontWeight: '400',
34-
color: theme.colors.text.alternative,
35-
},
3628
buttonsRow: {
3729
flexDirection: 'row',
3830
justifyContent: 'flex-start',
3931
alignItems: 'center',
4032
marginLeft: 36, // Align with text content (icon width + margin)
4133
gap: 8, // Space between buttons
4234
},
43-
dismissButton: {
44-
backgroundColor: theme.colors.background.alternative,
45-
borderRadius: 8,
46-
paddingHorizontal: 16,
47-
paddingVertical: 8,
48-
borderWidth: 1,
49-
borderColor: theme.colors.border.muted,
50-
},
51-
setLimitButton: {
52-
backgroundColor: theme.colors.background.default,
53-
borderRadius: 8,
54-
paddingHorizontal: 16,
55-
paddingVertical: 8,
56-
borderWidth: 1,
57-
borderColor: theme.colors.border.muted,
58-
},
59-
buttonText: {
60-
fontSize: 14,
61-
fontWeight: '600',
62-
color: theme.colors.text.default,
63-
},
6435
});
6536

6637
export default createStyles;

0 commit comments

Comments
 (0)