Skip to content

chore: upgrade design system to 0.18.0#42132

Merged
georgewrmarshall merged 3 commits into
mainfrom
chore/upgrade-design-system-0.18.0
Apr 27, 2026
Merged

chore: upgrade design system to 0.18.0#42132
georgewrmarshall merged 3 commits into
mainfrom
chore/upgrade-design-system-0.18.0

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Apr 24, 2026

Copy link
Copy Markdown
Contributor

Description

This PR upgrades the extension to the latest stable MetaMask design system release from v35.0.0, moving @metamask/design-system-react to 0.18.0 and @metamask/design-system-shared to 0.13.0.

The release includes breaking type changes for Icon* and Box* exports, which now use const-object/string-union typing instead of enum-style assumptions. To keep the extension compiling cleanly against the new release, this PR applies the migration patterns already identified in #41733 and updates the additional callsite that surfaced during tsc.

Specifically:

  • Updates the design system package versions and lockfile.
  • Regenerates the LavaMoat build-system policy required by the dependency change.
  • Explicitly types IconName state in the multichain copy-button flows so Copy and CopySuccess both type-check.
  • Keeps NetworkListItem on the component-library IconSize type instead of the new design-system-react export, matching the compatibility pattern from PR #41733.
  • Removes an invalid as const assumption in HeaderSearch that broke once BoxFlexDirection moved to the new string-union model.

Changelog

CHANGELOG entry: null

Related issues

Fixes: N/A

References:

Manual testing steps

  1. Check out this branch and run yarn install.
  2. Run yarn tsc --noEmit and confirm TypeScript passes.
  3. Run yarn lavamoat:auto and confirm policy generation succeeds.
  4. Run yarn lint:changed:fix and confirm the changed files lint cleanly.

Screenshots/Recordings

Before

Button tertiary was using primary/default

before720.mov

After

Button tertiary now uses text/default

after720.mov

Pre-merge author checklist

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
Moderate risk due to a design-system dependency upgrade that can subtly change styling/behavior across the UI, plus small TypeScript type migrations in shared components.

Overview
Upgrades @metamask/design-system-react to 0.18.0 and @metamask/design-system-shared to 0.13.0 (with corresponding yarn.lock updates).

Applies compatibility/type fixes required by the new design-system typings: removes an invalid as const on BoxFlexDirection, explicitly types IconName state for multichain copy icons, and uses the component-library IconSize for NetworkListItem.

Updates SRP import-related Jest snapshots to reflect the new design-system button text color class (text-default vs text-primary-default).

Reviewed by Cursor Bugbot for commit 2d23699. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions

Copy link
Copy Markdown
Contributor

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.

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Extension label Apr 24, 2026
@metamaskbotv2

metamaskbotv2 Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (2 files, +2 -2)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain-accounts/
        • 📁 multichain-address-row/
          • 📄 multichain-address-row.tsx +1 -1
        • 📁 multichain-address-rows-triggered-list/
          • 📄 multichain-aggregated-list-row.tsx +1 -1

🎨 @MetaMask/design-system-engineers (1 files, +1 -1)
  • 📁 ui/
    • 📁 components/
      • 📁 component-library/
        • 📁 header-search/
          • 📄 header-search.tsx +1 -1

🔐 @MetaMask/web3auth (1 files, +2 -1)
  • 📁 ui/
    • 📁 pages/
      • 📁 settings/
        • 📁 transaction-shield-tab/
          • 📁 network-selector/
            • 📄 network-selector.tsx +2 -1

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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

Fix All in Cursor

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: LavaMoat policy uses wrong platform-specific native binding
    • Updated lavamoat/build-system/policy.json to allow all @unrs/resolver platform-specific bindings so Linux CI can load the correct native module.

Create PR

Or push these changes by commenting:

