chore: upgrade design system packages and add deprecation warnings by georgewrmarshall · Pull Request #26450 · MetaMask/metamask-mobile

georgewrmarshall · 2026-02-23T21:47:05Z

Description

Upgrades the MetaMask Design System packages to their latest releases and adds deprecation warnings to the local @app/component-library components that now have official MMDS replacements.

Package upgrades:

@metamask/design-system-react-native: ^0.5.1 → ^0.7.0
@metamask/design-tokens: ^8.1.1 → ^8.2.0
@metamask/design-system-twrnc-preset: unchanged (already at latest ^0.3.0)

New MMDS components in v0.7.0: Label, HeaderBase, Skeleton, Card, BottomSheetFooter, Toast, Input, BottomSheetOverlay

Deprecation warnings added to component-library:

BottomSheetOverlay → use @metamask/design-system-react-native
BottomSheetFooter → use @metamask/design-system-react-native
Card → use @metamask/design-system-react-native
Label → use @metamask/design-system-react-native
Input (TextField foundation) → use @metamask/design-system-react-native
HeaderBase → use @metamask/design-system-react-native
Skeleton → use @metamask/design-system-react-native
Toast → use @metamask/design-system-react-native
AnimationDuration (animation.constants.ts) → use @metamask/design-tokens

Notable breaking change in v0.7.0: Enum runtime values changed from PascalCase to kebab-case (e.g. ButtonVariant.Primary now outputs 'primary' instead of 'Primary'). This only affects code that persists/compares raw enum string values — no production code in this repo is affected. Test files with hardcoded mock enum strings may surface failures and can be updated incrementally.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Design system package upgrade

  Scenario: user sees deprecation warnings in dev console
    Given the app is running in development mode
    When user navigates to a screen that renders a legacy component-library component (e.g. Card, Toast, Skeleton)
    Then a deprecation warning appears in the console pointing to the MMDS replacement

Screenshots/Recordings

After

General smoke test for the ButtonBase updates

iOS

upgrade.ios.after.mov

Android

recording.mp4

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). 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.

Note

Medium Risk
Mostly documentation and dependency upgrades, but the design-system bump can subtly change UI behavior/props and cause downstream test or styling regressions.

Overview
Upgrades MetaMask Design System dependencies (notably @metamask/design-system-react-native to ^0.7.0 and @metamask/design-tokens to ^8.2.0) and refreshes affected Jest snapshots to match updated rendered output/props for several button and navigation-related components.

Adds explicit JSDoc @deprecated notices (with migration links and version tags) across multiple legacy @app/component-library components (BottomSheetOverlay, BottomSheetFooter, Card, Label, TextField Input, HeaderBase, Skeleton, Toast) and marks the local AnimationDuration enum as deprecated in favor of @metamask/design-tokens.

^{Written by Cursor Bugbot for commit 756a9ca. This will update automatically on new commits. Configure here.}

github-actions · 2026-02-23T21:47:33Z

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.

socket-security · 2026-02-23T21:49:12Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/@metamask/design-system-react-native@0.5.1 ⏵ 0.7.0			⁺¹	⁺³
	npm/@metamask/design-tokens@8.1.1 ⏵ 8.2.0	⁺¹			⁺⁶

View full report

georgewrmarshall · 2026-02-24T00:21:19Z

@@ -204,9 +204,9 @@
    "@metamask/core-backend": "^5.0.0",
    "@metamask/delegation-controller": "^1.0.0",
    "@metamask/delegation-deployments": "^0.15.0",
-    "@metamask/design-system-react-native": "^0.5.1",
+    "@metamask/design-system-react-native": "^0.7.0",


Package versions bumped here. The jump from 0.5.1 to 0.7.0 (skipping 0.6.x) brings two breaking changes relevant to this repo: ButtonVariant enum values changed from PascalCase to kebab-case (metamask-design-system#894), and the ButtonBase component tree was flattened (metamask-design-system#870). Both are accounted for in the test updates in this PR.

georgewrmarshall · 2026-02-24T00:21:26Z

+ * 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/BottomSheetOverlay/README.md}
+ * @since @metamask/design-system-react-native@0.7.0
+ */


The @deprecated JSDoc block uses @see with a direct source link (not API docs) and @since to indicate exactly when the MMDS replacement became available. The migration note about comparing props is intentional — the MMDS API is not guaranteed to be a 1:1 match with the component-library version.

georgewrmarshall · 2026-02-24T00:21:36Z

