chore: upgrade design-system-react-native to 0.11.0 and deprecate replaced components by georgewrmarshall · Pull Request #27652 · MetaMask/metamask-mobile

georgewrmarshall · 2026-03-18T21:15:09Z

Description

Upgrades @metamask/design-system-react-native from ^0.10.0 to ^0.11.0 and deprecates local component-library components that now have design system replacements.

https://github.com/MetaMask/metamask-design-system/releases/tag/v25.0.0

Why: The design system monorepo v25.0.0 release (@metamask/design-system-react-native@0.11.0) shipped several new components that duplicate functionality currently in app/component-library/. Upgrading and marking local equivalents as @deprecated guides developers toward the canonical design system implementations and prevents further adoption of the local versions.

What changed:

Package upgrade — @metamask/design-system-react-native bumped from ^0.10.0 to ^0.11.0
Breaking change migration — ButtonIcon isFloating boolean prop replaced by variant enum in 0.11.0; migrated InputStepper to use ButtonIconVariant.Floating
10 components deprecated with @deprecated JSDoc following the existing codebase pattern, linking to component READMEs and migration docs:
- MainActionButton (components-temp)
- TabEmptyState (components-temp)
- ButtonFilter (components-temp)
- BannerBase (foundation)
- Banner (union — use BannerAlert from DS directly)
- BannerAlert (variant)
- BannerTip (variant — unused, will be removed)
- BottomSheet
- BottomSheetDialog (foundation)
- ListItem

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

N/A — deprecation annotations are documentation-only changes. The ButtonIcon prop migration in InputStepper can be verified by navigating to the Bridge input stepper UI.

Screenshots/Recordings

Before

N/A

After

N/A

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
Upgrades a shared UI dependency and migrates to a changed ButtonIcon API, which could cause subtle UI/regression issues if other call sites rely on previous props or styles. Password handling was also adjusted to be controlled in a couple of sensitive SRP/password-entry screens, so review for unintended behavior changes.

Overview
Upgrades @metamask/design-system-react-native to 0.11.0 (and @metamask/design-system-shared to 0.4.0 via lockfile), and updates the Bridge InputStepper to the new ButtonIcon API by replacing isFloating with variant={ButtonIconVariant.Floating}.

Marks multiple in-repo component-library equivalents as deprecated via JSDoc (e.g. Banner, BannerBase, BottomSheet, ListItem, and several components-temp components), pointing developers to the design-system replacements and noting BannerVariant.Tip/BannerTip as unused and slated for removal.

Tightens password input control by initializing ManualBackupStep1 password state to '' and wiring RevealPrivateCredential’s PasswordEntry to a new required password prop, with corresponding snapshot updates.

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

github-actions · 2026-03-18T21:15:18Z

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-03-18T21:17:47Z

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.10.0 ⏵ 0.11.0			⁺¹	⁺¹

View full report

georgewrmarshall

Check that we have migration docs for each component that links to them

cursor

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: InputStepper still uses removed isFloating prop after upgrade
- Replaced deprecated isFloating with variant={ButtonIconVariant.Floating} and added the required import.

Or push these changes by commenting:

@cursor push 8091493730

Preview (8091493730)