@cursor push 46204b5812
Preview (46204b5812)
diff --git a/lavamoat/build-system/policy.json b/lavamoat/build-system/policy.json
--- a/lavamoat/build-system/policy.json
+++ b/lavamoat/build-system/policy.json
@@ -7761,7 +7761,25 @@
         "process.versions.pnp": true
       },
       "packages": {
-        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-darwin-arm64": true
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-android-arm-eabi": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-android-arm64": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-darwin-arm64": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-darwin-x64": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-freebsd-x64": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-arm-gnueabihf": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-arm-musleabihf": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-arm64-gnu": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-arm64-musl": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-ppc64-gnu": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-riscv64-gnu": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-riscv64-musl": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-s390x-gnu": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-x64-gnu": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-x64-musl": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-wasm32-wasi": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-win32-arm64-msvc": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-win32-ia32-msvc": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-win32-x64-msvc": true
       }
     },
     "gulp>gulp-cli>matchdep>micromatch>snapdragon>base>cache-base>unset-value": {

You can send follow-ups to the cloud agent here.

Reviewed by Cursor Bugbot for commit fc447ce. Configure here.

Comment thread lavamoat/build-system/policy.json Outdated
@socket-security

socket-security Bot commented Apr 24, 2026

Copy link
Copy Markdown

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

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updated@​metamask/​design-system-shared@​0.12.0 ⏵ 0.13.010010076 +297100
Updated@​metamask/​design-system-react@​0.17.1 ⏵ 0.18.0981007998 +1100

View full report

@metamaskbotv2

metamaskbotv2 Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor
Builds ready [9f944c1]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)

Baseline (latest main): 71bd826 | Date: 10/14/58243 | Pipeline: 24915700621 | Baseline logs

Interaction Benchmarks · Samples: 5
Benchmarkchrome-browserify
loadNewAccount🟡 [Show logs]
confirmTx🟡 [Show logs]
bridgeUserActions🟡 [Show logs]

📈 Results compared to the previous 5 runs on main

  • loadNewAccount/load_new_account: -59%
  • loadNewAccount/total: -59%
  • bridgeUserActions/bridge_load_page: -29%
  • bridgeUserActions/bridge_load_asset_picker: -33%
  • bridgeUserActions/bridge_search_token: -30%
  • bridgeUserActions/total: -31%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🟡 loadNewAccount/FCP: p75 2.5s
  • 🟡 confirmTx/FCP: p75 2.5s
  • 🟡 bridgeUserActions/FCP: p75 2.5s
Startup Benchmarks · Samples: 100
Benchmarkchrome-browserifychrome-webpackfirefox-browserifyfirefox-webpack
startupStandardHome🟢 [Show logs]🟢 [Show logs]🟢 [Show logs]🟢 [Show logs]

📈 Results compared to the previous 5 runs on main

  • startupStandardHome/uiStartup: -37%
  • startupStandardHome/load: -27%
  • startupStandardHome/domContentLoaded: -29%
  • startupStandardHome/domInteractive: -23%
  • startupStandardHome/firstPaint: -13%
  • startupStandardHome/firstReactRender: -33%
  • startupStandardHome/initialActions: -33%
  • startupStandardHome/loadScripts: -32%
  • startupStandardHome/setupStore: -17%
  • startupStandardHome/numNetworkReqs: -37%
  • startupStandardHome/uiStartup: -19%
  • startupStandardHome/load: -14%
  • startupStandardHome/domContentLoaded: -13%
  • startupStandardHome/backgroundConnect: -36%
  • startupStandardHome/firstReactRender: -23%
  • startupStandardHome/loadScripts: -14%
  • startupStandardHome/numNetworkReqs: -44%
  • startupStandardHome/uiStartup: -13%
  • startupStandardHome/domInteractive: -63%
  • startupStandardHome/initialActions: -33%
  • startupStandardHome/setupStore: -17%
  • startupStandardHome/numNetworkReqs: -37%
  • startupStandardHome/domInteractive: -35%
  • startupStandardHome/initialActions: -43%
  • startupStandardHome/setupStore: -64%
  • startupStandardHome/numNetworkReqs: -37%
User Journey Benchmarks · Samples: 5 · mock API
Benchmarkchrome-browserify
onboardingImportWallet🟢 [Show logs]
onboardingNewWallet🟢 [Show logs]
assetDetails🟡 [Show logs]
solanaAssetDetails🟡 [Show logs]
importSrpHome🟡 [Show logs]
sendTransactions🟡 [Show logs]
swap🟡 [Show logs]

