Conversation
…metamask/design-system-react
Replace deprecated Box, Text, Icon, IconName, Button, ButtonVariant, and
ButtonSize imports from ui/components/component-library with their equivalents
from @metamask/design-system-react in the identity and identity-modal components.
Key API changes applied:
- Box: display+flexDirection enums replaced with BoxFlexDirection/BoxAlignItems/
BoxJustifyContent; Box as="img" replaced with a plain <img> element
- Text: camelCase enums (bodyMd, textAlternative) updated to PascalCase
(BodyMd, TextAlternative); bodyMdMedium replaced with BodyMd+FontWeight.Medium;
as="a" / as="div" replaced with asChild pattern; spacing props on Text moved
to wrapping Box
- Button: ButtonSize.Lg, ButtonVariant.Primary/Secondary import source updated;
width={BlockSize.Half} replaced with className="w-1/2"
- ModalContent/ModalHeader/ModalFooter/Modal* kept from component-library
(not yet available in DSR)
Made-with: Cursor
Contributor
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (4 files, +154 -147)
|
Contributor
Builds ready [a0fc958]
⚡ Performance Benchmarks (Total: 🟢 18 pass · 🟡 0 warn · 🔴 0 fail)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
georgewrmarshall
approved these changes
Apr 3, 2026
Contributor
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
Code LGTM. The tricky and most resource-intensive part of these migrations is visual regression testing. The code looks great, and I’m 80% to 90% confident this won’t introduce visual regressions, but without validating against visual assets, we can’t be fully certain.
I’ll leave that to your discretion.
david0xd
approved these changes
Apr 7, 2026
Member
Author
|
UI looks in order Screen.Recording.2026-04-07.at.5.28.11.PM.mov |
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
|
Contributor
Builds ready [0b1ccbc]
⚡ Performance Benchmarks (Total: 🟢 7 pass · 🟡 12 warn · 🔴 0 fail)
Bundle size diffs
|
metamaskbot
added
the
release-13.27.0
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Migrates deprecated
Box,Text,Icon,IconName,Button,ButtonVariant, andButtonSizeimports from the internalui/components/component-libraryto@metamask/design-system-reactin the accounts-team-owned identity components.Why: The component-library versions are all marked
@deprecatedand will be removed in a future release. This is PR 2 of a planned series to eliminate deprecated imports across all accounts-team-owned files.Files changed (4):
ui/components/app/identity/backup-and-sync-toggle/backup-and-sync-toggle.tsxui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsxui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsxui/components/app/modals/identity/confirm-turn-on-backup-and-sync-modal/confirm-turn-on-backup-and-sync-modal.tsxKey API migration notes:
Box:display={Display.Flex}removed;flexDirection={BoxFlexDirection.Row}used instead (DSR Box auto-appliesdisplay:flexwhenflexDirectionis set).Box as="img"converted to a plain<img>element (DSR Box does not support theaspolymorphic prop).Text: camelCase enum variants (bodyMd,textAlternative) updated to PascalCase (BodyMd,TextAlternative).bodyMdMediumreplaced withBodyMd+fontWeight={FontWeight.Medium}.as="a"/as="div"usages replaced with theasChildpattern (Radix Slot). Spacing props onTextmoved to a wrappingBox.Button: import source updated;width={BlockSize.Half}replaced withclassName="w-1/2".Modal*components (Modal,ModalOverlay,ModalContent,ModalHeader,ModalBody,ModalFooter) remain imported fromcomponent-library— they are not yet available in@metamask/design-system-react.Changelog
CHANGELOG entry: null
Related issues
Fixes:
Pre-merge author checklist
Pre-merge reviewer checklist
Made with Cursor
Note
Low Risk
Pure UI refactor swapping component imports and prop APIs; main risk is small visual/layout regressions (spacing, link rendering) rather than behavioral changes.
Overview
Refactors the Backup & Sync settings UI and related modals to replace deprecated
component-libraryBox/Text/Icon/Buttonusage with@metamask/design-system-reactequivalents.This updates layout and typography props (e.g.,
BoxFlexDirection/BoxJustifyContent,TextVariant/TextColorcasing,FontWeight), switches variousText as=...usages to theasChildpattern, and replaces a polymorphicBox as="img"with a plain<img>plus utility classes (e.g.,w-1/2,rounded-md).Reviewed by Cursor Bugbot for commit 0b1ccbc. Bugbot is set up for automated code reviews on this repo. Configure here.