Skip to content

chore(deps): upgrade @metamask/design-system-react-native to v0.16.0 (design system v31.0.0) #28612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
georgewrmarshall wants to merge 7 commits into
base: main
Choose a base branch
from
Open

chore(deps): upgrade @metamask/design-system-react-native to v0.16.0 (design system v31.0.0) #28612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5710470
chore(deps): upgrade @metamask/design-system-react-native to v0.16.0
georgewrmarshall Apr 9, 2026
3fc9170
chore(component-library): add missing @deprecated JSDoc tags for DSRN…
georgewrmarshall Apr 9, 2026
d56b624
chore(deps): bump @metamask/utils to ^11.11.0 to satisfy DSRN peer dep
georgewrmarshall Apr 9, 2026
acbc08e
chore: yarn dedupe
georgewrmarshall Apr 9, 2026
4802ca2
chore(component-library): link all avatar variant READMEs in Avatar d…
georgewrmarshall Apr 9, 2026
1c250e6
chore: snapshot updates
georgewrmarshall Apr 9, 2026
5740e79
fix(predict): import IconSize from local Icon to fix TS enum mismatch
georgewrmarshall Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/component-library/components-temp/HeaderSearch/HeaderSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ import {
} from './HeaderSearch.types';

/**
* @deprecated Please update your code to use `HeaderSearch` from `@metamask/design-system-react-native`.
* The API may have changed — compare props before migrating.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/HeaderSearch/README.md}
*
* HeaderSearch is a header component that combines a search field
* with either a back button (screen variant) or cancel button (inline variant).
*
Expand Down
5 changes: 5 additions & 0 deletions app/component-library/components-temp/KeyValueRow/KeyValueRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ import KeyValueRowLabel from './KeyValueLabel/KeyValueLabel';
import KeyValueRowRoot from './KeyValueRoot/KeyValueRoot';

/**
* @deprecated Please update your code to use `KeyValueRow` from `@metamask/design-system-react-native`.
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking API change — not a drop-in replacement.

The DSRN KeyValueRow v0.16.0 completely replaced the nested field/value object API with flat props: keyLabel, value, variant, keyEndButtonIconProps, etc. The local implementation here (and its KeyValueRowStubs sub-components) serves ~15 call sites across the codebase that rely on the old shape. Migration requires updating each call site to the new flat-prop API — see the linked migration docs.

* The API has changed — the new component uses flat props (`keyLabel`, `value`, `variant`) instead of nested `field`/`value` objects.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/KeyValueRow/README.md}
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md#keyvaluerow-api Migration docs}
*
* Prebuilt convenience component to format and render a key/value KeyValueRowLabel pair.
* The KeyValueRowLabel component has props to display a tooltip and icon.
*
Expand Down
10 changes: 10 additions & 0 deletions app/component-library/components/Avatars/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,16 @@ import { AvatarTokenProps } from './variants/AvatarToken/AvatarToken.types';
// Internal dependencies.
import { AvatarProps, AvatarVariant } from './Avatar.types';

/**
* @deprecated Please update your code to use the individual avatar components from `@metamask/design-system-react-native`
* such as `AvatarAccount`, `AvatarFavicon`, `AvatarIcon`, `AvatarNetwork`, or `AvatarToken`.
* The API may have changed — compare props before migrating.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/AvatarAccount/README.md AvatarAccount}
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/AvatarFavicon/README.md AvatarFavicon}
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/AvatarIcon/README.md AvatarIcon}
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/AvatarNetwork/README.md AvatarNetwork}
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/AvatarToken/README.md AvatarToken}
*/
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avatar should be replaced with one of the variants we no longer have this unified component