📈 Results compared to the previous 5 runs on main

  • onboardingImportWallet/srpButtonToSrpForm: -85%
  • onboardingImportWallet/confirmSrpToPwForm: -10%
  • onboardingImportWallet/metricsToWalletReadyScreen: -25%
  • onboardingImportWallet/doneButtonToHomeScreen: -76%
  • onboardingImportWallet/openAccountMenuToAccountListLoaded: +27%
  • onboardingImportWallet/total: -44%
  • onboardingNewWallet/srpButtonToPwForm: -80%
  • onboardingNewWallet/skipBackupToMetricsScreen: -68%
  • onboardingNewWallet/agreeButtonToOnboardingSuccess: -14%
  • onboardingNewWallet/doneButtonToAssetList: -40%
  • onboardingNewWallet/total: -39%
  • assetDetails/assetClickToPriceChart: -53%
  • assetDetails/total: -53%
  • solanaAssetDetails/assetClickToPriceChart: -62%
  • solanaAssetDetails/total: -62%
  • importSrpHome/loginToHomeScreen: -20%
  • importSrpHome/openAccountMenuAfterLogin: -80%
  • importSrpHome/homeAfterImportWithNewWallet: -68%
  • importSrpHome/total: -62%
  • sendTransactions/openSendPageFromHome: -15%
  • sendTransactions/selectTokenToSendFormLoaded: -17%
  • sendTransactions/reviewTransactionToConfirmationPage: +35%
  • sendTransactions/total: +33%
  • swap/openSwapPageFromHome: -96%
  • swap/fetchAndDisplaySwapQuotes: +31%
  • swap/total: +11%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🟡 assetDetails/FCP: p75 2.5s
  • 🟡 solanaAssetDetails/FCP: p75 2.4s
  • 🟡 importSrpHome/FCP: p75 2.3s
  • 🟡 sendTransactions/INP: p75 216ms
  • 🟡 sendTransactions/FCP: p75 2.5s
  • 🟡 swap/FCP: p75 2.5s
Dapp Page Load Benchmarks · Samples: 100
Benchmarkchrome-browserify
dappPageLoad🟢 [Show logs]
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 57 Bytes (0%)
  • ui: 7 Bytes (0%)
  • common: 3.65 KiB (0.03%)

@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
C 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

@metamaskbotv2

metamaskbotv2 Bot commented Apr 24, 2026

Copy link
Copy Markdown
Contributor
Builds ready [2d23699]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 8 warn · 🔴 0 fail)

Baseline (latest main): 71bd826 | Date: 10/14/58243 | Pipeline: 24916373548 | Baseline logs

Interaction Benchmarks · Samples: 5
Benchmarkchrome-browserify
loadNewAccount🟡 [Show logs]
confirmTx🟡 [Show logs]
bridgeUserActions🟡 [Show logs]

📈 Results compared to the previous 5 runs on main

  • loadNewAccount/load_new_account: -73%
  • loadNewAccount/total: -73%
  • bridgeUserActions/bridge_load_page: -47%
  • bridgeUserActions/bridge_load_asset_picker: -61%
  • bridgeUserActions/bridge_search_token: -29%
  • bridgeUserActions/total: -40%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🟡 loadNewAccount/FCP: p75 2.0s
  • 🟡 confirmTx/FCP: p75 1.9s
  • 🟡 bridgeUserActions/FCP: p75 2.0s
Startup Benchmarks · Samples: 100
Benchmarkchrome-browserifychrome-webpackfirefox-browserifyfirefox-webpack
startupStandardHome🟢 [Show logs]🟢 [Show logs]🟢 [Show logs]🟢 [Show logs]

