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

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