@@ -95,174 +95,90 @@ exports[`CustomSlippageModal confirm button is disabled when shouldDisableConfir
      }
    >
      <View


The large volume of snapshot changes across 53 test suites (~10,000 lines net removed) is expected and caused solely by the ButtonBase refactor in MMDS v0.7.0. The old ButtonBase rendered three layers: an outer wrapper View (transform only), an inner View (styles), and an always-invisible spinner View rendered unconditionally for every button. The new ButtonBase collapses this into a single View with all styles applied directly, eliminating the redundant nesting and the hidden spinner. No behavioral change — purely structural.

georgewrmarshall · 2026-02-24T00:21:44Z

@@ -601,7 +601,7 @@ describe('OnboardingIntroStep', () => {
          confirmAction: {
            label: 'mocked_rewards.onboarding.not_supported_confirm_go_back',
            onPress: expect.any(Function),
-            variant: 'Primary',
+            variant: 'primary',


These assertions changed from 'Primary' to 'primary' because ButtonVariant enum runtime values were standardized to kebab-case in MMDS v0.7.0 (metamask-design-system#894). The source code uses ButtonVariant.Primary (the enum constant, unchanged) so production behavior is unaffected — only tests that hardcoded the old raw string value needed updating.

## **Description** Adds the `corporate-fare` SVG icon to the Icon component library. This icon is needed to unblock the Stocks feature while we wait for the design system libraries upgrade in #26450. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: N/A Related: #26450 ## **Manual testing steps** ```gherkin Feature: Corporate Fare Icon Scenario: Icon renders correctly Given the app is running When a component references the corporate-fare icon Then the icon should render as a building/corporate symbol ``` ## **Screenshots/Recordings** ### **Before** N/A - new icon asset ### **After** N/A - SVG asset only, no UI change ## **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** - [ ] 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.  --- > [!NOTE] > **Low Risk** > Adds a new static SVG and enum entry with no behavioral changes beyond making an additional icon available. > > **Overview** > Adds a new `corporate-fare.svg` asset and exposes it through the Icon component library by extending `IconName` with `CorporateFare` and registering the asset in `Icon.assets.ts`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit c78eb70. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall · 2026-02-24T21:18:33Z

Skipping sonar cloud not because of code issues but because CI job is failing

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

cursor · 2026-02-25T20:00:14Z

 */
+


Blank line disconnects JSDoc deprecation from enum declaration

Medium Severity

A blank line on line 9 between the closing */ of the JSDoc block and the export enum AnimationDuration declaration disconnects them. TypeScript and IDEs associate JSDoc comments with the immediately following declaration only when there is no blank line separating them. This means the @deprecated tag won't produce strikethrough or deprecation warnings when AnimationDuration is used. Every other deprecation comment in this PR correctly has no blank line between */ and the declaration.

will update in a separate PR

@deprecated

…ations Bump @metamask/design-system-react-native from 0.5.1 to 0.7.0 and @metamask/design-tokens from 8.1.1 to 8.2.0. Add @deprecated JSDoc annotations to eight component-library components that now have official MMDS replacements: BottomSheetOverlay, BottomSheetFooter, Card, Label, Input, HeaderBase, Skeleton, and Toast. Mark the local AnimationDuration enum as deprecated in favor of the version exported from @metamask/design-tokens.

github-actions · 2026-02-25T20:42:23Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeWalletPlatform, SmokeNetworkAbstractions, SmokeTrade, SmokeRamps
Selected Performance tags: None (no tests recommended)
Risk Level: medium
AI Confidence: 75%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR is a design system migration/deprecation PR that adds @deprecated JSDoc comments to many foundational component library components (BottomSheetOverlay, BottomSheetFooter, Card, Label, Input, HeaderBase, Skeleton, Toast, etc.) pointing users to use @metamask/design-system-react-native instead. The changes include:

Deprecation notices added to core UI components - these are documentation-only changes that don't modify component behavior
78 snapshot file updates - these appear to be regenerated snapshots reflecting the current state of components
Test file updates for Rewards components (OnboardingIntroStep, WaysToEarn, useRewardDashboardModals)
Animation constants deprecation notice
package.json and yarn.lock updates (likely dependency updates)

The deprecated components are foundational and used across the entire app:

BottomSheet components (confirmations, modals, permissions)
Card, Label, Input (forms, settings)
HeaderBase (navigation headers)
Skeleton (loading states)
Toast (notifications)
TabBar (main navigation)

Since these are primarily deprecation notices (no functional changes) and snapshot updates, the risk is medium. However, given the wide usage of these components, I'm selecting a broad set of E2E tags to verify core user flows still work:

SmokeAccounts: Tests account management which uses many of these components
SmokeConfirmations: Tests confirmations which heavily use BottomSheet components
SmokeWalletPlatform: Tests core wallet features and navigation
SmokeNetworkAbstractions: Tests network selection which uses modals/sheets
SmokeTrade: Tests swap/bridge flows which use forms and confirmations
SmokeRamps: Tests buy/sell flows which use forms and modals

I'm not selecting all tags because the changes are primarily documentation/deprecation notices without functional changes.

Performance Test Selection:
This PR adds deprecation notices to component library components and updates snapshot files. The changes are documentation-only (JSDoc @deprecated comments) and don't modify component behavior, rendering logic, or data loading. No functional changes that would impact UI rendering performance, data loading, or app startup. The snapshot updates are test artifacts, not runtime code changes.

View GitHub Actions results

georgewrmarshall requested a review from a team as a code owner February 23, 2026 21:47

metamaskbot added the team-design-system All issues relating to design system in Mobile label Feb 23, 2026

cursor Bot reviewed Feb 23, 2026

View reviewed changes

Comment thread app/component-library/components/Cards/Card/Card.tsx Outdated

github-actions Bot added the size-S label Feb 23, 2026

cursor Bot reviewed Feb 23, 2026

View reviewed changes

Comment thread package.json

georgewrmarshall mentioned this pull request Feb 23, 2026

chore: upgrade @metamask/utils to ^11.10.0 #26456

Closed

7 tasks

georgewrmarshall marked this pull request as draft February 23, 2026 23:55

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from dd3c885 to 2f060dd Compare February 24, 2026 00:05

georgewrmarshall commented Feb 24, 2026

View reviewed changes

cursor Bot reviewed Feb 24, 2026

View reviewed changes

Comment thread ...ary/components/BottomSheets/BottomSheet/foundation/BottomSheetOverlay/BottomSheetOverlay.tsx Outdated

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch 2 times, most recently from 577c834 to f5ffc6e Compare February 24, 2026 17:06

georgewrmarshall mentioned this pull request Feb 24, 2026

feat: add corporate fare icon #26492

Merged

7 tasks

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from b6cd466 to a5d39a7 Compare February 24, 2026 17:45

georgewrmarshall marked this pull request as ready for review February 24, 2026 20:12

georgewrmarshall requested a review from a team as a code owner February 24, 2026 20:12

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from a2d3b7d to 513aa63 Compare February 24, 2026 20:17

georgewrmarshall enabled auto-merge February 24, 2026 20:38

georgewrmarshall self-assigned this Feb 24, 2026

runway-github Bot mentioned this pull request Feb 24, 2026

Cherry-picking commits from main to release/7.66.1 for PR #26492 #26514

Closed

7 tasks

georgewrmarshall added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Feb 24, 2026

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from 513aa63 to f7f82ae Compare February 25, 2026 17:11

amandaye0h previously approved these changes Feb 25, 2026

View reviewed changes

sophieqgu previously approved these changes Feb 25, 2026

View reviewed changes

georgewrmarshall dismissed stale reviews from sophieqgu and amandaye0h via 3d51e8d February 25, 2026 19:49

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from f7f82ae to 3d51e8d Compare February 25, 2026 19:49

georgewrmarshall requested review from amandaye0h, brianacnguyen and sophieqgu February 25, 2026 19:52

sophieqgu previously approved these changes Feb 25, 2026

View reviewed changes

cursor Bot reviewed Feb 25, 2026

View reviewed changes

amandaye0h previously approved these changes Feb 25, 2026

View reviewed changes

georgewrmarshall dismissed stale reviews from amandaye0h and sophieqgu via 0f2526b February 25, 2026 20:24

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from 3d51e8d to 0f2526b Compare February 25, 2026 20:24

georgewrmarshall force-pushed the upgrade-design-system-react-native-0.7.0 branch from 0f2526b to 756a9ca Compare February 25, 2026 20:37

georgewrmarshall changed the title ~~chore(design-system): upgrade MMDS packages and add deprecation warnings~~ chore: upgrade design system packages and add deprecation warnings Feb 25, 2026

georgewrmarshall requested review from amandaye0h and sophieqgu February 25, 2026 20:48

brianacnguyen approved these changes Feb 25, 2026

View reviewed changes

sophieqgu approved these changes Feb 25, 2026

View reviewed changes

georgewrmarshall added this pull request to the merge queue Feb 25, 2026

Merged via the queue into main with commit 924293d Feb 25, 2026
177 of 199 checks passed

georgewrmarshall deleted the upgrade-design-system-react-native-0.7.0 branch February 25, 2026 22:13

github-actions Bot locked and limited conversation to collaborators Feb 25, 2026

metamaskbot added the release-7.68.0 Issue or pull request that will be included in release 7.68.0 label Feb 25, 2026

Uh oh!

Conversation

georgewrmarshall commented Feb 23, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Feb 23, 2026

Uh oh!

Uh oh!

socket-security Bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

georgewrmarshall Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

georgewrmarshall commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 25, 2026

Choose a reason for hiding this comment

Blank line disconnects JSDoc deprecation from enum declaration

Uh oh!

georgewrmarshall Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 25, 2026

🔍 Smart E2E Test Selection

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

georgewrmarshall commented Feb 23, 2026 •

edited by cursor Bot

Loading

socket-security Bot commented Feb 23, 2026 •

edited

Loading

georgewrmarshall Feb 24, 2026 •

edited

Loading

georgewrmarshall commented Feb 24, 2026 •

edited

Loading