Update Text import paths: /ui (#20076)

* Updating Text import paths in ui folder

* Updating snapshot

test/e2e/tests/custom-token-add-approve.spec.js

@@ -159,7 +159,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         const defaultSpendingCap = await driver.findElement({
           text: '7 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
 
         assert.equal(
@@ -249,7 +249,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         let spendingCap = await driver.findElement({
           text: '5 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
 
         assert.equal(
@@ -305,7 +305,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         spendingCap = await driver.findElement({
           text: '9 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
         assert.equal(
           await spendingCap.getText(),
@@ -393,7 +393,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         const maxSpendingCap = await driver.findElement({
           text: '10 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
 
         assert.equal(

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -24,9 +24,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                 class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                  for="custom-spending-cap"
-                  tag="label"
                 >
                   Custom spending cap
                 </h6>
@@ -76,18 +74,18 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           class="box custom-spending-cap__description box--flex-direction-row"
         >
           <h6
-            class="box mm-text mm-text--body-sm box--padding-top-2 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
           >
             <span>
                
               This allows the third party to spend 
-              <h6
+              <span
-                class="box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
               >
                 7
                  
                 TST
-              </h6>
+              </span>
                from your current balance.
                
             </span>

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -8,8 +8,8 @@ import { addHexPrefix } from 'ethereumjs-util';
 import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
-import { ButtonLink, Icon, IconName } from '../../component-library';
+import { ButtonLink, Icon, IconName, Text } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+
 import {
   AlignItems,
   TextAlign,
@@ -82,7 +82,7 @@ export default function CustomSpendingCap({
           <Text
             key="custom-spending-cap"
             variant={TextVariant.bodySmBold}
-            as="h6"
+            as="span"
             className="custom-spending-cap__input-value-and-token-name"
           >
             {replaceCommaToDot(inputNumber)} {tokenName}
@@ -197,7 +197,7 @@ export default function CustomSpendingCap({
         <Text
           key="tooltip-text"
           variant={TextVariant.bodySmBold}
-          as="h6"
+          as="span"
           color={TextColor.errorDefault}
         >
           <Icon name={IconName.Warning} /> {t('beCareful')}

ui/components/ui/box/box.stories.tsx

@@ -16,7 +16,7 @@ import {
   FlexWrap,
 } from '../../../helpers/constants/design-system';
 
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 import Box from './box';
 

ui/components/ui/callout/callout.js

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { Severity, TextColor } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
-import { ButtonIcon, IconName, IconSize } from '../../component-library';
+import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 
 /**
  * @deprecated `<Callout />` has been deprecated in favor of the `<BannerAlert />`

ui/components/ui/callout/callout.stories.js

@@ -4,8 +4,8 @@ import {
   SEVERITIES,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../box';
+
-import { Text } from '../../component-library/text/deprecated';
+import { Text, Box } from '../../component-library';
 import Callout from './callout';
 
 export default {

ui/components/ui/deprecated-test-networks/deprecated-test-networks.js

@@ -12,8 +12,7 @@ import Box from '../box/box';
 import ActionableMessage from '../actionable-message/actionable-message';
 import { getCurrentChainId } from '../../../selectors';
 import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
-import { Icon, IconName, IconSize } from '../../component-library';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 
 export default function DeprecatedTestNetworks() {
   const currentChainID = useSelector(getCurrentChainId);

ui/components/ui/editable-label/editable-label.js

@@ -8,9 +8,13 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
-import { ButtonIcon, FormTextField, IconName } from '../../component-library';
+import {
-import { Text } from '../../component-library/text/deprecated';
+  ButtonIcon,
-import Box from '../box/box';
+  FormTextField,
+  IconName,
+  Text,
+  Box,
+} from '../../component-library';
 
 export default class EditableLabel extends Component {
   static propTypes = {

ui/components/ui/export-text-container/export-text-container.component.js

@@ -6,14 +6,12 @@ import {
   AlignItems,
   BorderColor,
   BorderRadius,
-  DISPLAY,
+  Display,
-  FLEX_DIRECTION,
+  FlexDirection,
   JustifyContent,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../box/box';
+import { ButtonSecondary, Text, Box } from '../../component-library';
-import { ButtonSecondary } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 
 function ExportTextContainer({ text = '', onClickCopy = null }) {
   const ONE_MINUTE = 1000 * 60;
@@ -22,9 +20,9 @@ function ExportTextContainer({ text = '', onClickCopy = null }) {
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       justifyContent={JustifyContent.center}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
       alignItems={AlignItems.center}
       borderColor={BorderColor.borderDefault}
       borderRadius={BorderRadius.MD}
@@ -32,8 +30,8 @@ function ExportTextContainer({ text = '', onClickCopy = null }) {
       gap={4}
     >
       <Text
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
-        justifyContent={JustifyContent.CENTER}
+        justifyContent={JustifyContent.center}
         className="notranslate"
         variant={TextVariant.bodyLgMedium}
         data-testid="srp_text"

ui/components/ui/form-field/form-field.js

@@ -12,8 +12,7 @@ import {
 
 import NumericInput from '../numeric-input/numeric-input.component';
 import InfoTooltip from '../info-tooltip/info-tooltip';
-import { Box } from '../../component-library';
+import { Text, Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 
 /**
  * @deprecated The `<FormField />` component has been deprecated in favor of the new `<FormTextField>` component from the component-library.
@@ -70,10 +69,8 @@ export default function FormField({
             {TitleTextCustomComponent ||
               (titleText && (
                 <Text
-                  tag="label"
-                  htmlFor={id}
-                  variant={TextVariant.bodySmBold}
                   as="h6"
+                  variant={TextVariant.bodySmBold}
                   display={Display.InlineBlock}
                 >
                   {titleText}
@@ -82,9 +79,8 @@ export default function FormField({
             {TitleUnitCustomComponent ||
               (titleUnit && (
                 <Text
-                  tag={TextVariant.bodySm}
-                  variant={TextVariant.bodySm}
                   as="h6"
+                  variant={TextVariant.bodySm}
                   color={TextColor.textAlternative}
                   display={Display.InlineBlock}
                 >

ui/components/ui/form-field/form-field.stories.js

@@ -3,8 +3,7 @@
 import React, { useState } from 'react';
 import Tooltip from '../tooltip';
 
-import { Icon, IconName } from '../../component-library';
+import { Icon, IconName, Text } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import { AlignItems } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import FormField from '.';

ui/components/ui/icon-button/icon-button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 import { TextVariant } from '../../../helpers/constants/design-system';
 import Tooltip from '../tooltip/tooltip';
 

ui/components/ui/logo/logo.stories.js

@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { BackgroundColor } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library/text/deprecated';
+import { Text, Box } from '../../component-library';
 
 import Card from '../card';
-import Box from '../box';
 
 import LogoLedger from './logo-ledger';
 import LogoQRBased from './logo-qr-based';
@@ -16,7 +15,6 @@ import README from './README.mdx';
 
 export default {
   title: 'Components/UI/Logo',
-
   parameters: {
     docs: {
       page: README,

ui/components/ui/menu/menu-item.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, IconSize } from '../../component-library';
+import { Icon, IconSize, Text } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import { TextVariant } from '../../../helpers/constants/design-system';
 
 const MenuItem = React.forwardRef(

ui/components/ui/metafox-logo/metafox-logo.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 import MetaFoxLogo from '.';
 
 export default {

ui/components/ui/new-network-info/new-network-info.js

@@ -25,8 +25,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Chip from '../chip/chip';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
-import { Icon, IconName } from '../../component-library';
+import { Icon, IconName, Text } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 import { getNetworkLabelKey } from '../../../helpers/utils/i18n-helper';
 
 const NewNetworkInfo = () => {

ui/components/ui/nft-info/nft-info.js

@@ -1,27 +1,25 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
-import Box from '../box';
 import {
   BackgroundColor,
-  DISPLAY,
+  Display,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import Identicon from '../identicon';
-import Button from '../button';
+import { Text, Button, Box, BUTTON_VARIANT } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 
 export default function NftInfo({ assetName, tokenAddress, tokenId }) {
   const t = useContext(I18nContext);
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       className="nft-info"
       backgroundColor={BackgroundColor.backgroundAlternative}
     >
-      <Box display={DISPLAY.FLEX} className="nft-info__content">
+      <Box display={Display.Flex} className="nft-info__content">
         <Box margin={4}>
           <Identicon address={tokenAddress} diameter={24} />
         </Box>
@@ -40,15 +38,8 @@ export default function NftInfo({ assetName, tokenAddress, tokenId }) {
         </Box>
       </Box>
       <Box marginTop={4} marginRight={4}>
-        <Button className="nft-info__button" type="link">
+        <Button className="nft-info__button" variant={BUTTON_VARIANT.LINK}>
-          <Text
-            variant={TextVariant.bodySm}
-            as="h6"
-            marginTop={0}
-            color={TextColor.primaryDefault}
-          >
           {t('view')}
-          </Text>
         </Button>
       </Box>
     </Box>

ui/components/ui/numeric-input/numeric-input.component.js

@@ -6,7 +6,7 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 export default function NumericInput({
   detailText = '',

ui/components/ui/popover/popover.component.js

@@ -19,8 +19,13 @@ import {
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
 
-import { ButtonIcon, Icon, IconName, IconSize } from '../../component-library';
+import {
-import { Text } from '../../component-library/text/deprecated';
+  ButtonIcon,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';
 
 const defaultHeaderProps = {
   padding: [6, 4, 4],

ui/components/ui/radio-group/radio-group.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
 import { Color, TextVariant } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 function Connector({ isFirst, isLast }) {
   if (isFirst) {

ui/components/ui/review-spending-cap/review-spending-cap.js

@@ -1,14 +1,20 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
-import Box from '../box';
 import Tooltip from '../tooltip';
-import { ButtonLink, Icon, IconName, IconSize } from '../../component-library';
+import {
-import { Text } from '../../component-library/text/deprecated';
+  ButtonLink,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+  Box,
+} from '../../component-library';
+
 import {
   AlignItems,
-  DISPLAY,
+  Display,
-  FLEX_DIRECTION,
+  FlexDirection,
   TextVariant,
   TextAlign,
   Size,
@@ -37,30 +43,30 @@ export default function ReviewSpendingCap({
       paddingTop={4}
       paddingRight={4}
       paddingLeft={4}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexStart}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
       backgroundColor={BackgroundColor.backgroundAlternative}
       gap={1}
     >
       <Box
-        flexDirection={FLEX_DIRECTION.ROW}
+        flexDirection={FlexDirection.Row}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         className="review-spending-cap__heading"
       >
         <Box
-          flexDirection={FLEX_DIRECTION.ROW}
+          flexDirection={FlexDirection.Row}
           className="review-spending-cap__heading-title"
         >
           <Text
             variant={TextVariant.bodySmBold}
             as="h6"
-            display={DISPLAY.INLINE_BLOCK}
+            display={Display.InlineBlock}
           >
             {t('dappRequestedSpendingCap')}
           </Text>
-          <Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}>
+          <Box marginLeft={2} display={Display.InlineBlock}>
             <Tooltip
               interactive
               position="top"

ui/components/ui/slider/slider.component.js

@@ -9,7 +9,7 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import InfoTooltip from '../info-tooltip/info-tooltip';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 const styles = {
   root: {

ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js

@@ -14,8 +14,7 @@ import {
   FLEX_WRAP,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
-import { Icon, IconName, IconSize } from '../../../../component-library';
+import { Icon, IconName, IconSize, Text } from '../../../../component-library';
-import { Text } from '../../../../component-library/text/deprecated';
 
 export const DropdownTab = ({
   activeClassName,

ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap

@@ -407,7 +407,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
           />
         </svg>
         <p
-          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text callout__content mm-text--body-md mm-box--color-text-default"
         >
           <span>
             This custom network is not recognized
@@ -438,7 +438,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
           />
         </svg>
         <p
-          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text callout__content mm-text--body-md mm-box--color-text-default"
         >
           <span>
             <span>

ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap

@@ -241,7 +241,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           />
         </svg>
         <p
-          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text callout__content mm-text--body-md mm-box--color-text-default"
         >
           <span>
             Switching networks will cancel all pending confirmations

ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap

@@ -49,8 +49,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                tag="label"
               >
                 Network name
               </h6>
@@ -80,8 +79,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                tag="label"
               >
                 New RPC URL
               </h6>
@@ -111,8 +109,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                tag="label"
               >
                 Chain ID
               </h6>
@@ -167,8 +164,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                tag="label"
               >
                 Currency symbol
               </h6>
@@ -198,14 +194,12 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                tag="label"
               >
                 Block explorer URL
               </h6>
               <h6
-                class="box mm-text mm-text--body-sm box--display-inline-block box--flex-direction-row box--color-text-alternative"
+                class="mm-box mm-text mm-text--body-sm mm-box--display-inline-block mm-box--color-text-alternative"
-                tag="body-sm"
               >
                 (Optional)
               </h6>

ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap

@@ -58,8 +58,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
                 class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                  tag="label"
                 >
                   New password (8 characters min)
                 </h6>
@@ -105,8 +104,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
                 class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                  tag="label"
                 >
                   Confirm password
                 </h6>

ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -365,9 +365,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
                     class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
                   >
                     <h6
-                      class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                      class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                      for="custom-spending-cap"
-                      tag="label"
                     >
                       Custom spending cap
                     </h6>
@@ -417,18 +415,18 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
               class="box custom-spending-cap__description box--flex-direction-row"
             >
               <h6
-                class="box mm-text mm-text--body-sm box--padding-top-2 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
               >
                 <span>
                    
                   This allows the third party to spend 
-                  <h6
+                  <span
-                    class="box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
+                    class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
                   >
                     7
                      
                     TST
-                  </h6>
+                  </span>
                    from your current balance.
                    
                 </span>