Skip to content

Commit 2a5aeb3

Browse files
kirillzyuskokirillzyusko
authored
feat: migrate Label (card scope) (MetaMask#27255)
<!-- 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** <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> Migrate `Label` component (card scope). ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-280 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <img width="1206" height="2622" alt="image" src="https://github.com/user-attachments/assets/6ceb7e27-f2bd-49b2-9b15-ece4843f6572" /> ### **After** <img width="1206" height="2622" alt="image" src="https://github.com/user-attachments/assets/38d76c8f-40b6-464e-9d88-c5ce5885a6c5" /> ## **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 - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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 UI-only change that swaps the `Label` implementation in card screens; main risk is minor styling/test snapshot churn or subtle accessibility differences. > > **Overview** > Migrates card-related screens/components to use `Label` from `@metamask/design-system-react-native` instead of the local `component-library` `Form/Label` (e.g., `CardAuthentication`, `AddFundsBottomSheet`, and onboarding steps). > > Updates associated Jest mocks and snapshots to reflect the new `Label` rendering/styling (notably style arrays/fontWeight and removal of the previous `testID="label"` output). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 65f2d04. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent dc62a84 commit 2a5aeb3

9 files changed

Lines changed: 101 additions & 82 deletions

File tree

‎app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { Platform, TouchableOpacity, TextInputProps } from 'react-native';
44
import {
55
Box,
66
FontWeight,
7+
Label,
78
Text,
89
TextVariant,
910
Icon,
1011
IconName,
1112
IconSize,
1213
} from '@metamask/design-system-react-native';
1314
import TextField from '../../../../../component-library/components/Form/TextField';
14-
import Label from '../../../../../component-library/components/Form/Label';
1515

1616
import Button, {
1717
ButtonSize,

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

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -628,15 +628,18 @@ exports[`CardAuthentication Component Login Step - Component Rendering matches l
628628
<Text
629629
accessibilityRole="text"
630630
style={
631-
{
632-
"color": "#131416",
633-
"fontFamily": "Geist-Regular",
634-
"fontSize": 16,
635-
"letterSpacing": 0,
636-
"lineHeight": 24,
637-
}
631+
[
632+
{
633+
"color": "#131416",
634+
"fontFamily": "Geist-Regular",
635+
"fontSize": 16,
636+
"fontWeight": 400,
637+
"letterSpacing": 0,
638+
"lineHeight": 24,
639+
},
640+
undefined,
641+
]
638642
}
639-
testID="label"
640643
>
641644
Email
642645
</Text>
@@ -740,15 +743,18 @@ exports[`CardAuthentication Component Login Step - Component Rendering matches l
740743
<Text
741744
accessibilityRole="text"
742745
style={
743-
{
744-
"color": "#131416",
745-
"fontFamily": "Geist-Regular",
746-
"fontSize": 16,
747-
"letterSpacing": 0,
748-
"lineHeight": 24,
749-
}
746+
[
747+
{
748+
"color": "#131416",
749+
"fontFamily": "Geist-Regular",
750+
"fontSize": 16,
751+
"fontWeight": 400,
752+
"letterSpacing": 0,
753+
"lineHeight": 24,
754+
},
755+
undefined,
756+
]
750757
}
751-
testID="label"
752758
>
753759
Password
754760
</Text>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import {
1515
IconName,
1616
IconSize,
1717
IconColor,
18+
Label,
1819
} from '@metamask/design-system-react-native';
1920
import { createStyles } from './AddFundsBottomSheet.styles';
20-
import Label from '../../../../../component-library/components/Form/Label';
2121
import { useTheme } from '../../../../../util/theme';
2222
import { View } from 'react-native';
2323
import { CardTokenAllowance } from '../../types';

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

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -647,15 +647,18 @@ exports[`AddFundsBottomSheet renders with both options enabled and matches snaps
647647
<Text
648648
accessibilityRole="text"
649649
style={
650-
{
651-
"color": "#131416",
652-
"fontFamily": "Geist-Regular",
653-
"fontSize": 16,
654-
"letterSpacing": 0,
655-
"lineHeight": 24,
656-
}
650+
[
651+
{
652+
"color": "#131416",
653+
"fontFamily": "Geist-Regular",
654+
"fontSize": 16,
655+
"fontWeight": 400,
656+
"letterSpacing": 0,
657+
"lineHeight": 24,
658+
},
659+
undefined,
660+
]
657661
}
658-
testID="label"
659662
>
660663
Fund with cash
661664
</Text>
@@ -760,15 +763,18 @@ exports[`AddFundsBottomSheet renders with both options enabled and matches snaps
760763
<Text
761764
accessibilityRole="text"
762765
style={
763-
{
764-
"color": "#131416",
765-
"fontFamily": "Geist-Regular",
766-
"fontSize": 16,
767-
"letterSpacing": 0,
768-
"lineHeight": 24,
769-
}
766+
[
767+
{
768+
"color": "#131416",
769+
"fontFamily": "Geist-Regular",
770+
"fontSize": 16,
771+
"fontWeight": 400,
772+
"letterSpacing": 0,
773+
"lineHeight": 24,
774+
},
775+
undefined,
776+
]
770777
}
771-
testID="label"
772778
>
773779
Fund with crypto
774780
</Text>
@@ -2047,15 +2053,18 @@ exports[`AddFundsBottomSheet renders with only deposit option when swaps are not
20472053
<Text
20482054
accessibilityRole="text"
20492055
style={
2050-
{
2051-
"color": "#131416",
2052-
"fontFamily": "Geist-Regular",
2053-
"fontSize": 16,
2054-
"letterSpacing": 0,
2055-
"lineHeight": 24,
2056-
}
2056+
[
2057+
{
2058+
"color": "#131416",
2059+
"fontFamily": "Geist-Regular",
2060+
"fontSize": 16,
2061+
"fontWeight": 400,
2062+
"letterSpacing": 0,
2063+
"lineHeight": 24,
2064+
},
2065+
undefined,
2066+
]
20572067
}
2058-
testID="label"
20592068
>
20602069
Fund with cash
20612070
</Text>
@@ -2752,15 +2761,18 @@ exports[`AddFundsBottomSheet renders with only swap option when deposit is disab
27522761
<Text
27532762
accessibilityRole="text"
27542763
style={
2755-
{
2756-
"color": "#131416",
2757-
"fontFamily": "Geist-Regular",
2758-
"fontSize": 16,
2759-
"letterSpacing": 0,
2760-
"lineHeight": 24,
2761-
}
2764+
[
2765+
{
2766+
"color": "#131416",
2767+
"fontFamily": "Geist-Regular",
2768+
"fontSize": 16,
2769+
"fontWeight": 400,
2770+
"letterSpacing": 0,
2771+
"lineHeight": 24,
2772+
},
2773+
undefined,
2774+
]
27622775
}
2763-
testID="label"
27642776
>
27652777
Fund with crypto
27662778
</Text>

‎app/components/UI/Card/components/Onboarding/PersonalDetails.test.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,14 @@ jest.mock('@metamask/design-system-react-native', () => {
7575
}) => React.createElement(Text, { testID, ...props }, children),
7676
Icon: ({ name, size, ...props }: { name: string; size: string }) =>
7777
React.createElement(View, { testID: 'icon', ...props }),
78+
Label: ({
79+
children,
80+
testID,
81+
...props
82+
}: {
83+
children: React.ReactNode;
84+
testID?: string;
85+
}) => React.createElement(Text, { testID, ...props }, children),
7886
TextVariant,
7987
IconName,
8088
IconSize,
@@ -182,19 +190,6 @@ jest.mock('../../../../../component-library/components/Buttons/Button', () => {
182190
};
183191
});
184192

185-
jest.mock('../../../../../component-library/components/Form/Label', () => {
186-
const React = jest.requireActual('react');
187-
const { Text } = jest.requireActual('react-native');
188-
189-
return ({
190-
children,
191-
testID,
192-
}: {
193-
children: React.ReactNode;
194-
testID?: string;
195-
}) => React.createElement(Text, { testID }, children);
196-
});
197-
198193
jest.mock('../../../Ramp/Deposit/components/DepositDateField', () => {
199194
const React = jest.requireActual('react');
200195
const { TextInput } = jest.requireActual('react-native');

‎app/components/UI/Card/components/Onboarding/PersonalDetails.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React, { useCallback, useEffect, useMemo, useState } from 'react';
22
import { useNavigation } from '@react-navigation/native';
3-
import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
3+
import {
4+
Box,
5+
Label,
6+
Text,
7+
TextVariant,
8+
} from '@metamask/design-system-react-native';
49
import Button, {
510
ButtonSize,
611
ButtonVariants,
712
ButtonWidthTypes,
813
} from '../../../../../component-library/components/Buttons/Button';
914
import TextField from '../../../../../component-library/components/Form/TextField';
10-
import Label from '../../../../../component-library/components/Form/Label';
1115
import Routes from '../../../../../constants/navigation/Routes';
1216
import { strings } from '../../../../../../locales/i18n';
1317
import OnboardingStep from './OnboardingStep';

‎app/components/UI/Card/components/Onboarding/PhysicalAddress.test.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,15 @@ jest.mock('@metamask/design-system-react-native', () => {
147147
const Icon = ({ name, size, ...props }: { name: string; size: string }) =>
148148
React.createElement(View, { testID: 'icon', ...props });
149149

150+
const Label = ({
151+
children,
152+
...props
153+
}: React.PropsWithChildren<Record<string, unknown>>) =>
154+
React.createElement(RNText, props, children);
155+
150156
return {
151157
Box,
158+
Label,
152159
Text,
153160
Icon,
154161
TextVariant: {
@@ -207,19 +214,6 @@ jest.mock('../../../../../component-library/components/Form/TextField', () => {
207214
};
208215
});
209216

210-
// Mock Label
211-
jest.mock('../../../../../component-library/components/Form/Label', () => {
212-
// eslint-disable-next-line @typescript-eslint/no-shadow
213-
const React = jest.requireActual('react');
214-
const { Text } = jest.requireActual('react-native');
215-
216-
return ({
217-
children,
218-
...props
219-
}: React.PropsWithChildren<Record<string, unknown>>) =>
220-
React.createElement(Text, props, children);
221-
});
222-
223217
// Mock Button
224218
jest.mock('../../../../../component-library/components/Buttons/Button', () => {
225219
// eslint-disable-next-line @typescript-eslint/no-shadow

‎app/components/UI/Card/components/Onboarding/PhysicalAddress.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ import React, {
66
useState,
77
} from 'react';
88
import { useNavigation } from '@react-navigation/native';
9-
import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
9+
import {
10+
Box,
11+
Label,
12+
Text,
13+
TextVariant,
14+
} from '@metamask/design-system-react-native';
1015
import Button, {
1116
ButtonSize,
1217
ButtonVariants,
1318
ButtonWidthTypes,
1419
} from '../../../../../component-library/components/Buttons/Button';
1520
import TextField from '../../../../../component-library/components/Form/TextField';
16-
import Label from '../../../../../component-library/components/Form/Label';
1721
import Routes from '../../../../../constants/navigation/Routes';
1822
import { strings } from '../../../../../../locales/i18n';
1923
import OnboardingStep from './OnboardingStep';

‎app/components/UI/Card/components/Onboarding/SetPhoneNumber.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React, { useCallback, useEffect, useMemo, useState } from 'react';
22
import { useNavigation } from '@react-navigation/native';
3-
import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
3+
import {
4+
Box,
5+
Label,
6+
Text,
7+
TextVariant,
8+
} from '@metamask/design-system-react-native';
49
import Button, {
510
ButtonSize,
611
ButtonVariants,
712
ButtonWidthTypes,
813
} from '../../../../../component-library/components/Buttons/Button';
914
import TextField from '../../../../../component-library/components/Form/TextField';
10-
import Label from '../../../../../component-library/components/Form/Label';
1115
import Routes from '../../../../../constants/navigation/Routes';
1216
import { strings } from '../../../../../../locales/i18n';
1317
import OnboardingStep from './OnboardingStep';

0 commit comments

Comments
 (0)