Updating Text import paths in ui folder

MetaMask · Jul 18, 2023 · 23696d1 · 23696d1
1 parent 8f8613a
commit 23696d1
Show file tree

Hide file tree

Showing 28 changed files with 83 additions and 103 deletions.
diff --git a/test/e2e/tests/custom-token-add-approve.spec.js b/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(

diff --git a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap b/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"
-                  for="custom-spending-cap"
-                  tag="label"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                 >
                   Custom spending cap
                 </h6>
@@ -76,13 +74,13 @@ 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
-                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
                  

diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/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 { Text } from '../../component-library/text/deprecated';
+import { ButtonLink, Icon, IconName, Text } from '../../component-library';
+
 import {
   AlignItems,
   TextAlign,

diff --git a/ui/components/ui/box/box.stories.tsx b/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';
 

diff --git a/ui/components/ui/callout/callout.js b/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 { Text } from '../../component-library/text/deprecated';
+import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';
 
 /**
  * @deprecated `<Callout />` has been deprecated in favor of the `<BannerAlert />`

diff --git a/ui/components/ui/callout/callout.stories.js b/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 {

diff --git a/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js b/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 { Text } from '../../component-library/text/deprecated';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
 
 export default function DeprecatedTestNetworks() {
   const currentChainID = useSelector(getCurrentChainId);

diff --git a/ui/components/ui/editable-label/editable-label.js b/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 { Text } from '../../component-library/text/deprecated';
-import Box from '../box/box';
+import {
+  ButtonIcon,
+  FormTextField,
+  IconName,
+  Text,
+  Box,
+} from '../../component-library';
 
 export default class EditableLabel extends Component {
   static propTypes = {

diff --git a/ui/components/ui/export-text-container/export-text-container.component.js b/ui/components/ui/export-text-container/export-text-container.component.js
@@ -6,14 +6,12 @@ import {
   AlignItems,
   BorderColor,
   BorderRadius,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   JustifyContent,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../box/box';
-import { ButtonSecondary } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonSecondary, Text, Box } from '../../component-library';
 
 function ExportTextContainer({ text = '', onClickCopy = null }) {
   const ONE_MINUTE = 1000 * 60;
@@ -22,18 +20,18 @@ 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}
       padding={4}
       gap={4}
     >
       <Text
-        display={DISPLAY.FLEX}
-        justifyContent={JustifyContent.CENTER}
+        display={Display.Flex}
+        justifyContent={JustifyContent.center}
         className="notranslate"
         variant={TextVariant.bodyLgMedium}
         data-testid="srp_text"

diff --git a/ui/components/ui/form-field/form-field.js b/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 } from '../../component-library/text/deprecated';
+import { Text, Box } from '../../component-library';
 
 /**
  * @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}
                 >

diff --git a/ui/components/ui/form-field/form-field.stories.js b/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 { Text } from '../../component-library/text/deprecated';
+import { Icon, IconName, Text } from '../../component-library';
 import { AlignItems } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import FormField from '.';

diff --git a/ui/components/ui/icon-button/icon-button.js b/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';
 

diff --git a/ui/components/ui/logo/logo.stories.js b/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,

diff --git a/ui/components/ui/menu/menu-item.js b/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 { Text } from '../../component-library/text/deprecated';
+import { Icon, IconSize, Text } from '../../component-library';
 import { TextVariant } from '../../../helpers/constants/design-system';
 
 const MenuItem = React.forwardRef(

diff --git a/ui/components/ui/metafox-logo/metafox-logo.stories.js b/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 {

diff --git a/ui/components/ui/new-network-info/new-network-info.js b/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 { Text } from '../../component-library/text/deprecated';
+import { Icon, IconName, Text } from '../../component-library';
 import { getNetworkLabelKey } from '../../../helpers/utils/i18n-helper';
 
 const NewNetworkInfo = () => {

diff --git a/ui/components/ui/nft-info/nft-info.js b/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 } from '../../component-library/text/deprecated';
+import { Text, Button, Box, BUTTON_VARIANT } from '../../component-library';
 
 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">
-          <Text
-            variant={TextVariant.bodySm}
-            as="h6"
-            marginTop={0}
-            color={TextColor.primaryDefault}
-          >
-            {t('view')}
-          </Text>
+        <Button className="nft-info__button" variant={BUTTON_VARIANT.LINK}>
+          {t('view')}
         </Button>
       </Box>
     </Box>

diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/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 = '',

diff --git a/ui/components/ui/popover/popover.component.js b/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 { Text } from '../../component-library/text/deprecated';
+import {
+  ButtonIcon,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';
 
 const defaultHeaderProps = {
   padding: [6, 4, 4],

diff --git a/ui/components/ui/radio-group/radio-group.component.js b/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) {

diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/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 { Text } from '../../component-library/text/deprecated';
+import {
+  ButtonLink,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+  Box,
+} from '../../component-library';
+
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  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}
-        display={DISPLAY.FLEX}
+        flexDirection={FlexDirection.Row}
+        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"