From a0fc958aaae4c2763e6e26a75c9570ce5e84d4ab Mon Sep 17 00:00:00 2001
From: gantunesr <17601467+gantunesr@users.noreply.github.com>
Date: Thu, 2 Apr 2026 11:09:15 -0300
Subject: [PATCH] refactor(identity): migrate deprecated component-library
 imports to @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
---
 .../backup-and-sync-features-toggles.tsx      |  49 ++++----
 .../backup-and-sync-toggle.tsx                |  69 ++++++-----
 .../confirm-turn-on-backup-and-sync-modal.tsx |  66 ++++------
 .../turn-on-backup-and-sync-modal.tsx         | 117 ++++++++++--------
 4 files changed, 154 insertions(+), 147 deletions(-)

diff --git a/ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx b/ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx
index b6d93d7863ba..bb2c76c3e601 100644
--- a/ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx
+++ b/ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx
@@ -1,6 +1,18 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
+import {
+  Box,
+  BoxAlignItems,
+  BoxFlexDirection,
+  BoxJustifyContent,
+  FontWeight,
+  Icon,
+  IconName,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   selectIsAccountSyncingEnabled,
@@ -8,15 +20,7 @@ import {
   selectIsBackupAndSyncEnabled,
   selectIsBackupAndSyncUpdateLoading,
 } from '../../../../selectors/identity/backup-and-sync';
-import { Box, Icon, IconName, Text } from '../../../component-library';
 import ToggleButton from '../../../ui/toggle-button';
-import {
-  AlignItems,
-  Display,
-  JustifyContent,
-  TextColor,
-  TextVariant,
-} from '../../../../helpers/constants/design-system';
 import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
 import { useBackupAndSync } from '../../../../hooks/identity/useBackupAndSync/useBackupAndSync';
 import { MetaMetricsContext } from '../../../../contexts/metametrics';
@@ -107,15 +111,15 @@ const FeatureToggle = ({
 
   return (
     <Box
-      display={Display.Flex}
-      justifyContent={JustifyContent.spaceBetween}
-      alignItems={AlignItems.flexStart}
+      flexDirection={BoxFlexDirection.Row}
+      justifyContent={BoxJustifyContent.Between}
+      alignItems={BoxAlignItems.Start}
       marginBottom={4}
       id={`backup-and-sync-features-toggles-${section.id}`}
     >
-      <Box display={Display.Flex} gap={4}>
+      <Box flexDirection={BoxFlexDirection.Row} gap={4}>
         <Icon name={section.iconName} />
-        <Text variant={TextVariant.bodyMdMedium}>
+        <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
           {t(section.titleI18NKey)}
         </Text>
       </Box>
@@ -189,17 +193,18 @@ export const BackupAndSyncFeaturesToggles = () => {
       className="privacy-settings__setting__wrapper"
       data-testid={backupAndSyncFeaturesTogglesTestIds.container}
     >
-      <Text variant={TextVariant.bodyMdMedium}>
+      <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
         {t('backupAndSyncManageWhatYouSync')}
       </Text>
-      <Text
-        variant={TextVariant.bodyMd}
-        color={TextColor.textAlternative}
-        as="div"
-        marginBottom={4}
-      >
-        {t('backupAndSyncManageWhatYouSyncDescription')}
-      </Text>
+      <Box marginBottom={4}>
+        <Text
+          variant={TextVariant.BodyMd}
+          color={TextColor.TextAlternative}
+          asChild
+        >
+          <div>{t('backupAndSyncManageWhatYouSyncDescription')}</div>
+        </Text>
+      </Box>
 
       {backupAndSyncFeaturesTogglesSections.map((section) => (
         <FeatureToggle
diff --git a/ui/components/app/identity/backup-and-sync-toggle/backup-and-sync-toggle.tsx b/ui/components/app/identity/backup-and-sync-toggle/backup-and-sync-toggle.tsx
index be505b984b95..a592355afb9d 100644
--- a/ui/components/app/identity/backup-and-sync-toggle/backup-and-sync-toggle.tsx
+++ b/ui/components/app/identity/backup-and-sync-toggle/backup-and-sync-toggle.tsx
@@ -1,6 +1,16 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
+import {
+  Box,
+  BoxAlignItems,
+  BoxFlexDirection,
+  BoxJustifyContent,
+  FontWeight,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../../contexts/metametrics';
 import { useBackupAndSync } from '../../../../hooks/identity/useBackupAndSync';
@@ -15,15 +25,7 @@ import {
 } from '../../../../selectors/identity/backup-and-sync';
 import { selectIsMetamaskNotificationsEnabled } from '../../../../selectors/metamask-notifications/metamask-notifications';
 import { showModal } from '../../../../store/actions';
-import { Box, Text } from '../../../component-library';
 import ToggleButton from '../../../ui/toggle-button';
-import {
-  AlignItems,
-  Display,
-  JustifyContent,
-  TextColor,
-  TextVariant,
-} from '../../../../helpers/constants/design-system';
 import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
 import {
   getExternalServicesOnboardingToggleState,
@@ -197,12 +199,12 @@ export const BackupAndSyncToggle = () => {
       data-testid={backupAndSyncToggleTestIds.container}
     >
       <Box
-        display={Display.Flex}
-        justifyContent={JustifyContent.spaceBetween}
-        alignItems={AlignItems.flexStart}
+        flexDirection={BoxFlexDirection.Row}
+        justifyContent={BoxJustifyContent.Between}
+        alignItems={BoxAlignItems.Start}
         marginBottom={1}
       >
-        <Text variant={TextVariant.bodyMdMedium}>
+        <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
           {t('backupAndSyncEnable')}
         </Text>
 
@@ -225,32 +227,33 @@ export const BackupAndSyncToggle = () => {
       </Box>
       <div className="privacy-settings__setting__description">
         <Text
-          variant={TextVariant.bodyMd}
-          color={TextColor.textAlternative}
-          as="div"
+          variant={TextVariant.BodyMd}
+          color={TextColor.TextAlternative}
+          asChild
         >
-          {t('backupAndSyncEnableDescription', [
-            <Text
-              as="a"
-              variant={TextVariant.bodyMd}
-              href={ZENDESK_URLS.PROFILE_PRIVACY}
-              target="_blank"
-              rel="noopener noreferrer"
-              key="privacy-link"
-              color={TextColor.infoDefault}
-            >
-              {t('backupAndSyncPrivacyLink')}
-            </Text>,
-          ])}
+          <div>
+            {t('backupAndSyncEnableDescription', [
+              <Text
+                asChild
+                variant={TextVariant.BodyMd}
+                key="privacy-link"
+                color={TextColor.InfoDefault}
+              >
+                <a
+                  href={ZENDESK_URLS.PROFILE_PRIVACY}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('backupAndSyncPrivacyLink')}
+                </a>
+              </Text>,
+            ])}
+          </div>
         </Text>
 
         {error && (
           <Box marginTop={4} paddingBottom={4}>
-            <Text
-              as="p"
-              color={TextColor.errorDefault}
-              variant={TextVariant.bodySm}
-            >
+            <Text color={TextColor.ErrorDefault} variant={TextVariant.BodySm}>
               {t('notificationsSettingsBoxError')}
             </Text>
           </Box>
diff --git a/ui/components/app/modals/identity/confirm-turn-on-backup-and-sync-modal/confirm-turn-on-backup-and-sync-modal.tsx b/ui/components/app/modals/identity/confirm-turn-on-backup-and-sync-modal/confirm-turn-on-backup-and-sync-modal.tsx
index 52382f7c46ab..97310593fd88 100644
--- a/ui/components/app/modals/identity/confirm-turn-on-backup-and-sync-modal/confirm-turn-on-backup-and-sync-modal.tsx
+++ b/ui/components/app/modals/identity/confirm-turn-on-backup-and-sync-modal/confirm-turn-on-backup-and-sync-modal.tsx
@@ -1,26 +1,25 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useModalProps } from '../../../../../hooks/useModalProps';
 import {
+  Box,
+  BoxAlignItems,
+  BoxFlexDirection,
+  BoxJustifyContent,
+  Button,
   ButtonSize,
+  ButtonVariant,
+  FontWeight,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react';
+import { useModalProps } from '../../../../../hooks/useModalProps';
+import {
   Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
-  Box,
-  Text,
   ModalFooter,
-  Button,
-  ButtonVariant,
 } from '../../../../component-library';
-import {
-  AlignItems,
-  BlockSize,
-  Display,
-  FlexDirection,
-  JustifyContent,
-  TextVariant,
-} from '../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { toggleExternalServices } from '../../../../../store/actions';
 import { onboardingToggleBasicFunctionalityOn } from '../../../../../ducks/app/app';
@@ -65,12 +64,7 @@ export function ConfirmTurnOnBackupAndSyncModal() {
       data-testid={confirmTurnOnBackupAndSyncModalTestIds.modal}
     >
       <ModalOverlay />
-      <ModalContent
-        modalDialogProps={{
-          display: Display.Flex,
-          flexDirection: FlexDirection.Column,
-        }}
-      >
+      <ModalContent>
         <ModalHeader
           paddingBottom={4}
           paddingRight={4}
@@ -78,13 +72,12 @@ export function ConfirmTurnOnBackupAndSyncModal() {
           onClose={handleHideModal}
         >
           <Box
-            display={Display.Flex}
-            flexDirection={FlexDirection.Column}
-            alignItems={AlignItems.center}
-            justifyContent={JustifyContent.center}
+            flexDirection={BoxFlexDirection.Column}
+            alignItems={BoxAlignItems.Center}
+            justifyContent={BoxJustifyContent.Center}
             gap={4}
           >
-            <Text variant={TextVariant.headingSm}>
+            <Text variant={TextVariant.HeadingSm}>
               {t('backupAndSyncEnable')}
             </Text>
           </Box>
@@ -94,32 +87,27 @@ export function ConfirmTurnOnBackupAndSyncModal() {
           marginLeft={4}
           marginRight={4}
           marginBottom={4}
-          display={Display.Flex}
+          flexDirection={BoxFlexDirection.Column}
           gap={4}
-          flexDirection={FlexDirection.Column}
         >
-          <Text variant={TextVariant.bodySm}>
+          <Text variant={TextVariant.BodySm}>
             {t('backupAndSyncEnableConfirmation', [
               <Text
+                asChild
                 key="basic-functionality"
-                variant={TextVariant.bodySmBold}
-                as="span"
+                variant={TextVariant.BodySm}
+                fontWeight={FontWeight.Bold}
               >
-                {t('backupAndSyncBasicFunctionalityNameMention')}
+                <span>{t('backupAndSyncBasicFunctionalityNameMention')}</span>
               </Text>,
             ])}
           </Text>
         </Box>
-        <ModalFooter
-          containerProps={{
-            flexDirection: FlexDirection.Row,
-            alignItems: AlignItems.stretch,
-          }}
-        >
-          <Box display={Display.Flex} gap={4}>
+        <ModalFooter>
+          <Box flexDirection={BoxFlexDirection.Row} gap={4}>
             <Button
               size={ButtonSize.Lg}
-              width={BlockSize.Half}
+              className="w-1/2"
               variant={ButtonVariant.Secondary}
               data-testid={confirmTurnOnBackupAndSyncModalTestIds.cancelButton}
               onClick={handleHideModal}
@@ -128,7 +116,7 @@ export function ConfirmTurnOnBackupAndSyncModal() {
             </Button>
             <Button
               size={ButtonSize.Lg}
-              width={BlockSize.Half}
+              className="w-1/2"
               variant={ButtonVariant.Primary}
               data-testid={confirmTurnOnBackupAndSyncModalTestIds.toggleButton}
               // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31879
diff --git a/ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsx b/ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsx
index 82284638193e..505603e05c62 100644
--- a/ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsx
+++ b/ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsx
@@ -2,6 +2,13 @@ import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
+import {
+  Box,
+  FontWeight,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react';
 import { useModalProps } from '../../../../../hooks/useModalProps';
 import {
   selectIsBackupAndSyncEnabled,
@@ -10,23 +17,17 @@ import {
 import { BACKUPANDSYNC_ROUTE } from '../../../../../helpers/constants/routes';
 import ZENDESK_URLS from '../../../../../helpers/constants/zendesk-url';
 import {
-  Box,
+  AlignItems,
+  FlexDirection,
+} from '../../../../../helpers/constants/design-system';
+import {
   Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
   ModalBody,
-  Text,
   ModalFooter,
 } from '../../../../component-library';
-import {
-  AlignItems,
-  BlockSize,
-  BorderRadius,
-  FlexDirection,
-  TextColor,
-  TextVariant,
-} from '../../../../../helpers/constants/design-system';
 import { useBackupAndSync } from '../../../../../hooks/identity/useBackupAndSync';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { getUseExternalServices } from '../../../../../selectors';
@@ -119,49 +120,59 @@ export function TurnOnBackupAndSyncModal() {
           {t('backupAndSyncEnable')}
         </ModalHeader>
         <ModalBody>
-          <Box
-            as="img"
+          <img
             src="./images/turn-on-backup-and-sync.png"
-            width={BlockSize.Full}
-            borderRadius={BorderRadius.MD}
-            marginBottom={4}
+            className="w-full rounded-md mb-4"
+            alt=""
           />
-          <Text
-            variant={TextVariant.bodySm}
-            color={TextColor.textAlternative}
-            marginBottom={4}
-            as="div"
-          >
-            {t('backupAndSyncEnableDescription', [
-              <Text
-                as="a"
-                variant={TextVariant.bodySm}
-                href={ZENDESK_URLS.PROFILE_PRIVACY}
-                target="_blank"
-                rel="noopener noreferrer"
-                key="privacy-link"
-                color={TextColor.infoDefault}
-              >
-                {t('backupAndSyncPrivacyLink')}
-              </Text>,
-            ])}
-          </Text>
-          <Text
-            variant={TextVariant.bodySm}
-            color={TextColor.textAlternative}
-            marginBottom={4}
-            as="div"
-          >
-            {t('backupAndSyncEnableDescriptionUpdatePreferences', [
-              <Text
-                as="span"
-                key="backup-and-sync-enable-preferences"
-                variant={TextVariant.bodySmBold}
-              >
-                {t('backupAndSyncEnableDescriptionUpdatePreferencesPath')}
-              </Text>,
-            ])}
-          </Text>
+          <Box marginBottom={4}>
+            <Text
+              variant={TextVariant.BodySm}
+              color={TextColor.TextAlternative}
+              asChild
+            >
+              <div>
+                {t('backupAndSyncEnableDescription', [
+                  <Text
+                    asChild
+                    variant={TextVariant.BodySm}
+                    key="privacy-link"
+                    color={TextColor.InfoDefault}
+                  >
+                    <a
+                      href={ZENDESK_URLS.PROFILE_PRIVACY}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('backupAndSyncPrivacyLink')}
+                    </a>
+                  </Text>,
+                ])}
+              </div>
+            </Text>
+          </Box>
+          <Box marginBottom={4}>
+            <Text
+              variant={TextVariant.BodySm}
+              color={TextColor.TextAlternative}
+              asChild
+            >
+              <div>
+                {t('backupAndSyncEnableDescriptionUpdatePreferences', [
+                  <Text
+                    asChild
+                    key="backup-and-sync-enable-preferences"
+                    variant={TextVariant.BodySm}
+                    fontWeight={FontWeight.Bold}
+                  >
+                    <span>
+                      {t('backupAndSyncEnableDescriptionUpdatePreferencesPath')}
+                    </span>
+                  </Text>,
+                ])}
+              </div>
+            </Text>
+          </Box>
         </ModalBody>
         <ModalFooter
           paddingTop={4}
@@ -180,8 +191,8 @@ export function TurnOnBackupAndSyncModal() {
           }}
         />
         {error && (
-          <Box paddingLeft={4} paddingRight={4}>
-            <Text as="p" color={TextColor.errorDefault} paddingTop={4}>
+          <Box paddingLeft={4} paddingRight={4} paddingTop={4}>
+            <Text color={TextColor.ErrorDefault}>
               {t('notificationsSettingsBoxError')}
             </Text>
           </Box>