📈 Results compared to the previous 5 runs on main

  • startupStandardHome/uiStartup: -20%
  • startupStandardHome/backgroundConnect: +13%
  • startupStandardHome/firstReactRender: -18%
  • startupStandardHome/initialActions: -33%
  • startupStandardHome/loadScripts: -14%
  • startupStandardHome/numNetworkReqs: -37%
  • startupStandardHome/uiStartup: -19%
  • startupStandardHome/load: -14%
  • startupStandardHome/domContentLoaded: -13%
  • startupStandardHome/backgroundConnect: -37%
  • startupStandardHome/firstReactRender: -23%
  • startupStandardHome/loadScripts: -14%
  • startupStandardHome/numNetworkReqs: -44%
  • startupStandardHome/uiStartup: -15%
  • startupStandardHome/domInteractive: -63%
  • startupStandardHome/initialActions: -33%
  • startupStandardHome/setupStore: -17%
  • startupStandardHome/numNetworkReqs: -37%
  • startupStandardHome/uiStartup: -16%
  • startupStandardHome/domInteractive: -39%
  • startupStandardHome/initialActions: +14%
  • startupStandardHome/setupStore: -64%
  • startupStandardHome/numNetworkReqs: -37%
User Journey Benchmarks · Samples: 5 · mock API
Benchmarkchrome-browserify
onboardingImportWallet🟢 [Show logs]
onboardingNewWallet🟢 [Show logs]
assetDetails🟡 [Show logs]
solanaAssetDetails🟡 [Show logs]
importSrpHome🟡 [Show logs]
sendTransactions🟡 [Show logs]
swap🟡 [Show logs]

📈 Results compared to the previous 5 runs on main

  • onboardingImportWallet/srpButtonToSrpForm: -84%
  • onboardingImportWallet/metricsToWalletReadyScreen: -11%
  • onboardingImportWallet/doneButtonToHomeScreen: -77%
  • onboardingImportWallet/openAccountMenuToAccountListLoaded: +17%
  • onboardingImportWallet/total: -44%
  • onboardingNewWallet/srpButtonToPwForm: -77%
  • onboardingNewWallet/skipBackupToMetricsScreen: -68%
  • onboardingNewWallet/doneButtonToAssetList: -22%
  • onboardingNewWallet/total: -24%
  • assetDetails/assetClickToPriceChart: -77%
  • assetDetails/total: -77%
  • solanaAssetDetails/assetClickToPriceChart: -68%
  • solanaAssetDetails/total: -68%
  • importSrpHome/loginToHomeScreen: -12%
  • importSrpHome/openAccountMenuAfterLogin: -74%
  • importSrpHome/homeAfterImportWithNewWallet: -67%
  • importSrpHome/total: -62%
  • sendTransactions/openSendPageFromHome: -13%
  • sendTransactions/selectTokenToSendFormLoaded: -27%
  • sendTransactions/reviewTransactionToConfirmationPage: +34%
  • sendTransactions/total: +32%
  • swap/openSwapPageFromHome: -97%
  • swap/fetchAndDisplaySwapQuotes: +31%
  • swap/total: +11%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🟡 assetDetails/FCP: p75 2.5s
  • 🟡 solanaAssetDetails/FCP: p75 2.5s
  • 🟡 importSrpHome/FCP: p75 2.5s
  • 🟡 sendTransactions/FCP: p75 2.4s
  • 🟡 swap/FCP: p75 2.4s
Dapp Page Load Benchmarks · Samples: 100
Benchmarkchrome-browserify
dappPageLoad🟢 [Show logs]
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 57 Bytes (0%)
  • ui: 7 Bytes (0%)
  • common: 3.65 KiB (0.03%)

@georgewrmarshall

Copy link
Copy Markdown
Contributor Author

Ignorning sonar cloud as it's just flagging usage of these deprecated IconName types

Screenshot 2026-04-24 at 4 49 48 PM

@georgewrmarshall georgewrmarshall self-assigned this Apr 24, 2026
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Apr 27, 2026
Merged via the queue into main with commit b3fc8cc Apr 27, 2026
212 of 214 checks passed
@georgewrmarshall georgewrmarshall deleted the chore/upgrade-design-system-0.18.0 branch April 27, 2026 18:44
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 27, 2026
@metamaskbot metamaskbot added the release-13.30.0 Issue or pull request that will be included in release 13.30.0 label Apr 27, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-13.30.0 Issue or pull request that will be included in release 13.30.0 size-S team-design-system All issues relating to design system in Extension

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants