chore: upgrade design system packages (v42.0.0)#30826
Conversation
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
| testID: MoneyHeaderTestIds.TITLE, | ||
| }} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
Before /After
No visual regressions
9623def to
00a7bd6
Compare
| // Override internal styles that set width of start accessory to same size as close button, | ||
| // to allow for left aligned predict header content | ||
| startAccessoryWrapperProps={{ style: tw.style('w-0') }} | ||
| style={tw.style('gap-0')} |
There was a problem hiding this comment.
BottomSheetHeader now extends the full width and aligns with the edges of content allowing more of the title and description to be visible
Before / After
00a7bd6 to
5512ed2
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: New normalization code reinforces banned toMatchSnapshot pattern
- Replaced the toMatchSnapshot call with explicit assertions, removed the normalization helpers, and deleted the external .snap file.
Or push these changes by commenting:
@cursor push 3b8bc8114f
Preview (3b8bc8114f)
diff --git a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/collapsible-section.test.ts.snap b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/collapsible-section.test.ts.snap
deleted file mode 100644
--- a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/collapsible-section.test.ts.snap
+++ /dev/null
@@ -1,346 +1,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CollapsibleSection can expand 1`] = `
-<View
- style={
- [
- {
- "flexGrow": 1,
- "minHeight": 667,
- },
- undefined,
- ]
- }
->
- <View
- style={
- [
- {},
- {
- "flexDirection": "column",
- "flexGrow": 1,
- },
- ]
- }
- >
- <RCTScrollView
- style={
- {
- "marginBottom": 0,
- }
- }
- testID="snap-ui-renderer__scrollview"
- >
- <View>
- <View
- accessibilityValue={
- {
- "max": undefined,
- "min": undefined,
- "now": undefined,
- "text": undefined,
- }
- }
- accessible={true}
- focusable={false}
- onClick={[Function]}
- onResponderGrant={[Function]}
- onResponderMove={[Function]}
- onResponderRelease={[Function]}
- onResponderTerminate={[Function]}
- onResponderTerminationRequest={[Function]}
- onStartShouldSetResponder={[Function]}
- >
- <View
- backgroundColor="#f3f3f4"
- gap={8}
- style={
- [
- {
- "backgroundColor": "#f3f3f4",
- "gap": 8,
- },
- {
- "borderRadius": 8,
- "paddingBottom": 8,
- "paddingLeft": 16,
- "paddingRight": 16,
- },
- ]
- }
- testID="snaps-ui-collapsible-section"
- >
- <View
- accessibilityState={
- {
- "busy": undefined,
- "checked": undefined,
- "disabled": undefined,
- "expanded": undefined,
- "selected": undefined,
- }
- }
- accessibilityValue={
- {
- "max": undefined,
- "min": undefined,
- "now": undefined,
- "text": undefined,
- }
- }
- accessible={true}
- collapsable={false}
- focusable={true}
- onClick={[Function]}
- onResponderGrant={[Function]}
- onResponderMove={[Function]}
- onResponderRelease={[Function]}
- onResponderTerminate={[Function]}
- onResponderTerminationRequest={[Function]}
- onStartShouldSetResponder={[Function]}
- style={
- {
- "alignItems": "center",
- "display": "flex",
- "flexDirection": "row",
- "justifyContent": "space-between",
- "opacity": 1,
- "paddingBottom": 0,
- "paddingTop": 8,
- }
- }
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Regular",
- "fontSize": 16,
- "letterSpacing": 0,
- "lineHeight": 24,
- }
- }
- >
- My Section
- </Text>
- <SvgMock
- fill="currentColor"
- name="ArrowUp"
- style={
- {
- "color": "#4459ff",
- "height": 16,
- "width": 16,
- }
- }
- />
- </View>
- <View
- color="Default"
- flexDirection="column"
- gap={8}
- justifyContent="flex-start"
- style={
- [
- {
- "color": "Default",
- "flexDirection": "column",
- "gap": 8,
- "justifyContent": "flex-start",
- },
- {
- "gap": 16,
- "margin": 16,
- },
- ]
- }
- >
- <View
- style={
- [
- {
- "alignItems": "center",
- "borderRadius": 8,
- "display": "flex",
- "flexDirection": "row",
- "flexWrap": "wrap",
- "justifyContent": "space-between",
- "paddingBottom": 8,
- "paddingHorizontal": 8,
- },
- {
- "marginLeft": -8,
- "marginRight": -8,
- "paddingBottom": 0,
- "paddingTop": 0,
- },
- ]
- }
- testID="snap-ui-info-row"
- >
- <View
- style={
- {
- "alignItems": "center",
- "alignSelf": "flex-start",
- "display": "flex",
- "flexDirection": "row",
- "minHeight": 38,
- "paddingEnd": 4,
- }
- }
- testID="snap-ui-info-row-label-container"
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Medium",
- "fontSize": 16,
- "letterSpacing": 0,
- "lineHeight": 24,
- }
- }
- testID="snap-ui-info-row-label"
- >
- Row 1
- </Text>
- </View>
- <View
- testID="snap-ui-info-row-children-container"
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Regular",
- "fontSize": 16,
- "fontWeight": "400",
- "letterSpacing": 0,
- "lineHeight": 24,
- "textAlign": "left",
- }
- }
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Regular",
- "fontSize": 16,
- "fontWeight": "400",
- "letterSpacing": 0,
- "lineHeight": 24,
- "textAlign": "left",
- }
- }
- >
- Foo
- </Text>
- </Text>
- </View>
- </View>
- <View
- style={
- [
- {
- "alignItems": "center",
- "borderRadius": 8,
- "display": "flex",
- "flexDirection": "row",
- "flexWrap": "wrap",
- "justifyContent": "space-between",
- "paddingBottom": 8,
- "paddingHorizontal": 8,
- },
- {
- "marginLeft": -8,
- "marginRight": -8,
- "paddingBottom": 0,
- "paddingTop": 0,
- },
- ]
- }
- testID="snap-ui-info-row"
- >
- <View
- style={
- {
- "alignItems": "center",
- "alignSelf": "flex-start",
- "display": "flex",
- "flexDirection": "row",
- "minHeight": 38,
- "paddingEnd": 4,
- }
- }
- testID="snap-ui-info-row-label-container"
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Medium",
- "fontSize": 16,
- "letterSpacing": 0,
- "lineHeight": 24,
- }
- }
- testID="snap-ui-info-row-label"
- >
- Row 2
- </Text>
- </View>
- <View
- testID="snap-ui-info-row-children-container"
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Regular",
- "fontSize": 16,
- "fontWeight": "400",
- "letterSpacing": 0,
- "lineHeight": 24,
- "textAlign": "left",
- }
- }
- >
- <Text
- accessibilityRole="text"
- style={
- {
- "color": "#131416",
- "fontFamily": "Geist-Regular",
- "fontSize": 16,
- "fontWeight": "400",
- "letterSpacing": 0,
- "lineHeight": 24,
- "textAlign": "left",
- }
- }
- >
- Bar
- </Text>
- </Text>
- </View>
- </View>
- </View>
- </View>
- </View>
- </View>
- </RCTScrollView>
- </View>
- <View
- data-renders={1}
- testID="performance"
- />
-</View>
-`;
\ No newline at end of file
diff --git a/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts b/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts
--- a/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts
+++ b/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts
@@ -1,10 +1,5 @@
import { CollapsibleSection, Row, Text } from '@metamask/snaps-sdk/jsx';
import { fireEvent } from '@testing-library/react-native';
-import { StyleSheet } from 'react-native';
-import type {
- ReactTestRendererJSON,
- ReactTestRendererNode,
-} from 'react-test-renderer';
import { renderInterface } from '../testUtils';
jest.mock('../../../../core/Engine/Engine', () => ({
@@ -18,39 +13,6 @@
},
}));
-type SnapshotNode = ReactTestRendererJSON | ReactTestRendererJSON[] | null;
-
-const normalizeSvgMockStyles = (
- node: ReactTestRendererJSON,
-): ReactTestRendererJSON => {
- node.children =
- node.children?.map((child): ReactTestRendererNode => {
- if (typeof child === 'string') {
- return child;
- }
-
- return normalizeSvgMockStyles(child);
- }) ?? null;
-
- if (node.type === 'SvgMock') {
- node.props.style = StyleSheet.flatten(node.props.style);
- }
-
- return node;
-};
-
-const normalizeSnapshot = (node: SnapshotNode): SnapshotNode => {
- if (node === null) {
- return null;
- }
-
- if (Array.isArray(node)) {
- return node.map(normalizeSvgMockStyles);
- }
-
- return normalizeSvgMockStyles(node);
-};
-
describe('CollapsibleSection', () => {
it('renders', () => {
const { getByTestId } = renderInterface(
@@ -73,7 +35,7 @@
});
it('can expand', () => {
- const { toJSON, getByText } = renderInterface(
+ const { getByText } = renderInterface(
CollapsibleSection({
label: 'My Section',
children: [
@@ -94,7 +56,8 @@
fireEvent.press(section);
expect(getByText('Row 1')).toBeDefined();
-
- expect(normalizeSnapshot(toJSON())).toMatchSnapshot();
+ expect(getByText('Row 2')).toBeDefined();
+ expect(getByText('Foo')).toBeDefined();
+ expect(getByText('Bar')).toBeDefined();
});
});You can send follow-ups to the cloud agent here.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: New test assertions use weak matchers instead of
toBeOnTheScreen- Replaced toBeNull/toBeDefined assertions with not.toBeOnTheScreen()/toBeOnTheScreen() in collapsible-section.test.ts per project guidelines.
Or push these changes by commenting:
@cursor push 7c8976d095
Preview (7c8976d095)
diff --git a/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts b/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts
--- a/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts
+++ b/app/components/Snaps/SnapUIRenderer/components/collapsible-section.test.ts
@@ -53,14 +53,14 @@
const section = getByText('My Section');
- expect(queryByText('Row 1')).toBeNull();
- expect(queryByText('Foo')).toBeNull();
+ expect(queryByText('Row 1')).not.toBeOnTheScreen();
+ expect(queryByText('Foo')).not.toBeOnTheScreen();
fireEvent.press(section);
- expect(getByText('Row 1')).toBeDefined();
- expect(getByText('Foo')).toBeDefined();
- expect(getByText('Row 2')).toBeDefined();
- expect(getByText('Bar')).toBeDefined();
+ expect(getByText('Row 1')).toBeOnTheScreen();
+ expect(getByText('Foo')).toBeOnTheScreen();
+ expect(getByText('Row 2')).toBeOnTheScreen();
+ expect(getByText('Bar')).toBeOnTheScreen();
});
});You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 229d175. Configure here.
Upgrade @metamask/design-system-react-native to ^0.27.0 for the MetaMask design system v42.0.0 release. Apply the 0.26.0 to 0.27.0 migration for HeaderBase and BottomSheetHeader by replacing titleTestID with textProps.testID and removing variant-based title APIs.
…tion.test.ts Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com>
77dc0ec
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Affected areas:
The testID prop changes are particularly important because E2E tests use these selectors to find and interact with UI elements. If the new design system version renders testIDs differently (e.g., on a different DOM node), E2E tests could fail. Performance Test Selection: |
Description
Upgrades mobile design system packages to align with the v42.0.0 release.
Packages upgraded:
@metamask/design-system-react-native:^0.26.0→^0.27.0@metamask/design-system-shared:0.19.0→0.20.0transitively via@metamask/design-system-react-nativeReanimated compatibility context
The MMDS v42 release includes breaking API changes in
BottomSheet,BottomSheetHeader, andHeaderBase, but it does not require a mobile-sidereact-native-reanimatedbump.react-native-reanimatedto3.19.0@metamask/design-system-react-native@0.27.0declaresreact-native-reanimated >=3.17.0as its peer rangeBreaking changes addressed:
HeaderBase / BottomSheetHeader: variant-based title API removed
The v42 release removes
variant,HeaderBaseVariant,BottomSheetHeaderVariant, andtitleTestIDfrom the design-system header APIs.Migration: Replaced
titleTestIDwithtextProps.testID, removed variant imports/usages, and used explicit title content/wrapper props where the previous display variant was needed.app/components/Views/MultichainAccounts/AccountDetails/components/SmartAccountModal/SmartAccountModal.tsx: replacedtitleTestIDwithtextProps.testIDapp/components/Views/MultichainAccounts/AccountDetails/AccountTypes/BaseAccountDetails/index.tsx: replacedtitleTestIDwithtextProps.testIDapp/components/UI/Compliance/AccessRestrictedModal/AccessRestrictedModal.tsx: replacedBottomSheetHeadertitleTestIDwithtextProps.testIDapp/components/UI/Predict/components/PredictWithdrawUnavailableSheet/PredictWithdrawUnavailableSheet.tsx: replacedBottomSheetHeadertitleTestIDwithtextProps.testIDapp/components/UI/Money/components/MoneyHeader/MoneyHeader.tsx: removedHeaderBaseVariant.Displayand rendered an explicitHeadingLgtitle to preserve the display-style headerapp/components/UI/Predict/components/PredictPreviewSheet/PredictPreviewSheet.tsx: removedBottomSheetHeaderVariant.Displayand kept the custom header content left-aligned via wrapper propsBottomSheet / BottomSheetDialog:
panGestureHandlerPropsremovedThe v42 release removes
panGestureHandlerPropsfrom the design-systemBottomSheetandBottomSheetDialogAPIs.Migration: No direct
@metamask/design-system-react-nativecall sites in mobile were using this prop. Remaining matches are local legacy component-library APIs, not the upgraded design-system API.New additions available for future use:
IconName.FlashFilled: filled lightning bolt iconSelectButtonSize: semantic size type forSelectButtonChangelog
CHANGELOG entry: null
Related issues
Fixes: No issue; maintenance upgrade for the stable MetaMask design system release.
Manual testing steps
Screenshots/Recordings
Before/After screenshots that affect UI in code comments
Tested BottomSheet with reanimated v4 upgrade and works as expected
mmds.bottomsheet.mov
Pre-merge author checklist
Performance checks (if applicable)
For performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Low Risk
Mechanical API migrations on headers and sheets with stable test IDs; no auth, payments, or core transaction logic touched.
Overview
Bumps
@metamask/design-system-react-nativeto ^0.27.0 (anddesign-system-sharedto 0.20.0 via lockfile) to match design system v42 breaking header API changes.Header migration:
titleTestIDis replaced bytextProps={{ testID: ... }}onHeaderBase/BottomSheetHeaderin account details, compliance, and predict withdraw surfaces.MoneyHeaderswitches fromHeaderBase+ display variant toHeaderRootwithtitle/titleProps.PredictPreviewSheetdrops the display header variant and usesstartAccessoryWrapperProps/styleso custom header content stays left-aligned.Tests: Snap
CollapsibleSectionexpand test drops the Jest snapshot and asserts collapsed vs expanded content withtoBeOnTheScreen; the old snapshot file is removed.Reviewed by Cursor Bugbot for commit 77dc0ec. Bugbot is set up for automated code reviews on this repo. Configure here.