diff --git a/app/components/UI/Bridge/components/InputStepper/index.tsx b/app/components/UI/Bridge/components/InputStepper/index.tsx
--- a/app/components/UI/Bridge/components/InputStepper/index.tsx
+++ b/app/components/UI/Bridge/components/InputStepper/index.tsx
@@ -4,6 +4,7 @@
 import {
   ButtonIcon,
   ButtonIconSize,
+  ButtonIconVariant,
   IconColor,
   IconName,
   Text,
@@ -42,7 +43,7 @@
         <ButtonIcon
           size={ButtonIconSize.Lg}
           iconName={IconName.Minus}
-          isFloating
+          variant={ButtonIconVariant.Floating}
           style={tw.style(minusPressed ? 'bg-muted-pressed' : 'bg-muted')}
           iconProps={{ color: IconColor.IconDefault }}
           onPressIn={() => setMinusPressed(true)}
@@ -72,7 +73,7 @@
         <ButtonIcon
           size={ButtonIconSize.Lg}
           iconName={IconName.Add}
-          isFloating
+          variant={ButtonIconVariant.Floating}
           style={tw.style(plusPressed ? 'bg-muted-pressed' : 'bg-muted')}
           iconProps={{ color: IconColor.IconDefault }}
           onPressIn={() => setPlusPressed(true)}

_{You can send follow-ups to this agent here.}

@deprecated

…laced components Upgrade @metamask/design-system-react-native from ^0.10.0 to ^0.11.0 and mark local component-library components that now have design system replacements as @deprecated with migration links. Breaking change fix: ButtonIcon isFloating prop replaced by variant enum in 0.11.0 — migrated InputStepper to use ButtonIconVariant.Floating. Newly deprecated components (available in DS since 0.11.0): - MainActionButton - TabEmptyState - ButtonFilter - BannerBase - Banner (union — use BannerAlert from DS directly) - BannerAlert - BannerTip (unused, will be removed) - BottomSheet - BottomSheetDialog - ListItem

- Pass controlled password value into RevealPrivateCredential TextField - Use ButtonIcon isFloating instead of removed ButtonIconVariant in InputStepper Made-with: Cursor

georgewrmarshall · 2026-03-25T20:36:19Z

 }

 export interface PasswordEntryProps {
+  password: string;


Updating PasswordEntry from an uncontrolled component to a controlled component due to controlled only support from design system component

georgewrmarshall · 2026-03-25T20:36:30Z

        ) : (
          <Box twClassName="p-5 pb-0">
            <PasswordEntry
+              password={password}


Update due to controlled input only change from design system library update

github-actions · 2026-03-25T23:14:37Z

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - draft PR

All E2E tests pre-selected.

View GitHub Actions results

georgewrmarshall · 2026-03-25T23:17:39Z

          size={ButtonIconSize.Lg}
          iconName={IconName.Minus}
-          isFloating
+          variant={ButtonIconVariant.Floating}


Updating breaking change isFloating has changed to variant={ButtonIconVariant.Floating}

github-actions · 2026-03-25T23:35:14Z

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

sonarqubecloud · 2026-03-25T23:40:13Z

Quality Gate failed

Failed conditions
B Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

georgewrmarshall · 2026-03-26T03:58:01Z

Quality Gate failed

Failed conditions B Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

SonarCloud is failing because of the added @deprecated JS doc tags and not because of code quality

ieow

lgtm

georgewrmarshall self-assigned this Mar 18, 2026

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

github-actions Bot added size-S risk-high Extensive testing required · High bug introduction risk labels Mar 18, 2026

georgewrmarshall force-pushed the chore/upgrade-design-system-react-native-0.11.0 branch from 7a6ae88 to 036af7a Compare March 18, 2026 21:18

github-actions Bot added risk-high Extensive testing required · High bug introduction risk and removed risk-high Extensive testing required · High bug introduction risk labels Mar 18, 2026

georgewrmarshall commented Mar 18, 2026

View reviewed changes

georgewrmarshall force-pushed the chore/upgrade-design-system-react-native-0.11.0 branch from 036af7a to 9a6cc8a Compare March 18, 2026 22:15

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-high Extensive testing required · High bug introduction risk labels Mar 18, 2026

georgewrmarshall commented Mar 18, 2026

View reviewed changes

Comment thread app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx Outdated

georgewrmarshall commented Mar 18, 2026

View reviewed changes

Comment thread app/component-library/components/Banners/Banner/Banner.tsx Outdated

georgewrmarshall marked this pull request as ready for review March 18, 2026 22:46

georgewrmarshall requested review from a team as code owners March 18, 2026 22:46

georgewrmarshall marked this pull request as draft March 18, 2026 22:46

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 18, 2026

georgewrmarshall marked this pull request as ready for review March 19, 2026 05:17

kirillzyusko previously approved these changes Mar 20, 2026

View reviewed changes

georgewrmarshall enabled auto-merge March 20, 2026 18:48

infiniteflower previously approved these changes Mar 20, 2026

View reviewed changes

georgewrmarshall added this pull request to the merge queue Mar 20, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Mar 20, 2026

georgewrmarshall added this pull request to the merge queue Mar 20, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Mar 20, 2026

georgewrmarshall enabled auto-merge March 20, 2026 21:07

georgewrmarshall dismissed stale reviews from kirillzyusko, brianacnguyen, and infiniteflower via ec71f7c March 25, 2026 17:06

georgewrmarshall requested review from a team as code owners March 25, 2026 17:06

cursor Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread package.json

georgewrmarshall added 5 commits March 25, 2026 13:11

fix: default ManualBackupStep1 password to empty string

8f6c82f

chore: update snapshot

9bb18de

fix: align TextField and ButtonIcon with design-system-react-native 0.11

c33add8

- Pass controlled password value into RevealPrivateCredential TextField - Use ButtonIcon isFloating instead of removed ButtonIconVariant in InputStepper Made-with: Cursor

chore: replace isFloating with variant for ButtonIcon

5987809

georgewrmarshall commented Mar 25, 2026

View reviewed changes

ieow approved these changes Mar 26, 2026

View reviewed changes

grvgoel81 approved these changes Mar 26, 2026

View reviewed changes

infiniteflower approved these changes Mar 26, 2026

View reviewed changes

brianacnguyen approved these changes Mar 26, 2026

View reviewed changes

Uh oh!

Conversation

georgewrmarshall commented Mar 18, 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

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 18, 2026

Uh oh!

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

Uh oh!

Uh oh!

georgewrmarshall left a comment • 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment • 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!

Uh oh!

georgewrmarshall Mar 25, 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 Mar 25, 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!

github-actions Bot commented Mar 25, 2026

🔍 Smart E2E Test Selection

Uh oh!

georgewrmarshall Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 25, 2026

Uh oh!

sonarqubecloud Bot commented Mar 25, 2026

Quality Gate failed

Uh oh!

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

Uh oh!

Quality Gate failed

Uh oh!

ieow left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

georgewrmarshall commented Mar 18, 2026 •

edited by cursor Bot

Loading

socket-security Bot commented Mar 18, 2026 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading

cursor Bot left a comment •

edited

Loading

georgewrmarshall Mar 25, 2026 •

edited

Loading

georgewrmarshall Mar 25, 2026 •

edited

Loading

georgewrmarshall commented Mar 26, 2026 •

edited

Loading