const Avatar = ({ variant, ...props }: AvatarProps) => {
switch (variant) {
case AvatarVariant.Account:
Expand Down
6 changes: 6 additions & 0 deletions app/component-library/components/Badges/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ import {
BADGE_BADGENOTIFICATIONS_TEST_ID,
} from './Badge.constants';

/**
* @deprecated Please update your code to use the individual badge components from `@metamask/design-system-react-native`
* such as `BadgeNetwork`, `BadgeStatus`, `BadgeCount`, or `BadgeIcon`.
* The API may have changed — compare props before migrating.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BadgeNetwork/README.md}
*/
const Badge = ({ variant, ...props }: BadgeProps) => {
switch (variant) {
case BadgeVariant.Network:
Expand Down
5 changes: 5 additions & 0 deletions app/component-library/components/Badges/Badge/variants/BadgeStatus/BadgeStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ import {
DEFAULT_BADGESTATUS_STATE,
} from './BadgeStatus.constants';

/**
* @deprecated Please update your code to use `BadgeStatus` from `@metamask/design-system-react-native`.
* The API may have changed — compare props before migrating.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BadgeStatus/README.md}
*/
const BadgeStatus = ({
style,
state = DEFAULT_BADGESTATUS_STATE,
Expand Down
5 changes: 5 additions & 0 deletions app/component-library/components/Form/TextFieldSearch/TextFieldSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ import { TextFieldSearchProps } from './TextFieldSearch.types';
import { TEXTFIELDSEARCH_TEST_ID } from './TextFieldSearch.constants';
import styles from './TextFieldSearch.styles';

/**
* @deprecated Please update your code to use `TextFieldSearch` from `@metamask/design-system-react-native`.
* The API may have changed — compare props before migrating.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TextFieldSearch/README.md}
*/
const TextFieldSearch: React.FC<TextFieldSearchProps> = ({
onPressClearButton,
clearButtonProps,
Expand Down
5 changes: 5 additions & 0 deletions app/component-library/components/Texts/SensitiveText/SensitiveText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import Text from '../Text/Text';
// internal dependencies
import { SensitiveTextProps, SensitiveTextLength } from './SensitiveText.types';

/**
* @deprecated Please update your code to use `SensitiveText` from `@metamask/design-system-react-native`.
* The API may have changed — compare props before migrating.
* @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/SensitiveText/README.md}
*/
const SensitiveText: React.FC<SensitiveTextProps> = ({
isHidden = false,
children = '',
Expand Down
24 changes: 12 additions & 12 deletions ...omponents/UI/Bridge/hooks/useSlippageStepperDescription/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`useSlippageStepperDescription complete snapshots for all states snapsho
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.lower_allowed_error [0.1]",
}
Expand All @@ -18,7 +18,7 @@ exports[`useSlippageStepperDescription complete snapshots for all states snapsho
"icon": {
"color": "text-warning-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.lower_suggested_warning [0.5]",
}
Expand All @@ -32,7 +32,7 @@ exports[`useSlippageStepperDescription complete snapshots for all states snapsho
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_allowed_error [50]",
}
Expand All @@ -44,7 +44,7 @@ exports[`useSlippageStepperDescription complete snapshots for all states snapsho
"icon": {
"color": "text-warning-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_suggested_warning [5]",
}
Expand All @@ -56,7 +56,7 @@ exports[`useSlippageStepperDescription complete snapshots for all states snapsho
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_allowed_error [50]",
}
Expand All @@ -68,7 +68,7 @@ exports[`useSlippageStepperDescription lower_allowed_slippage_threshold (ERROR)
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.lower_allowed_error [0.1]",
}
Expand All @@ -80,7 +80,7 @@ exports[`useSlippageStepperDescription lower_allowed_slippage_threshold (ERROR)
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.lower_allowed_error [0.1]",
}
Expand All @@ -92,7 +92,7 @@ exports[`useSlippageStepperDescription lower_suggested_slippage_threshold (WARNI
"icon": {
"color": "text-warning-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.lower_suggested_warning [0.5]",
}
Expand All @@ -104,7 +104,7 @@ exports[`useSlippageStepperDescription upper_allowed_slippage_threshold (ERROR)
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_allowed_error [50]",
}
Expand All @@ -116,7 +116,7 @@ exports[`useSlippageStepperDescription upper_allowed_slippage_threshold (ERROR)
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_allowed_error [50]",
}
Expand All @@ -128,7 +128,7 @@ exports[`useSlippageStepperDescription upper_allowed_slippage_threshold (ERROR)
"icon": {
"color": "text-error-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_allowed_error [50]",
}
Expand All @@ -140,7 +140,7 @@ exports[`useSlippageStepperDescription upper_suggested_slippage_threshold (WARNI
"icon": {
"color": "text-warning-default",
"name": "Danger",
"size": "24",
"size": "lg",
},
"message": "bridge.upper_suggested_warning [5]",
}
Expand Down
3 changes: 2 additions & 1 deletion app/components/UI/Predict/hooks/usePredictShare.utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import { Box, IconSize } from '@metamask/design-system-react-native';
import { Box } from '@metamask/design-system-react-native';
import Icon, {
IconName,
IconSize,
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing wrong icon size import

} from '../../../../component-library/components/Icons/Icon';
import { ToastVariants } from '../../../../component-library/components/Toast';
import type { ToastOptions } from '../../../../component-library/components/Toast/Toast.types';
Expand Down
9 changes: 3 additions & 6 deletions app/components/Views/ManualBackupStep1/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,8 +397,7 @@ exports[`ManualBackupStep1 matches snapshot 1`] = `
[
[
"text-icon-default",
"w-[32px]",
"h-[32px]",
"w-8 h-8",
undefined,
],
undefined,
Expand Down Expand Up @@ -952,8 +951,7 @@ exports[`ManualBackupStep1 theme appearance renders with dark theme 1`] = `
[
[
"text-icon-default",
"w-[32px]",
"h-[32px]",
"w-8 h-8",
undefined,
],
undefined,
Expand Down Expand Up @@ -1507,8 +1505,7 @@ exports[`ManualBackupStep1 theme appearance renders with light theme on Android
[
[
"text-icon-default",
"w-[32px]",
"h-[32px]",
"w-8 h-8",
undefined,
],
undefined,
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@
"@metamask/core-backend": "^6.2.0",
"@metamask/delegation-controller": "^2.0.2",
"@metamask/delegation-deployments": "^1.0.0",
"@metamask/design-system-react-native": "^0.14.0",
"@metamask/design-system-react-native": "^0.16.0",
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why ^0.16.0?

This bumps the design system monorepo from v0.13.0 to v0.16.0 (monorepo release v31.0.0). The codebase was audited for breaking changes before upgrading: BoxHorizontal→BoxRow and BoxVertical→BoxColumn renames have no usages here, and the KeyValueRow API overhaul doesn't affect this repo since it uses a local implementation in components-temp/.

"@metamask/design-system-twrnc-preset": "^0.4.1",
"@metamask/design-tokens": "^8.3.0",
"@metamask/earn-controller": "^10.0.0",
Expand Down Expand Up @@ -326,7 +326,7 @@
"@metamask/transaction-controller": "^64.0.0",
"@metamask/transaction-pay-controller": "^19.1.0",
"@metamask/tron-wallet-snap": "^1.25.1",
"@metamask/utils": "^11.8.1",
"@metamask/utils": "^11.11.0",
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why bump @metamask/utils here?

@metamask/design-system-react-native v0.16.0 declares a peer dependency on @metamask/utils: ^11.11.0, but the project was pinned to ^11.8.1 (resolving to 11.10.0). Without this bump, npm/yarn resolves two separate copies of @metamask/utils in the tree — one for the host (11.10.0) and one for @metamask/design-system-shared (11.11.0) — which can cause instanceof checks to silently fail across module boundaries.

"@myx-trade/sdk": "^0.1.265",
"@ngraveio/bc-ur": "^1.1.6",
"@nktkas/hyperliquid": "^0.30.2",
Expand Down
22 changes: 11 additions & 11 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8181,11 +8181,11 @@ __metadata:
languageName: node
linkType: hard

"@metamask/design-system-react-native@npm:^0.14.0":
version: 0.14.0
resolution: "@metamask/design-system-react-native@npm:0.14.0"
"@metamask/design-system-react-native@npm:^0.16.0":
version: 0.16.0
resolution: "@metamask/design-system-react-native@npm:0.16.0"
dependencies:
"@metamask/design-system-shared": "npm:^0.7.0"
"@metamask/design-system-shared": "npm:^0.9.0"
fast-text-encoding: "npm:^1.0.6"
react-native-jazzicon: "npm:^0.1.2"
peerDependencies:
Expand All @@ -8198,18 +8198,18 @@ __metadata:
react-native-gesture-handler: ">=1.10.3"
react-native-reanimated: ">=3.3.0"
react-native-safe-area-context: ">=4.0.0"
checksum: 10/fce2e0c048af8e2918b4be9be90b86528d02a12021d7782c0c9b20a0499a2c3221f388e348ad5bfc8ffd3e1af59a1b787206c0d149e023afcf8d5095a1df2a15
checksum: 10/64693d417d266793d5ebc80c4e112913af1223a827ac670ff004b4664904c3cedbd14bd08f1929ddc8b5f07861cc26c22ad0b49da064b820ba546287e0e1f19b
languageName: node
linkType: hard

"@metamask/design-system-shared@npm:^0.7.0":
version: 0.7.0
resolution: "@metamask/design-system-shared@npm:0.7.0"
"@metamask/design-system-shared@npm:^0.9.0":
version: 0.9.0
resolution: "@metamask/design-system-shared@npm:0.9.0"
dependencies:
"@metamask/utils": "npm:^11.11.0"
peerDependencies:
react: ^17.0.0 || ^18.0.0
checksum: 10/6029af5621f4a80a1cdcfea226ab4391fce466ee8c0ed6259c0aa06e4ec4029c7b0049c93e6d53cf0bb0a77e630574c92242f80280d7a10e3fb1fdf0b9656a42
checksum: 10/d1c7d54fac099b119b9f4ad6580289abba3fdbc699db13ebceb23c17c1d162987237625e3bf67397bf869e286951cc8edf9879c600f74dfef50f5447b898d61f
languageName: node
linkType: hard

Expand Down Expand Up @@ -35569,7 +35569,7 @@ __metadata:
"@metamask/core-backend": "npm:^6.2.0"
"@metamask/delegation-controller": "npm:^2.0.2"
"@metamask/delegation-deployments": "npm:^1.0.0"
"@metamask/design-system-react-native": "npm:^0.14.0"
"@metamask/design-system-react-native": "npm:^0.16.0"
"@metamask/design-system-twrnc-preset": "npm:^0.4.1"
"@metamask/design-tokens": "npm:^8.3.0"
"@metamask/earn-controller": "npm:^10.0.0"
Expand Down Expand Up @@ -35667,7 +35667,7 @@ __metadata:
"@metamask/transaction-controller": "npm:^64.0.0"
"@metamask/transaction-pay-controller": "npm:^19.1.0"
"@metamask/tron-wallet-snap": "npm:^1.25.1"
"@metamask/utils": "npm:^11.8.1"
"@metamask/utils": "npm:^11.11.0"
"@myx-trade/sdk": "npm:^0.1.265"
"@ngraveio/bc-ur": "npm:^1.1.6"
"@nktkas/hyperliquid": "npm:^0.30.2"
Expand Down
Loading