refactor(identity): migrate deprecated component-library imports to @metamask/design-system-react (#41448)

## **Description**

Migrates deprecated `Box`, `Text`, `Icon`, `IconName`, `Button`,
`ButtonVariant`, and `ButtonSize` imports from the internal
`ui/components/component-library` to `@metamask/design-system-react` in
the accounts-team-owned identity components.

**Why:** The component-library versions are all marked `@deprecated` and
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.tsx`
-
`ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx`
-
`ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsx`
-
`ui/components/app/modals/identity/confirm-turn-on-backup-and-sync-modal/confirm-turn-on-backup-and-sync-modal.tsx`

**Key API migration notes:**
- `Box`: `display={Display.Flex}` removed;
`flexDirection={BoxFlexDirection.Row}` used instead (DSR Box
auto-applies `display:flex` when `flexDirection` is set). `Box as="img"`
converted to a plain `<img>` element (DSR Box does not support the `as`
polymorphic prop).
- `Text`: camelCase enum variants (`bodyMd`, `textAlternative`) updated
to PascalCase (`BodyMd`, `TextAlternative`). `bodyMdMedium` replaced
with `BodyMd` + `fontWeight={FontWeight.Medium}`. `as="a"` / `as="div"`
usages replaced with the `asChild` pattern (Radix Slot). Spacing props
on `Text` moved to a wrapping `Box`.
- `Button`: import source updated; `width={BlockSize.Half}` replaced
with `className="w-1/2"`.
- `Modal*` components (`Modal`, `ModalOverlay`, `ModalContent`,
`ModalHeader`, `ModalBody`, `ModalFooter`) remain imported from
`component-library` — they are not yet available in
`@metamask/design-system-react`.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

<!--
## **Manual testing steps**

1. Go to this page...
2.
3.
-->

<!--
## **Screenshots/Recordings**

### **Before**

### **After**
-->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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.

Made with [Cursor](https://cursor.com)

<!-- CURSOR_SUMMARY -->
---

> [!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-library` `Box`/`Text`/`Icon`/`Button` usage with
`@metamask/design-system-react` equivalents.
> 
> This updates layout and typography props (e.g.,
`BoxFlexDirection`/`BoxJustifyContent`, `TextVariant`/`TextColor`
casing, `FontWeight`), switches various `Text as=...` usages to the
`asChild` pattern, and replaces a polymorphic `Box as="img"` with a
plain `<img>` plus utility classes (e.g., `w-1/2`, `rounded-md`).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
0b1ccbc. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: gantunesr

ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx

@@ -1,22 +1,26 @@
 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,
   selectIsContactSyncingEnabled,
   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>
@@ -191,17 +195,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

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,
@@ -199,12 +201,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>
 
@@ -227,32 +229,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>

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,26 +64,20 @@ export function ConfirmTurnOnBackupAndSyncModal() {
       data-testid={confirmTurnOnBackupAndSyncModalTestIds.modal}
     >
       <ModalOverlay />
-      <ModalContent
-        modalDialogProps={{
-          display: Display.Flex,
-          flexDirection: FlexDirection.Column,
-        }}
-      >
+      <ModalContent>
         <ModalHeader
           paddingBottom={4}
           paddingRight={4}
           paddingLeft={4}
           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