From 74cc312cb1e1810f0f0b4cbc1d688efcf5329f55 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 14 Jul 2023 10:59:30 -0700 Subject: [PATCH] Updating Text and import paths (#19949) --- ui/components/app/add-network/add-network.js | 2 +- .../advanced-gas-fee-defaults.js | 2 +- .../advanced-gas-fee-gas-limit.js | 2 +- .../approve-content-card.js | 2 +- ui/components/app/beta-header/index.js | 8 +- .../cancel-speedup-popover.js | 3 +- .../configure-snap-popup.tsx | 2 +- .../app/confirm-data/confirm-data.js | 2 +- .../confirm-legacy-gas-display.js | 2 +- .../app/confirm-hexdata/confirm-hexdata.js | 2 +- .../confirm-page-container.component.js | 2 +- .../snaps/snap-insight.js | 2 +- .../app/confirm-subtitle/confirm-subtitle.js | 2 +- .../app/confirm-title/confirm-title.js | 2 +- .../confirmation-warning-modal.js | 3 +- .../recipient-group.component.js | 2 +- .../app/create-new-vault/create-new-vault.js | 2 +- .../custom-spending-cap-tooltip.js | 3 +- .../custom-spending-cap.js | 3 +- .../detected-token-address.js | 2 +- .../detected-token-aggregators.js | 3 +- .../detected-token-ignored-popover.js | 2 +- .../detected-token-values.js | 3 +- .../edit-gas-display.component.js | 2 +- .../edit-gas-fee-button.js | 3 +- .../edit-gas-fee-popover.js | 2 +- .../edit-gas-tooltip/edit-gas-tooltip.js | 2 +- .../network-statistics/network-statistics.js | 2 +- .../gas-details-item-title.js | 2 +- .../ledger-instruction-field.js | 3 +- .../loading-network-screen.component.js | 2 +- .../contract-details-modal.js | 3 +- .../customize-nonce.component.js | 2 +- .../modals/eth-sign-modal/eth-sign-modal.js | 2 +- .../export-private-key-modal.component.js | 2 +- .../hold-to-reveal-modal.js | 2 +- .../network-account-balance-header.js | 2 +- .../nft-default-image/nft-default-image.js | 2 +- ui/components/app/nft-details/nft-details.js | 3 +- .../nfts-detection-notice.js | 3 +- ui/components/app/nfts-tab/nfts-tab.js | 3 +- .../permission-cell-options.js | 3 +- .../app/permission-cell/permission-cell.js | 9 +- .../qr-hardware-sign-request/player.js | 2 +- .../recovery-phrase-reminder.js | 2 +- .../security-provider-banner-message.js | 3 +- .../set-approval-for-all-warning.js | 2 +- .../signature-request-original.component.js | 3 +- .../signature-request-siwe-message.js | 2 +- .../signature-request-siwe-tag/index.js | 2 +- .../signature-request-siwe.js | 3 +- .../signature-request-message.js | 2 +- .../signature-request.component.js | 2 +- .../app/snaps/install-error/install-error.js | 3 +- .../snap-authorship-expanded.js | 3 +- .../snap-authorship-header.js | 2 +- .../snap-connect-cell/snap-connect-cell.js | 9 +- .../snaps/snap-delineator/snap-delineator.js | 8 +- .../snap-install-warning.js | 3 +- .../snap-privacy-warning.js | 2 +- .../snap-settings-card/snap-settings-card.js | 3 +- .../snap-ui-renderer/snap-ui-renderer.js | 2 +- .../app/snaps/snap-version/snap-version.js | 2 +- ui/components/app/srp-input/srp-input.js | 2 +- .../QuizContent/QuizContent.tsx | 3 +- .../terms-of-use-popup/terms-of-use-popup.js | 2 +- .../transaction-alerts/transaction-alerts.js | 3 +- ...transaction-list-item-details.component.js | 3 +- .../app/whats-new-popup/whats-new-popup.js | 2 +- .../avatar-base/avatar-base.tsx | 4 +- .../avatar-base/avatar-base.types.ts | 2 +- .../avatar-token/avatar-token.stories.js | 9 +- .../banner-base/banner-base.js | 11 +- .../button-base/button-base.js | 6 +- .../component-library/help-text/help-text.js | 2 +- .../component-library/input/input.js | 2 +- .../component-library/label/label.js | 2 +- .../modal-header/modal-header.stories.tsx | 3 +- .../modal-header/modal-header.tsx | 10 +- .../picker-network/picker-network.js | 7 +- .../popover-header/popover-header.tsx | 3 +- .../component-library/tag-url/tag-url.js | 8 +- ui/components/component-library/tag/tag.js | 4 +- .../text-field-search/text-field-search.js | 2 +- .../component-library/text/README.mdx | 35 ++-- .../text/__snapshots__/text.test.tsx.snap | 26 +-- .../{text.test.js.snap => text.test.tsx.snap} | 15 ++ .../text/deprecated/index.js | 2 - .../text/deprecated/index.ts | 3 + .../text/deprecated/text.constants.js | 11 -- .../component-library/text/deprecated/text.js | 185 ------------------ .../{text.test.js => text.test.tsx} | 43 ++-- .../text/deprecated/text.tsx | 89 +++++++++ .../text/deprecated/text.types.ts | 146 ++++++++++++++ ui/components/component-library/text/index.ts | 6 +- .../component-library/text/text.scss | 4 +- .../component-library/text/text.stories.tsx | 81 +++++--- .../component-library/text/text.test.tsx | 33 ++-- ui/components/component-library/text/text.tsx | 113 +++++------ .../component-library/text/text.types.ts | 34 ++-- .../compliance-details/compliance-details.js | 3 +- .../compliance-modal/compliance-modal.js | 3 +- .../compliance-settings.js | 8 +- .../confirm-remove-jwt-modal.js | 2 +- .../custody-confirm-link-modal.js | 3 +- .../custody-labels/custody-labels.js | 3 +- .../interactive-replacement-token-modal.js | 2 +- ...eractive-replacement-token-notification.js | 2 +- .../jwt-dropdown/jwt-dropdown.js | 3 +- .../jwt-url-form/jwt-url-form.js | 3 +- .../note-to-trader/note-to-trader.js | 3 +- .../transaction-failed.js | 3 +- .../wrong-network-notification.js | 3 +- .../account-details-authenticate.js | 2 +- .../account-details/account-details-key.js | 2 +- .../account-details/account-details.js | 2 +- .../account-list-item-menu.js | 2 +- .../account-list-item/account-list-item.js | 2 +- .../account-list-menu/account-list-menu.js | 2 +- .../account-picker/account-picker.js | 2 +- .../multichain/global-menu/global-menu.js | 10 +- .../import-account/import-account.js | 3 +- .../multichain/import-account/json.js | 2 +- .../network-list-menu/network-list-menu.js | 2 +- .../product-tour-popover.js | 9 +- .../token-list-item/token-list-item.js | 2 +- ui/components/ui/box/box.stories.tsx | 2 +- ui/components/ui/callout/callout.js | 3 +- ui/components/ui/callout/callout.stories.js | 2 +- .../deprecated-test-networks.js | 3 +- .../ui/editable-label/editable-label.js | 8 +- .../export-text-container.component.js | 3 +- ui/components/ui/form-field/form-field.js | 3 +- .../ui/form-field/form-field.stories.js | 3 +- ui/components/ui/icon-button/icon-button.js | 2 +- ui/components/ui/logo/logo.stories.js | 2 +- ui/components/ui/menu/menu-item.js | 3 +- .../ui/metafox-logo/metafox-logo.stories.js | 2 +- .../ui/new-network-info/new-network-info.js | 3 +- ui/components/ui/nft-info/nft-info.js | 2 +- .../numeric-input/numeric-input.component.js | 2 +- ui/components/ui/popover/popover.component.js | 9 +- .../ui/radio-group/radio-group.component.js | 2 +- .../review-spending-cap.js | 9 +- ui/components/ui/slider/slider.component.js | 2 +- .../tabs/snaps/dropdown-tab/dropdown-tab.js | 3 +- ui/components/ui/tooltip/tooltip.stories.js | 1 - ui/helpers/utils/accounts.js | 4 +- ui/helpers/utils/permission.js | 2 +- .../confirm-add-suggested-nft.js | 2 +- ...irm-approve-content.component.test.js.snap | 16 +- .../confirm-approve-content.component.js | 2 +- .../confirm-deploy-contract.component.js | 2 +- .../create-account/connect-hardware/index.js | 2 +- .../desktop-pairing.component.js | 3 +- ui/pages/home/home.component.js | 2 +- .../compliance-feature-page.js | 2 +- .../confirm-add-custodian-token.js | 2 +- .../confirm-add-institutional-feature.js | 2 +- .../connect-custody/account-list.js | 2 +- ui/pages/institutional/custody/custody.js | 2 +- .../institutional-entity-done-page.js | 2 +- .../interactive-replacement-token-page.js | 2 +- ui/pages/keychains/reveal-seed.js | 2 +- .../add-snap-account-modal.tsx | 2 +- .../new-snap-account-page.tsx | 3 +- .../snap-account-detail-page/detail.tsx | 3 +- .../snap-account-detail-page/header.tsx | 2 +- .../snap-account-detail-page.tsx | 2 +- .../keyring-snaps/snap-card/snap-card.tsx | 6 +- .../pin-extension/pin-extension.js | 2 +- .../secure-your-wallet/secure-your-wallet.js | 2 +- ui/pages/onboarding-flow/welcome/welcome.js | 2 +- .../snaps/snap-install/snap-install.js | 2 +- .../snaps/snap-result/snap-result.js | 2 +- .../snaps/snap-update/snap-update.js | 2 +- .../snaps/snaps-connect/snaps-connect.js | 7 +- .../add-recipient/add-recipient.component.js | 2 +- .../send-asset-row.component.js | 2 +- .../edit-contact/edit-contact.component.js | 2 +- .../view-contact/view-contact.component.js | 2 +- .../experimental-tab.component.js | 2 +- .../networks-list/networks-list.js | 2 +- .../settings-tab/settings-tab.component.js | 2 +- ui/pages/settings/settings.component.js | 2 +- .../snaps/snaps-list-tab/snap-list-tab.js | 2 +- .../settings/snaps/view-snap/view-snap.js | 3 +- .../awaiting-signatures.js | 2 +- ui/pages/swaps/fee-card/fee-card.js | 2 +- ui/pages/swaps/import-token/import-token.js | 2 +- .../list-with-search/list-with-search.js | 3 +- .../notification-page/notification-page.js | 3 +- .../prepare-swap-page/prepare-swap-page.js | 2 +- .../quotes-loading-animation.js | 2 +- .../swaps/prepare-swap-page/review-quote.js | 7 +- .../smart-transactions-popover.js | 2 +- .../view-quote-price-difference.js | 7 +- .../slippage-buttons/slippage-buttons.js | 2 +- .../smart-transaction-status.js | 2 +- .../swaps-banner-alert/swaps-banner-alert.js | 3 +- ui/pages/token-allowance/token-allowance.js | 3 +- ui/pages/token-details/token-details-page.js | 2 +- 202 files changed, 740 insertions(+), 653 deletions(-) rename ui/components/component-library/text/deprecated/__snapshots__/{text.test.js.snap => text.test.tsx.snap} (77%) delete mode 100644 ui/components/component-library/text/deprecated/index.js create mode 100644 ui/components/component-library/text/deprecated/index.ts delete mode 100644 ui/components/component-library/text/deprecated/text.constants.js delete mode 100644 ui/components/component-library/text/deprecated/text.js rename ui/components/component-library/text/deprecated/{text.test.js => text.test.tsx} (86%) create mode 100644 ui/components/component-library/text/deprecated/text.tsx create mode 100644 ui/components/component-library/text/deprecated/text.types.ts diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js index 0998f0b8e..4ffb947cb 100644 --- a/ui/components/app/add-network/add-network.js +++ b/ui/components/app/add-network/add-network.js @@ -36,12 +36,12 @@ import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { - Text, Icon, IconName, IconSize, AvatarNetwork, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics'; const AddNetwork = () => { diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js index 033145d8a..b764b2351 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js @@ -16,7 +16,7 @@ import { setAdvancedGasFee } from '../../../../store/actions'; import { useGasFeeContext } from '../../../../contexts/gasFee'; import { useAdvancedGasFeePopoverContext } from '../context'; import { useI18nContext } from '../../../../hooks/useI18nContext'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const AdvancedGasFeeDefaults = () => { const t = useI18nContext(); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js index 9c8af1bb7..2c2eb0f0a 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js @@ -9,7 +9,7 @@ import Button from '../../../ui/button'; import FormField from '../../../ui/form-field'; import { useAdvancedGasFeePopoverContext } from '../context'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const validateGasLimit = (gasLimit, minimumGasLimitDec) => { return bnLessThan(gasLimit, minimumGasLimitDec) || diff --git a/ui/components/app/approve-content-card/approve-content-card.js b/ui/components/app/approve-content-card/approve-content-card.js index b9b177fe7..050e9c795 100644 --- a/ui/components/app/approve-content-card/approve-content-card.js +++ b/ui/components/app/approve-content-card/approve-content-card.js @@ -6,7 +6,7 @@ import { useSelector } from 'react-redux'; import Box from '../../ui/box/box'; import Button from '../../ui/button'; import EditGasFeeButton from '../edit-gas-fee-button/edit-gas-fee-button'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AlignItems, BlockSize, diff --git a/ui/components/app/beta-header/index.js b/ui/components/app/beta-header/index.js index 41352723d..9ff4e2a59 100644 --- a/ui/components/app/beta-header/index.js +++ b/ui/components/app/beta-header/index.js @@ -14,12 +14,8 @@ import { import { BETA_BUGS_URL } from '../../../helpers/constants/beta'; import { hideBetaHeader } from '../../../store/actions'; -import { - ButtonIcon, - ButtonIconSize, - IconName, - Text, -} from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; +import { ButtonIcon, ButtonIconSize, IconName } from '../../component-library'; const BetaHeader = () => { const t = useI18nContext(); diff --git a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js index 377d7eaeb..543669ca9 100644 --- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js +++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js @@ -18,7 +18,8 @@ import Box from '../../ui/box'; import InfoTooltip from '../../ui/info-tooltip'; import Popover from '../../ui/popover'; import AppLoadingSpinner from '../app-loading-spinner'; -import { Text, Button, ButtonLink } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; +import { Button, ButtonLink } from '../../component-library'; const CancelSpeedupPopover = () => { const { diff --git a/ui/components/app/configure-snap-popup/configure-snap-popup.tsx b/ui/components/app/configure-snap-popup/configure-snap-popup.tsx index d62edd27c..62df8616d 100644 --- a/ui/components/app/configure-snap-popup/configure-snap-popup.tsx +++ b/ui/components/app/configure-snap-popup/configure-snap-popup.tsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Text } from '../../component-library/text/deprecated'; import { BUTTON_VARIANT, Button, - Text, Box, Modal, ModalOverlay, diff --git a/ui/components/app/confirm-data/confirm-data.js b/ui/components/app/confirm-data/confirm-data.js index b5030e0e1..017f280c5 100644 --- a/ui/components/app/confirm-data/confirm-data.js +++ b/ui/components/app/confirm-data/confirm-data.js @@ -14,7 +14,7 @@ import { useTransactionFunctionType } from '../../../hooks/useTransactionFunctio import Box from '../../ui/box/box'; import Disclosure from '../../ui/disclosure'; import TransactionDecoding from '../transaction-decoding'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; const ConfirmData = ({ txData, dataComponent }) => { const t = useI18nContext(); diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js index 15e0abfb6..59419a96a 100644 --- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js +++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js @@ -18,7 +18,7 @@ import TransactionDetailItem from '../../transaction-detail-item'; import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'; import InfoTooltip from '../../../ui/info-tooltip'; import LoadingHeartBeat from '../../../ui/loading-heartbeat'; -import { Text } from '../../../component-library/text'; +import { Text } from '../../../component-library/text/deprecated'; import { FONT_STYLE, TextVariant, diff --git a/ui/components/app/confirm-hexdata/confirm-hexdata.js b/ui/components/app/confirm-hexdata/confirm-hexdata.js index e85e46a5b..73d608b41 100644 --- a/ui/components/app/confirm-hexdata/confirm-hexdata.js +++ b/ui/components/app/confirm-hexdata/confirm-hexdata.js @@ -13,7 +13,7 @@ import { TextTransform, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import CopyRawData from '../transaction-decoding/components/ui/copy-raw-data'; const ConfirmHexData = ({ txData, dataHexComponent }) => { diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js index cd489fea8..c103d6d73 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -22,7 +22,7 @@ import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover'; import EditGasPopover from '../edit-gas-popover'; import ErrorMessage from '../../ui/error-message'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { TextVariant, TextAlign, diff --git a/ui/components/app/confirm-page-container/snaps/snap-insight.js b/ui/components/app/confirm-page-container/snaps/snap-insight.js index d7fc925d7..938bc9434 100644 --- a/ui/components/app/confirm-page-container/snaps/snap-insight.js +++ b/ui/components/app/confirm-page-container/snaps/snap-insight.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import Preloader from '../../../ui/icon/preloader/preloader-icon.component'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { AlignItems, FLEX_DIRECTION, diff --git a/ui/components/app/confirm-subtitle/confirm-subtitle.js b/ui/components/app/confirm-subtitle/confirm-subtitle.js index 1ac59dcd1..1e5a571bc 100644 --- a/ui/components/app/confirm-subtitle/confirm-subtitle.js +++ b/ui/components/app/confirm-subtitle/confirm-subtitle.js @@ -7,7 +7,7 @@ import { Color, TextVariant } from '../../../helpers/constants/design-system'; import { isNFTAssetStandard } from '../../../helpers/utils/transactions.util'; import { getShouldShowFiat } from '../../../selectors'; import { useTransactionInfo } from '../../../hooks/useTransactionInfo'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'; const ConfirmSubTitle = ({ diff --git a/ui/components/app/confirm-title/confirm-title.js b/ui/components/app/confirm-title/confirm-title.js index 125d8d8a3..406486656 100644 --- a/ui/components/app/confirm-title/confirm-title.js +++ b/ui/components/app/confirm-title/confirm-title.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { TransactionType } from '../../../../shared/constants/transaction'; import { PRIMARY } from '../../../helpers/constants/common'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { FONT_WEIGHT, TextVariant, diff --git a/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js b/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js index 79b53a435..120d72072 100644 --- a/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js +++ b/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js @@ -14,7 +14,8 @@ import { AlignItems, IconColor, } from '../../../helpers/constants/design-system'; -import { Icon, IconName, IconSize, Text } from '../../component-library'; +import { Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; const ConfirmationWarningModal = ({ onSubmit, onCancel }) => { const t = useI18nContext(); diff --git a/ui/components/app/contact-list/recipient-group/recipient-group.component.js b/ui/components/app/contact-list/recipient-group/recipient-group.component.js index 031761f6a..dccf6b66f 100644 --- a/ui/components/app/contact-list/recipient-group/recipient-group.component.js +++ b/ui/components/app/contact-list/recipient-group/recipient-group.component.js @@ -8,7 +8,7 @@ import { TextColor, TextVariant, } from '../../../../helpers/constants/design-system'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; function addressesEqual(address1, address2) { return String(address1).toLowerCase() === String(address2).toLowerCase(); diff --git a/ui/components/app/create-new-vault/create-new-vault.js b/ui/components/app/create-new-vault/create-new-vault.js index 81e9e9063..d29d249e5 100644 --- a/ui/components/app/create-new-vault/create-new-vault.js +++ b/ui/components/app/create-new-vault/create-new-vault.js @@ -4,7 +4,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import TextField from '../../ui/text-field'; import Button from '../../ui/button'; import CheckBox from '../../ui/check-box'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import SrpInput from '../srp-input'; import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common'; diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js index 1c68eb297..a35e1a0f9 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js @@ -8,7 +8,8 @@ import { TextVariant, } from '../../../helpers/constants/design-system'; -import { Icon, IconName, IconSize, Text } from '../../component-library'; +import { Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; export const CustomSpendingCapTooltip = ({ tooltipContentText, diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js index da9033c07..70bbdb9af 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js @@ -8,7 +8,8 @@ import { addHexPrefix } from 'ethereumjs-util'; import { I18nContext } from '../../../contexts/i18n'; import Box from '../../ui/box'; import FormField from '../../ui/form-field'; -import { Text, ButtonLink, Icon, IconName } from '../../component-library'; +import { ButtonLink, Icon, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AlignItems, DISPLAY, diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.js index 2e752bce1..dd9595d2f 100644 --- a/ui/components/app/detected-token/detected-token-address/detected-token-address.js +++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.js @@ -15,7 +15,7 @@ import { } from '../../../../helpers/constants/design-system'; import { shortenAddress } from '../../../../helpers/utils/util'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const DetectedTokenAddress = ({ tokenAddress }) => { const t = useI18nContext(); diff --git a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js index ac3af6bff..0bf574c75 100644 --- a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js +++ b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js @@ -8,7 +8,8 @@ import { FontWeight, TextVariant, } from '../../../../helpers/constants/design-system'; -import { Text, Box, ButtonLink } from '../../../component-library'; +import { Box, ButtonLink } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2; diff --git a/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js b/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js index 708b078db..f5635c8e4 100644 --- a/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js +++ b/ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js @@ -6,7 +6,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; import { TextVariant } from '../../../../helpers/constants/design-system'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const DetectedTokenIgnoredPopover = ({ partiallyIgnoreDetectedTokens, diff --git a/ui/components/app/detected-token/detected-token-values/detected-token-values.js b/ui/components/app/detected-token/detected-token-values/detected-token-values.js index 6d1a95470..e4f71353b 100644 --- a/ui/components/app/detected-token/detected-token-values/detected-token-values.js +++ b/ui/components/app/detected-token/detected-token-values/detected-token-values.js @@ -12,7 +12,8 @@ import { import { useTokenTracker } from '../../../../hooks/useTokenTracker'; import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount'; import { getUseCurrencyRateCheck } from '../../../../selectors'; -import { Text, Box } from '../../../component-library'; +import { Box } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const DetectedTokenValues = ({ token, diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js index 6bd1ed4cc..49f7d9a1d 100644 --- a/ui/components/app/edit-gas-display/edit-gas-display.component.js +++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js @@ -12,7 +12,7 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { areDappSuggestedAndTxParamGasFeesTheSame } from '../../../helpers/utils/confirm-tx.util'; import InfoTooltip from '../../ui/info-tooltip'; diff --git a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js index 70fb157e1..b06bc0c11 100644 --- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js +++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js @@ -13,7 +13,8 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTransactionEventFragment } from '../../../hooks/useTransactionEventFragment'; import { useTransactionModalContext } from '../../../contexts/transaction-modal'; import InfoTooltip from '../../ui/info-tooltip/info-tooltip'; -import { Icon, IconName, IconSize, Text } from '../../component-library'; +import { Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; export default function EditGasFeeButton({ userAcknowledgedGasMissing }) { const t = useI18nContext(); diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js index d057f042b..5919b2aa8 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js @@ -15,7 +15,7 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-k import { useGasFeeContext } from '../../../contexts/gasFee'; import AppLoadingSpinner from '../app-loading-spinner'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import EditGasItem from './edit-gas-item'; import NetworkStatistics from './network-statistics'; diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js index 2d700e3c7..975a2c6f0 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js @@ -11,7 +11,7 @@ import { } from '../../../../helpers/constants/design-system'; import { isMetamaskSuggestedGasEstimate } from '../../../../helpers/utils/gas'; import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const EditGasToolTip = ({ editGasMode, diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js index 6a14f655b..06bc0e81b 100644 --- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js +++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js @@ -8,7 +8,7 @@ import { isNullish } from '../../../../helpers/utils/util'; import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas'; import { I18nContext } from '../../../../contexts/i18n'; import { useGasFeeContext } from '../../../../contexts/gasFee'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { BaseFeeTooltip, PriorityFeeTooltip } from './tooltips'; import StatusSlider from './status-slider'; diff --git a/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js b/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js index 9e7c267dd..060a43d55 100644 --- a/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js +++ b/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js @@ -6,7 +6,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext'; import { getIsMainnet } from '../../../../selectors'; import Box from '../../../ui/box'; import InfoTooltip from '../../../ui/info-tooltip/info-tooltip'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const GasDetailsItemTitle = () => { const t = useI18nContext(); diff --git a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js index 5de3aa97a..0e8ba0a24 100644 --- a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js +++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js @@ -19,7 +19,8 @@ import { getLedgerTransportStatus, } from '../../../ducks/app/app'; -import { BannerAlert, ButtonLink, Text } from '../../component-library'; +import { BannerAlert, ButtonLink } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { SEVERITIES, diff --git a/ui/components/app/loading-network-screen/loading-network-screen.component.js b/ui/components/app/loading-network-screen/loading-network-screen.component.js index 61c7c93aa..71d686691 100644 --- a/ui/components/app/loading-network-screen/loading-network-screen.component.js +++ b/ui/components/app/loading-network-screen/loading-network-screen.component.js @@ -10,8 +10,8 @@ import { Icon, IconName, IconSize, - Text, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { DISPLAY, IconColor, diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index db14cb8bc..3b976cd2a 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -24,7 +24,8 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; import { getAddressBookEntry } from '../../../../selectors'; import { TokenStandard } from '../../../../../shared/constants/transaction'; import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image'; -import { ButtonIcon, IconName, Text } from '../../../component-library'; +import { ButtonIcon, IconName } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; export default function ContractDetailsModal({ onClose, diff --git a/ui/components/app/modals/customize-nonce/customize-nonce.component.js b/ui/components/app/modals/customize-nonce/customize-nonce.component.js index 1d87cbd54..765c8f527 100644 --- a/ui/components/app/modals/customize-nonce/customize-nonce.component.js +++ b/ui/components/app/modals/customize-nonce/customize-nonce.component.js @@ -17,8 +17,8 @@ import { ButtonIconSize, ButtonLink, IconName, - Text, } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const CustomizeNonce = ({ hideModal, diff --git a/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js b/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js index 47b056a7b..a2d5d09fb 100644 --- a/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js +++ b/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js @@ -14,8 +14,8 @@ import { IconName, IconSize, Label, - Text, } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { AlignItems, Display, diff --git a/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js b/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js index 49c4f7be2..2b26421b7 100644 --- a/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js +++ b/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js @@ -8,8 +8,8 @@ import { BUTTON_VARIANT, BannerAlert, Button, - Text, } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import AccountModalContainer from '../account-modal-container'; import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils'; import { diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js index 2537d1cd2..c4f35523b 100644 --- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js +++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js @@ -3,13 +3,13 @@ import React, { useContext } from 'react'; import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'; import Box from '../../../ui/box'; import { - Text, Button, BUTTON_SIZES, BUTTON_VARIANT, ButtonIcon, IconName, } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { AlignItems, Display, diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js index 98c91acfe..29a97becc 100644 --- a/ui/components/app/network-account-balance-header/network-account-balance-header.js +++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js @@ -15,7 +15,7 @@ import { import Box from '../../ui/box/box'; import { I18nContext } from '../../../contexts/i18n'; import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; export default function NetworkAccountBalanceHeader({ networkName, diff --git a/ui/components/app/nft-default-image/nft-default-image.js b/ui/components/app/nft-default-image/nft-default-image.js index 54c5d688d..3945a9108 100644 --- a/ui/components/app/nft-default-image/nft-default-image.js +++ b/ui/components/app/nft-default-image/nft-default-image.js @@ -12,7 +12,7 @@ import { BackgroundColor, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box/box'; export default function NftDefaultImage({ diff --git a/ui/components/app/nft-details/nft-details.js b/ui/components/app/nft-details/nft-details.js index c0a9cbd33..491506339 100644 --- a/ui/components/app/nft-details/nft-details.js +++ b/ui/components/app/nft-details/nft-details.js @@ -51,7 +51,8 @@ import { AssetType, TokenStandard, } from '../../../../shared/constants/transaction'; -import { ButtonIcon, IconName, Text } from '../../component-library'; +import { ButtonIcon, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Tooltip from '../../ui/tooltip'; import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils'; import { NftItem } from '../../multichain/nft-item'; diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js index f93718906..59e671367 100644 --- a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js +++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js @@ -2,7 +2,8 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import Box from '../../ui/box'; import Dialog from '../../ui/dialog'; -import { Icon, IconName, Text } from '../../component-library'; +import { Icon, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { TextVariant, TextAlign, diff --git a/ui/components/app/nfts-tab/nfts-tab.js b/ui/components/app/nfts-tab/nfts-tab.js index 2e1918c0d..530e367c8 100644 --- a/ui/components/app/nfts-tab/nfts-tab.js +++ b/ui/components/app/nfts-tab/nfts-tab.js @@ -21,7 +21,8 @@ import { showImportNftsModal, } from '../../../store/actions'; import { useNftsCollections } from '../../../hooks/useNftsCollections'; -import { Box, ButtonLink, IconName, Text } from '../../component-library'; +import { Box, ButtonLink, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import NftsDetectionNotice from '../nfts-detection-notice'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; diff --git a/ui/components/app/permission-cell/permission-cell-options.js b/ui/components/app/permission-cell/permission-cell-options.js index ec7dda4cd..768f23e05 100644 --- a/ui/components/app/permission-cell/permission-cell-options.js +++ b/ui/components/app/permission-cell/permission-cell-options.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import { useDispatch } from 'react-redux'; import Box from '../../ui/box'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { IconName, ButtonIcon, Text } from '../../component-library'; +import { IconName, ButtonIcon } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { Menu, MenuItem } from '../../ui/menu'; import { TextColor, diff --git a/ui/components/app/permission-cell/permission-cell.js b/ui/components/app/permission-cell/permission-cell.js index c5fca8fa8..cd4b813b3 100644 --- a/ui/components/app/permission-cell/permission-cell.js +++ b/ui/components/app/permission-cell/permission-cell.js @@ -11,13 +11,8 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; -import { - AvatarIcon, - Text, - Icon, - IconName, - IconSize, -} from '../../component-library'; +import { AvatarIcon, Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { formatDate } from '../../../helpers/utils/util'; import { useI18nContext } from '../../../hooks/useI18nContext'; import Tooltip from '../../ui/tooltip'; diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js index 1ac48080b..9dfdbf732 100644 --- a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js +++ b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js @@ -11,7 +11,7 @@ import { TextAlign, } from '../../../../helpers/constants/design-system'; import { PageContainerFooter } from '../../../ui/page-container'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => { const t = useI18nContext(); diff --git a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js index d21a3f7a6..c6f496052 100644 --- a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js +++ b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js @@ -17,7 +17,7 @@ import { TextColor, } from '../../../helpers/constants/design-system'; import { ONBOARDING_UNLOCK_ROUTE } from '../../../helpers/constants/routes'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) { const t = useI18nContext(); diff --git a/ui/components/app/security-provider-banner-message/security-provider-banner-message.js b/ui/components/app/security-provider-banner-message/security-provider-banner-message.js index fdaba451f..48ed96363 100644 --- a/ui/components/app/security-provider-banner-message/security-provider-banner-message.js +++ b/ui/components/app/security-provider-banner-message/security-provider-banner-message.js @@ -8,7 +8,8 @@ import { } from '../../../helpers/constants/design-system'; import { SECURITY_PROVIDER_MESSAGE_SEVERITY } from '../../../../shared/constants/security-provider'; import { I18nContext } from '../../../../.storybook/i18n'; -import { BannerAlert, ButtonLink, Text } from '../../component-library'; +import { BannerAlert, ButtonLink } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; export default function SecurityProviderBannerMessage({ securityProviderResponse, diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js index c311eaeb2..715535445 100644 --- a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js +++ b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js @@ -16,10 +16,10 @@ import { shortenAddress } from '../../../helpers/utils/util'; import { Icon, IconName, - Text, Button, BUTTON_VARIANT, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; const SetApproveForAllWarning = ({ collectionName, diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js index 6dc18e4a4..47dfcb8d3 100644 --- a/ui/components/app/signature-request-original/signature-request-original.component.js +++ b/ui/components/app/signature-request-original/signature-request-original.component.js @@ -34,7 +34,8 @@ import { import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-page-container-navigation'; import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message'; ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) -import { Icon, IconName, Text } from '../../component-library'; +import { Icon, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box/box'; ///: END:ONLY_INCLUDE_IN import SignatureRequestHeader from '../signature-request-header'; diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js b/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js index 565703ef2..ef94acc17 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Box from '../../../ui/box'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { FLEX_DIRECTION, diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js index fc4eef706..948041406 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js @@ -9,7 +9,7 @@ import { TextColor, } from '../../../../helpers/constants/design-system'; import Box from '../../../ui/box'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const SignatureRequestSIWETag = ({ text }) => { return ( diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe.js b/ui/components/app/signature-request-siwe/signature-request-siwe.js index ddd4319e5..68e1f73d6 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe.js @@ -5,7 +5,8 @@ import { useHistory } from 'react-router-dom'; import log from 'loglevel'; import { isValidSIWEOrigin } from '@metamask/controller-utils'; import { ethErrors, serializeError } from 'eth-rpc-errors'; -import { BannerAlert, Text } from '../../component-library'; +import { BannerAlert } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Popover from '../../ui/popover'; import Checkbox from '../../ui/check-box'; import Button from '../../ui/button'; diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.js index 52322d084..fad259f1d 100644 --- a/ui/components/app/signature-request/signature-request-message/signature-request-message.js +++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { debounce } from 'lodash'; import { I18nContext } from '../../../../contexts/i18n'; import Box from '../../../ui/box'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { Display, FlexDirection, diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js index e2246f2b5..601d73e35 100644 --- a/ui/components/app/signature-request/signature-request.component.js +++ b/ui/components/app/signature-request/signature-request.component.js @@ -41,8 +41,8 @@ import { Icon, IconName, ///: END:ONLY_INCLUDE_IN - Text, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Footer from './signature-request-footer'; import Message from './signature-request-message'; diff --git a/ui/components/app/snaps/install-error/install-error.js b/ui/components/app/snaps/install-error/install-error.js index dad100bda..e8003192b 100644 --- a/ui/components/app/snaps/install-error/install-error.js +++ b/ui/components/app/snaps/install-error/install-error.js @@ -13,7 +13,8 @@ import { TextVariant, } from '../../../../helpers/constants/design-system'; import ActionableMessage from '../../../ui/actionable-message/actionable-message'; -import { AvatarIcon, IconSize, Text } from '../../../component-library'; +import { AvatarIcon, IconSize } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; const InstallError = ({ title, error, description, iconName }) => { return ( diff --git a/ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js b/ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js index 8c5e54a10..c3efb4e24 100644 --- a/ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js +++ b/ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js @@ -25,7 +25,8 @@ import { removeSnapIdPrefix, } from '../../../../helpers/utils/util'; -import { Text, ButtonLink } from '../../../component-library'; +import { ButtonLink } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { getTargetSubjectMetadata } from '../../../../selectors'; import SnapAvatar from '../snap-avatar'; import { useI18nContext } from '../../../../hooks/useI18nContext'; diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js index 4f99c2162..7945751e2 100644 --- a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js +++ b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js @@ -19,7 +19,7 @@ import { removeSnapIdPrefix, } from '../../../../helpers/utils/util'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { getTargetSubjectMetadata } from '../../../../selectors'; import SnapAvatar from '../snap-avatar'; import SnapVersion from '../snap-version/snap-version'; diff --git a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js index a62b5ff1d..9ca3e434f 100644 --- a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js +++ b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js @@ -9,13 +9,8 @@ import { FontWeight, } from '../../../../helpers/constants/design-system'; import { getSnapName } from '../../../../helpers/utils/util'; -import { - Icon, - IconName, - IconSize, - Text, - ValidTag, -} from '../../../component-library'; +import { Icon, IconName, IconSize, ValidTag } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import Tooltip from '../../../ui/tooltip/tooltip'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import SnapAvatar from '../snap-avatar/snap-avatar'; diff --git a/ui/components/app/snaps/snap-delineator/snap-delineator.js b/ui/components/app/snaps/snap-delineator/snap-delineator.js index de872cff3..93d2097ae 100644 --- a/ui/components/app/snaps/snap-delineator/snap-delineator.js +++ b/ui/components/app/snaps/snap-delineator/snap-delineator.js @@ -12,12 +12,8 @@ import { TextColor, } from '../../../../helpers/constants/design-system'; import Box from '../../../ui/box'; -import { - AvatarIcon, - Text, - IconName, - IconSize, -} from '../../../component-library'; +import { AvatarIcon, IconName, IconSize } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { DelineatorType, getDelineatorTitle, diff --git a/ui/components/app/snaps/snap-install-warning/snap-install-warning.js b/ui/components/app/snaps/snap-install-warning/snap-install-warning.js index e4337c3d6..83960e879 100644 --- a/ui/components/app/snaps/snap-install-warning/snap-install-warning.js +++ b/ui/components/app/snaps/snap-install-warning/snap-install-warning.js @@ -16,7 +16,8 @@ import { } from '../../../../helpers/constants/design-system'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; -import { AvatarIcon, Text, IconName } from '../../../component-library'; +import { AvatarIcon, IconName } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import Box from '../../../ui/box/box'; /** diff --git a/ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js b/ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js index 0d9e1d99b..45a55a959 100644 --- a/ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js +++ b/ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js @@ -12,8 +12,8 @@ import { ButtonLink, IconName, IconSize, - Text, } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { AlignItems, BackgroundColor, diff --git a/ui/components/app/snaps/snap-settings-card/snap-settings-card.js b/ui/components/app/snaps/snap-settings-card/snap-settings-card.js index 6f7fc6822..54703c999 100644 --- a/ui/components/app/snaps/snap-settings-card/snap-settings-card.js +++ b/ui/components/app/snaps/snap-settings-card/snap-settings-card.js @@ -12,7 +12,8 @@ import { IconColor, TextVariant, } from '../../../../helpers/constants/design-system'; -import { Icon, IconName, IconSize, Text } from '../../../component-library'; +import { Icon, IconName, IconSize } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import SnapAvatar from '../snap-avatar'; const SnapSettingsCard = ({ name, packageName, onClick, snapId }) => { diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js index 37d83c2c9..60033d2d1 100644 --- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js +++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js @@ -17,7 +17,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext'; import Box from '../../../ui/box'; import { getSnapName } from '../../../../helpers/utils/util'; import { getTargetSubjectMetadata } from '../../../../selectors'; -import { Text } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { Copyable } from '../copyable'; import { DelineatorType } from '../../../../helpers/constants/snaps'; diff --git a/ui/components/app/snaps/snap-version/snap-version.js b/ui/components/app/snaps/snap-version/snap-version.js index f70653540..88dd90b4a 100644 --- a/ui/components/app/snaps/snap-version/snap-version.js +++ b/ui/components/app/snaps/snap-version/snap-version.js @@ -15,8 +15,8 @@ import { Icon, IconName, IconSize, - Text, } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import Preloader from '../../../ui/icon/preloader/preloader-icon.component'; const SnapVersion = ({ version, url }) => { diff --git a/ui/components/app/srp-input/srp-input.js b/ui/components/app/srp-input/srp-input.js index be990e3cf..e23460f6b 100644 --- a/ui/components/app/srp-input/srp-input.js +++ b/ui/components/app/srp-input/srp-input.js @@ -11,7 +11,7 @@ import { TextAlign, TextVariant, } from '../../../helpers/constants/design-system'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase'; const defaultNumberOfWords = 12; diff --git a/ui/components/app/srp-quiz-modal/QuizContent/QuizContent.tsx b/ui/components/app/srp-quiz-modal/QuizContent/QuizContent.tsx index 67b1f4c06..6a44f6676 100644 --- a/ui/components/app/srp-quiz-modal/QuizContent/QuizContent.tsx +++ b/ui/components/app/srp-quiz-modal/QuizContent/QuizContent.tsx @@ -9,7 +9,8 @@ import { TextVariant, } from '../../../../helpers/constants/design-system'; import { useI18nContext } from '../../../../hooks/useI18nContext'; -import { Button, Text, Box } from '../../../component-library'; +import { Button, Box } from '../../../component-library'; +import { Text } from '../../../component-library/text/deprecated'; import { IQuizInformationProps } from '../types'; export default function QuizContent({ diff --git a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js b/ui/components/app/terms-of-use-popup/terms-of-use-popup.js index 1b8097a70..46126b7de 100644 --- a/ui/components/app/terms-of-use-popup/terms-of-use-popup.js +++ b/ui/components/app/terms-of-use-popup/terms-of-use-popup.js @@ -11,12 +11,12 @@ import { TextColor, } from '../../../helpers/constants/design-system'; import { - Text, Button, BUTTON_VARIANT, ButtonLink, Label, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box'; import CheckBox from '../../ui/check-box/check-box.component'; import { diff --git a/ui/components/app/transaction-alerts/transaction-alerts.js b/ui/components/app/transaction-alerts/transaction-alerts.js index 72b65c991..ed8becda8 100644 --- a/ui/components/app/transaction-alerts/transaction-alerts.js +++ b/ui/components/app/transaction-alerts/transaction-alerts.js @@ -6,7 +6,8 @@ import { PriorityLevels } from '../../../../shared/constants/gas'; import { submittedPendingTransactionsSelector } from '../../../selectors'; import { useGasFeeContext } from '../../../contexts/gasFee'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { BannerAlert, ButtonLink, Text } from '../../component-library'; +import { BannerAlert, ButtonLink } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import SimulationErrorMessage from '../../ui/simulation-error-message'; import { SEVERITIES } from '../../../helpers/constants/design-system'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js index 502f62d94..d729c5dc1 100644 --- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js @@ -13,7 +13,8 @@ import CancelButton from '../cancel-button'; import Popover from '../../ui/popover'; ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) import Box from '../../ui/box/box'; -import { Icon, IconName, Text } from '../../component-library'; +import { Icon, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { IconColor } from '../../../helpers/constants/design-system'; ///: END:ONLY_INCLUDE_IN import { SECOND } from '../../../../shared/constants/time'; diff --git a/ui/components/app/whats-new-popup/whats-new-popup.js b/ui/components/app/whats-new-popup/whats-new-popup.js index 5743cc841..8b8be5b48 100644 --- a/ui/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/components/app/whats-new-popup/whats-new-popup.js @@ -13,8 +13,8 @@ import { ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) IconName, ///: END:ONLY_INCLUDE_IN - Text, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { updateViewedNotifications } from '../../../store/actions'; import { getTranslatedUINotifications } from '../../../../shared/notifications'; import { getSortedAnnouncementsToShow } from '../../../selectors'; diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index 164fdf5a4..516959f32 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -13,7 +13,7 @@ import { TextTransform, } from '../../../helpers/constants/design-system'; -import { Text, ValidTag } from '../text'; +import { Text } from '../text/deprecated'; import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types'; @@ -47,7 +47,7 @@ export const AvatarBase = forwardRef( className, )} ref={ref} - as={ValidTag.Div} + as="div" display={Display.Flex} justifyContent={JustifyContent.center} alignItems={AlignItems.center} diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts index 11bc51ac7..bca4653f6 100644 --- a/ui/components/component-library/avatar-base/avatar-base.types.ts +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -3,7 +3,7 @@ import { BorderColor, TextColor, } from '../../../helpers/constants/design-system'; -import { TextProps } from '../text'; +import type { TextProps } from '../text/deprecated'; export enum AvatarBaseSize { Xs = 'xs', diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.js index 4262f30d1..9c84fd7d5 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.js +++ b/ui/components/component-library/avatar-token/avatar-token.stories.js @@ -10,13 +10,8 @@ import { import Box from '../../ui/box/box'; -import { - AvatarNetwork, - BUTTON_LINK_SIZES, - BadgeWrapper, - ButtonLink, - Text, -} from '..'; +import { AvatarNetwork, BUTTON_LINK_SIZES, BadgeWrapper, ButtonLink } from '..'; +import { Text } from '../text/deprecated'; import README from './README.mdx'; diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js index cc9f5575e..a2c790815 100644 --- a/ui/components/component-library/banner-base/banner-base.js +++ b/ui/components/component-library/banner-base/banner-base.js @@ -12,7 +12,8 @@ import { import Box from '../../ui/box'; -import { ButtonLink, Text, IconName, ButtonIcon } from '..'; +import { ButtonLink, IconName, ButtonIcon } from '..'; +import { Text } from '../text/deprecated'; export const BannerBase = ({ className, @@ -92,7 +93,7 @@ BannerBase.propTypes = { /** * Additional props to pass to the `Text` component used for the `title` text */ - titleProps: PropTypes.shape(Text.PropTypes), + titleProps: PropTypes.shape(Text.propTypes), /** * The description is the content area below BannerBase title */ @@ -100,7 +101,7 @@ BannerBase.propTypes = { /** * Additional props to pass to the `Text` component used for the `description` text */ - descriptionProps: PropTypes.shape(Text.PropTypes), + descriptionProps: PropTypes.shape(Text.propTypes), /** * The children is an alternative to using the description prop for BannerBase content below the title */ @@ -112,7 +113,7 @@ BannerBase.propTypes = { /** * Props for action button (ButtonLink) of the BannerBase below the children */ - actionButtonProps: PropTypes.shape(ButtonLink.PropTypes), + actionButtonProps: PropTypes.shape(ButtonLink.propTypes), /** * The onClick handler for the action button (ButtonLink) */ @@ -129,7 +130,7 @@ BannerBase.propTypes = { /** * The props to pass to the close button */ - closeButtonProps: PropTypes.shape(ButtonIcon.PropTypes), + closeButtonProps: PropTypes.shape(ButtonIcon.propTypes), /** * An additional className to apply to the BannerBase */ diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js index 7c4f16e42..435b0b62e 100644 --- a/ui/components/component-library/button-base/button-base.js +++ b/ui/components/component-library/button-base/button-base.js @@ -4,7 +4,7 @@ import classnames from 'classnames'; import Box from '../../ui/box'; import { IconName, Icon, IconSize } from '../icon'; -import { Text } from '../text'; +import { Text } from '../text/deprecated'; import { AlignItems, @@ -133,7 +133,7 @@ ButtonBase.propTypes = { /** * Additional props to pass to the Text component that wraps the button children */ - buttonTextProps: PropTypes.shape(Text.PropTypes), + buttonTextProps: PropTypes.shape(Text.propTypes), /** * The children to be rendered inside the ButtonBase */ @@ -195,7 +195,7 @@ ButtonBase.propTypes = { /** * textProps accepts all the props from Icon */ - textProps: PropTypes.shape(Text.PropTypes), + textProps: PropTypes.shape(Text.propTypes), /** * ButtonBase accepts all the props from Box */ diff --git a/ui/components/component-library/help-text/help-text.js b/ui/components/component-library/help-text/help-text.js index 355106400..fb3d77bd6 100644 --- a/ui/components/component-library/help-text/help-text.js +++ b/ui/components/component-library/help-text/help-text.js @@ -9,7 +9,7 @@ import { SEVERITIES, } from '../../../helpers/constants/design-system'; -import { Text } from '../text'; +import { Text } from '../text/deprecated'; export const HelpText = ({ severity, diff --git a/ui/components/component-library/input/input.js b/ui/components/component-library/input/input.js index 28067ba1b..3a67a6919 100644 --- a/ui/components/component-library/input/input.js +++ b/ui/components/component-library/input/input.js @@ -10,7 +10,7 @@ import { import Box from '../../ui/box'; -import { Text } from '../text'; +import { Text } from '../text/deprecated'; import { INPUT_TYPES } from './input.constants'; diff --git a/ui/components/component-library/label/label.js b/ui/components/component-library/label/label.js index 072dde236..4ad84b79d 100644 --- a/ui/components/component-library/label/label.js +++ b/ui/components/component-library/label/label.js @@ -7,7 +7,7 @@ import { Display, AlignItems, } from '../../../helpers/constants/design-system'; -import { Text } from '../text'; +import { Text } from '../text/deprecated'; export const Label = ({ htmlFor, className, children, ...props }) => ( This Text (fka Typography) component has breaking changes in variant options and the line heights associated to each variant. - Good typography improves readability, legibility and hierarchy of information. +> Contribute to improving the UI consistency of the extension by helping to replace the deprecated `` with ``. [See details](#converting-from-typography-to-text) + ## Props -The `Text` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props +The `Text` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props @@ -280,7 +280,8 @@ You can also utilize the `ValidTag` enum from `./text.types` to ensure that you ```jsx -import { Text } from '../../component-library'; +import { Display } from '../../../helpers/constants/design-system'; +import { Text } from '../../component-library' dd div @@ -294,9 +295,12 @@ import { Text } from '../../component-library'; h6 li p -span -strong - +span +strong +ul +label +header + ``` Renders the html: @@ -316,6 +320,11 @@ Renders the html:

p

span strong +
    + ul +
+ +
header
``` @@ -360,10 +369,6 @@ import { Text } from '../../component-library'; ``` -### Box Props - -Use any valid box props [Box](/?path=/story/components-ui-box--default-story) component props to the Text component. - ### Class Name Adds an additional class to the `Text` component @@ -376,7 +381,7 @@ The text content of the `Text` component # Converting from `Typography` to `Text` -The `Typography` component has been deprecated in favor of the `Text` component. Below are code examples converting from `Typography` to `Text`. +The `Typography` component has been deprecated in favor of the `Text` component. You can contribute by submitting a PR against [Replace deprecated Typography with Text component](https://github.com/MetaMask/metamask-extension/issues/17670) on GitHub. Below are code examples converting from `Typography` to `Text`. ### Variant @@ -575,7 +580,7 @@ Values using the `TextAlign` object from `./ui/helpers/constants/design-system.j ### Box Props -Box props are now integrated with the `Text` component. Valid box props: [Box](/?path=/story/components-ui-box--default-story) +Box props are now integrated with the `Text` component. Valid Box props: [Box](/docs/components-componentlibrary-box--docs#props) You no longer need to pass these props as an object through `boxProps` diff --git a/ui/components/component-library/text/__snapshots__/text.test.tsx.snap b/ui/components/component-library/text/__snapshots__/text.test.tsx.snap index de0c46263..0fcc7b64c 100644 --- a/ui/components/component-library/text/__snapshots__/text.test.tsx.snap +++ b/ui/components/component-library/text/__snapshots__/text.test.tsx.snap @@ -3,67 +3,67 @@ exports[`Text should render the Text with proper variant class name 1`] = `

display-md

heading-lg

heading-md

heading-sm

body-lg-medium

body-md

body-md-medium

body-md-bold

body-sm

body-sm-medium

body-sm-bold

body-xs

body-xs-medium

diff --git a/ui/components/component-library/text/deprecated/__snapshots__/text.test.js.snap b/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap similarity index 77% rename from ui/components/component-library/text/deprecated/__snapshots__/text.test.js.snap rename to ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap index f9c068518..de0c46263 100644 --- a/ui/components/component-library/text/deprecated/__snapshots__/text.test.js.snap +++ b/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap @@ -32,6 +32,11 @@ exports[`Text should render the Text with proper variant class name 1`] = ` > body-md

+

+ body-md-medium +

@@ -42,6 +47,11 @@ exports[`Text should render the Text with proper variant class name 1`] = ` > body-sm

+

+ body-sm-medium +

@@ -52,5 +62,10 @@ exports[`Text should render the Text with proper variant class name 1`] = ` > body-xs

+

+ body-xs-medium +

`; diff --git a/ui/components/component-library/text/deprecated/index.js b/ui/components/component-library/text/deprecated/index.js deleted file mode 100644 index aaac5f028..000000000 --- a/ui/components/component-library/text/deprecated/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { Text } from './text'; -export { TEXT_DIRECTIONS, INVISIBLE_CHARACTER } from './text.constants'; diff --git a/ui/components/component-library/text/deprecated/index.ts b/ui/components/component-library/text/deprecated/index.ts new file mode 100644 index 000000000..0e4a6d9a9 --- /dev/null +++ b/ui/components/component-library/text/deprecated/index.ts @@ -0,0 +1,3 @@ +export { Text } from './text'; +export { ValidTag, TextDirection, InvisibleCharacter } from './text.types'; +export type { TextProps, ValidTagType } from './text.types'; diff --git a/ui/components/component-library/text/deprecated/text.constants.js b/ui/components/component-library/text/deprecated/text.constants.js deleted file mode 100644 index e59e022f4..000000000 --- a/ui/components/component-library/text/deprecated/text.constants.js +++ /dev/null @@ -1,11 +0,0 @@ -export const TEXT_DIRECTIONS = { - LEFT_TO_RIGHT: 'ltr', - RIGHT_TO_LEFT: 'rtl', - AUTO: 'auto', -}; - -/** - * The INVISIBLE_CHARACTER is a very useful tool if you want to make sure a line of text - * takes up vertical space even if it's empty. - */ -export const INVISIBLE_CHARACTER = '\u200B'; diff --git a/ui/components/component-library/text/deprecated/text.js b/ui/components/component-library/text/deprecated/text.js deleted file mode 100644 index b483661aa..000000000 --- a/ui/components/component-library/text/deprecated/text.js +++ /dev/null @@ -1,185 +0,0 @@ -import React from 'react'; -import classnames from 'classnames'; -import PropTypes from 'prop-types'; -import Box from '../../../ui/box'; -import { - FONT_WEIGHT, - FONT_STYLE, - TextVariant, - TextAlign, - TEXT_TRANSFORM, - OVERFLOW_WRAP, - TextColor, -} from '../../../../helpers/constants/design-system'; -import { TEXT_DIRECTIONS } from './text.constants'; - -export const ValidTags = [ - 'dd', - 'div', - 'dt', - 'em', - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'li', - 'p', - 'span', - 'strong', - 'ul', - 'label', - 'input', -]; - -const getTextElementDefault = (variant) => { - switch (variant) { - case TextVariant.displayMd: - return 'h1'; - case TextVariant.headingLg: - return 'h2'; - case TextVariant.headingMd: - return 'h3'; - case TextVariant.headingSm: - return 'h4'; - case TextVariant.inherit: - return 'span'; - // TextVariant.bodyLgMedium, TextVariant.bodyMd, TextVariant.bodyMdBold, TextVariant.bodySm, TextVariant.bodySmBold, TextVariant.bodyXs use default 'p' tag - default: - return 'p'; - } -}; - -export const Text = React.forwardRef( - ( - { - variant = TextVariant.bodyMd, - color = TextColor.textDefault, - fontWeight, - fontStyle, - textTransform, - textAlign, - textDirection, - overflowWrap, - ellipsis, - as, - className, - children, - ...props - }, - ref, - ) => { - // Check if as is set otherwise set a default tag based on variant - const Tag = as ?? getTextElementDefault(variant); - let strongTagFontWeight; - - if (Tag === 'strong') { - strongTagFontWeight = FONT_WEIGHT.BOLD; - } - - const computedClassName = classnames( - 'mm-text', - className, - `mm-text--${variant}`, - (strongTagFontWeight || fontWeight) && - `mm-text--font-weight-${strongTagFontWeight || fontWeight}`, - { - [`mm-text--font-style-${fontStyle}`]: Boolean(fontStyle), - [`mm-text--ellipsis`]: Boolean(ellipsis), - [`mm-text--text-transform-${textTransform}`]: Boolean(textTransform), - [`mm-text--text-align-${textAlign}`]: Boolean(textAlign), - [`mm-text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap), - }, - ); - - return ( - - {children} - - ); - }, -); - -Text.propTypes = { - /** - * The variation of font styles including sizes and weights of the Text component - * Possible values: - * `DISPLAY_MD` large screen: 48px / small screen: 32px, - * `HEADING_LG` large screen: 32px / small screen: 24px, - * `HEADING_MD` large screen: 24px / small screen: 18px, - * `HEADING_SM` large screen: 18px / small screen: 16px, - * `BODY_LG_MEDIUM` large screen: 18px / small screen: 16px, - * `BODY_MD` large screen: 16px / small screen: 14px, - * `BODY_MD_BOLD` large screen: 16px / small screen: 14px, - * `BODY_SM` large screen: 14px / small screen: 12px, - * `BODY_SM_BOLD` large screen: 14px / small screen: 12px, - * `BODY_XS` large screen: 12px / small screen: 10px, - * `INHERIT` - */ - variant: PropTypes.oneOf(Object.values(TextVariant)), - /** - * The color of the Text component Should use the COLOR object from - * ./ui/helpers/constants/design-system.js - */ - color: PropTypes.oneOf(Object.values(TextColor)), - /** - * The font-weight of the Text component. Should use the FONT_WEIGHT object from - * ./ui/helpers/constants/design-system.js - */ - fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), - /** - * The font-style of the Text component. Should use the FONT_STYLE object from - * ./ui/helpers/constants/design-system.js - */ - fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), - /** - * The textTransform of the Text component. Should use the TEXT_TRANSFORM object from - * ./ui/helpers/constants/design-system.js - */ - textTransform: PropTypes.oneOf(Object.values(TEXT_TRANSFORM)), - /** - * The text-align of the Text component. Should use the TextAlign enum from - * ./ui/helpers/constants/design-system.js - */ - textAlign: PropTypes.oneOf(Object.values(TextAlign)), - /** - * Change the dir (direction) global attribute of text to support the direction a language is written - * Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides) - */ - textDirection: PropTypes.oneOf(Object.values(TEXT_DIRECTIONS)), - /** - * The overflow-wrap of the Text component. Should use the OVERFLOW_WRAP object from - * ./ui/helpers/constants/design-system.js - */ - overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)), - /** - * Used for long strings that can be cut off... - */ - ellipsis: PropTypes.bool, - /** - * Changes the root html element tag of the Text component. - */ - as: PropTypes.oneOf(ValidTags), - /** - * Additional className to assign the Text component - */ - className: PropTypes.string, - /** - * The text content of the Text component - */ - children: PropTypes.node.isRequired, - /** - * Text component accepts all Box component props - */ - ...Box.propTypes, -}; - -Text.displayName = 'Text'; // Used for React DevTools profiler diff --git a/ui/components/component-library/text/deprecated/text.test.js b/ui/components/component-library/text/deprecated/text.test.tsx similarity index 86% rename from ui/components/component-library/text/deprecated/text.test.js rename to ui/components/component-library/text/deprecated/text.test.tsx index 2a61e4fe4..4608da9c4 100644 --- a/ui/components/component-library/text/deprecated/text.test.js +++ b/ui/components/component-library/text/deprecated/text.test.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; import { render } from '@testing-library/react'; import { - FONT_STYLE, - FONT_WEIGHT, - OVERFLOW_WRAP, + FontStyle, + FontWeight, + OverflowWrap, TextAlign, TextColor, - TEXT_TRANSFORM, + TextTransform, TextVariant, Color, } from '../../../../helpers/constants/design-system'; -import { Text, TEXT_DIRECTIONS } from '.'; +import { TextDirection } from './text.types'; +import { Text } from '.'; describe('Text', () => { it('should render the Text without crashing', () => { @@ -75,10 +76,13 @@ describe('Text', () => { heading-sm body-lg-medium body-md + body-md-medium body-md-bold body-sm + body-sm-medium body-sm-bold body-xs + body-xs-medium , ); @@ -88,19 +92,22 @@ describe('Text', () => { expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm'); expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium'); expect(getByText('body-md')).toHaveClass('mm-text--body-md'); + expect(getByText('body-md-medium')).toHaveClass('mm-text--body-md-medium'); expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold'); expect(getByText('body-sm')).toHaveClass('mm-text--body-sm'); + expect(getByText('body-sm-medium')).toHaveClass('mm-text--body-sm-medium'); expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold'); expect(getByText('body-xs')).toHaveClass('mm-text--body-xs'); + expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium'); expect(container).toMatchSnapshot(); }); it('should render the Text with proper font weight class name', () => { const { getByText } = render( <> - bold - medium - normal + bold + medium + normal , ); expect(getByText('bold')).toHaveClass('mm-text--font-weight-bold'); @@ -155,8 +162,8 @@ describe('Text', () => { it('should render the Text with proper font style class name', () => { const { getByText } = render( <> - italic - normal + italic + normal , ); expect(getByText('italic')).toHaveClass('mm-text--font-style-italic'); @@ -184,8 +191,8 @@ describe('Text', () => { it('should render the Text with proper overflow wrap class name', () => { const { getByText } = render( <> - break-word - normal + break-word + normal , ); expect(getByText('break-word')).toHaveClass( @@ -206,9 +213,9 @@ describe('Text', () => { it('should render the Text with proper text transform class name', () => { const { getByText } = render( <> - uppercase - lowercase - capitalize + uppercase + lowercase + capitalize , ); expect(getByText('uppercase')).toHaveClass( @@ -230,9 +237,9 @@ describe('Text', () => { it('should render the Text with proper direction', () => { const { getByText } = render( <> - auto - ltr - rtl + auto + ltr + rtl , ); expect(getByText('auto')).toHaveAttribute('dir', 'auto'); diff --git a/ui/components/component-library/text/deprecated/text.tsx b/ui/components/component-library/text/deprecated/text.tsx new file mode 100644 index 000000000..cc3a551ff --- /dev/null +++ b/ui/components/component-library/text/deprecated/text.tsx @@ -0,0 +1,89 @@ +import React, { forwardRef, Ref } from 'react'; +import classnames from 'classnames'; +import Box from '../../../ui/box'; +import { + FontWeight, + TextVariant, + TextColor, +} from '../../../../helpers/constants/design-system'; +import { TextProps } from './text.types'; + +const getTextElementDefault = (variant: TextVariant) => { + switch (variant) { + case TextVariant.displayMd: + return 'h1'; + case TextVariant.headingLg: + return 'h2'; + case TextVariant.headingMd: + return 'h3'; + case TextVariant.headingSm: + return 'h4'; + case TextVariant.inherit: + return 'span'; + // TextVariant.bodyLgMedium, TextVariant.bodyMd, TextVariant.bodyMdBold, TextVariant.bodySm, TextVariant.bodySmBold, TextVariant.bodyXs use default 'p' tag + default: + return 'p'; + } +}; + +/** + * @deprecated This version of the `` component has been deprecated + * Use `import { Text } from '../../component-library';` instead + */ + +export const Text = forwardRef(function Text( + { + variant = TextVariant.bodyMd, + color = TextColor.textDefault, + fontWeight, + fontStyle, + textTransform, + textAlign, + textDirection, + overflowWrap, + ellipsis, + as, + className = '', + children, + ...props + }: TextProps, + ref: Ref, +) { + // Check if as is set otherwise set a default tag based on variant + const Tag = as ?? getTextElementDefault(variant); + let strongTagFontWeight; + + if (Tag === 'strong') { + strongTagFontWeight = FontWeight.Bold; + } + + const computedClassName = classnames( + 'mm-text', + className, + `mm-text--${variant}`, + { + [`mm-text--font-weight-${strongTagFontWeight || fontWeight}`]: Boolean( + strongTagFontWeight || fontWeight, + ), + [`mm-text--font-style-${String(fontStyle)}`]: Boolean(fontStyle), + [`mm-text--ellipsis`]: Boolean(ellipsis), + [`mm-text--text-transform-${String(textTransform)}`]: + Boolean(textTransform), + [`mm-text--text-align-${String(textAlign)}`]: Boolean(textAlign), + [`mm-text--overflow-wrap-${String(overflowWrap)}`]: Boolean(overflowWrap), + }, + ); + + return ( + + {children} + + ); +}); diff --git a/ui/components/component-library/text/deprecated/text.types.ts b/ui/components/component-library/text/deprecated/text.types.ts new file mode 100644 index 000000000..f6d5debc5 --- /dev/null +++ b/ui/components/component-library/text/deprecated/text.types.ts @@ -0,0 +1,146 @@ +import React from 'react'; +import type { BoxProps } from '../../../ui/box/box.d'; +import { + FontWeight, + FontStyle, + TextVariant, + TextAlign, + TextTransform, + OverflowWrap, + TextColor, + Color, +} from '../../../../helpers/constants/design-system'; + +export enum TextDirection { + LeftToRight = 'ltr', + RightToLeft = 'rtl', + Auto = 'auto', +} + +/** + * The InvisibleCharacter is a very useful tool if you want to make sure a line of text + * takes up vertical space even if it's empty. + */ +export const InvisibleCharacter = '\u200B'; + +/** + * @deprecated ValidTag enum is deprecated in favor of a union of strings. + * To change the root html element tag of the Text component, use the `as` prop and string value. + * e.g. `Hello World` + * + * Contribute to replacing the enum with a union of string by submitting a PR + */ + +export enum ValidTag { + Dd = 'dd', + Div = 'div', + Dt = 'dt', + Em = 'em', + H1 = 'h1', + H2 = 'h2', + H3 = 'h3', + H4 = 'h4', + H5 = 'h5', + H6 = 'h6', + Li = 'li', + P = 'p', + Span = 'span', + Strong = 'strong', + Ul = 'ul', + Label = 'label', + Input = 'input', + Header = 'header', +} + +export type ValidTagType = + | 'dd' + | 'div' + | 'dt' + | 'em' + | 'h1' + | 'h2' + | 'h3' + | 'h4' + | 'h5' + | 'h6' + | 'li' + | 'p' + | 'span' + | 'strong' + | 'ul' + | 'label' + | 'input' + | 'header'; + +export interface TextProps extends BoxProps { + /** + * The text content of the Text component + */ + children?: React.ReactNode; + /** + * The variation of font styles including sizes and weights of the Text component + * Possible values: + * `displayMd` large screen: 48px / small screen: 32px, + * `headingLg` large screen: 32px / small screen: 24px, + * `headingMd` large screen: 24px / small screen: 18px, + * `headingSm` large screen: 18px / small screen: 16px, + * `bodyLgMedium` large screen: 18px / small screen: 16px, + * `bodyMd` large screen: 16px / small screen: 14px, + * `bodyMdMedium` large screen: 16px / small screen: 14px, + * `bodyMdBold` large screen: 16px / small screen: 14px, + * `bodySm` large screen: 14px / small screen: 12px, + * `bodySmMedium` large screen: 14px / small screen: 12px, + * `bodySmBold` large screen: 14px / small screen: 12px, + * `bodyXsMedium` large screen: 12px / small screen: 10px, + * `bodyXs` large screen: 12px / small screen: 10px, + * `inherit` + */ + variant?: TextVariant; + /** + * The color of the Text component Should use the COLOR object from + * ./ui/helpers/constants/design-system.js + */ + color?: TextColor | Color; + /** + * The font-weight of the Text component. Should use the FontWeight enum from + * ./ui/helpers/constants/design-system.js + */ + fontWeight?: FontWeight; + /** + * The font-style of the Text component. Should use the FontStyle enum from + * ./ui/helpers/constants/design-system.js + */ + fontStyle?: FontStyle; + /** + * The textTransform of the Text component. Should use the TextTransform enum from + * ./ui/helpers/constants/design-system.js + */ + textTransform?: TextTransform; + /** + * The text-align of the Text component. Should use the TextAlign enum from + * ./ui/helpers/constants/design-system.js + */ + textAlign?: TextAlign; + /** + * Change the dir (direction) global attribute of text to support the direction a language is written + * Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides) + */ + textDirection?: TextDirection; + /** + * The overflow-wrap of the Text component. Should use the OverflowWrap enum from + * ./ui/helpers/constants/design-system.js + */ + overflowWrap?: OverflowWrap; + /** + * Used for long strings that can be cut off... + */ + ellipsis?: boolean; + /** + * Changes the root html element tag of the Text component. + */ + as?: ValidTagType; + /** + * Additional className to assign the Text component + */ + className?: string; +} diff --git a/ui/components/component-library/text/index.ts b/ui/components/component-library/text/index.ts index 0e4a6d9a9..8ec2cd13f 100644 --- a/ui/components/component-library/text/index.ts +++ b/ui/components/component-library/text/index.ts @@ -1,3 +1,7 @@ export { Text } from './text'; export { ValidTag, TextDirection, InvisibleCharacter } from './text.types'; -export type { TextProps, ValidTagType } from './text.types'; +export type { + TextStyleUtilityProps, + TextProps, + ValidTagType, +} from './text.types'; diff --git a/ui/components/component-library/text/text.scss b/ui/components/component-library/text/text.scss index 2185ea659..46d6f2cc6 100644 --- a/ui/components/component-library/text/text.scss +++ b/ui/components/component-library/text/text.scss @@ -26,13 +26,11 @@ $text-variants: ( } } - - .mm-text { // Set default styles - color: var(--color-text-default); font-family: var(--font-family-sans); + &:is(strong), strong { font-weight: var(--font-weight-bold); } diff --git a/ui/components/component-library/text/text.stories.tsx b/ui/components/component-library/text/text.stories.tsx index 6ec6cbc75..6ddddbe07 100644 --- a/ui/components/component-library/text/text.stories.tsx +++ b/ui/components/component-library/text/text.stories.tsx @@ -16,15 +16,15 @@ import { Color, } from '../../../helpers/constants/design-system'; -import Box from '../../ui/box'; +import { Box } from '..'; + import README from './README.mdx'; import { Text } from './text'; -import { ValidTag, TextDirection } from './text.types'; +import { TextDirection } from './text.types'; export default { title: 'Components/ComponentLibrary/Text', component: Text, - parameters: { docs: { page: README, @@ -198,25 +198,58 @@ export const Ellipsis: StoryFn = (args) => ( export const As: StoryFn = (args) => ( <> - {Object.keys(ValidTag).map((tag) => { - if (ValidTag[tag] === ValidTag.Input) { - return ( - - ); - } - return ( -
- - {ValidTag[tag]} - -
- ); - })} + + dd + + + div + + + dt + + + em + + + h1 + + + h2 + + + h3 + + + h4 + + + h5 + + + h6 + + + li + + + p + + + span + + + strong + + + ul + + + label + + + header + + ); @@ -243,10 +276,10 @@ export const TextDirectionStory: StoryFn = (args) => ( export const Strong: StoryFn = (args) => ( <> - This is an as="strong" demo. + Text as="strong" tag - This is a strong element demo. + This is a strong tag as a child inside of Text ); diff --git a/ui/components/component-library/text/text.test.tsx b/ui/components/component-library/text/text.test.tsx index 2de6ce764..cc6f08cdd 100644 --- a/ui/components/component-library/text/text.test.tsx +++ b/ui/components/component-library/text/text.test.tsx @@ -8,10 +8,9 @@ import { TextColor, TextTransform, TextVariant, - Color, } from '../../../helpers/constants/design-system'; import { TextDirection } from './text.types'; -import { Text } from '.'; +import { Text } from './text'; describe('Text', () => { it('should render the Text without crashing', () => { @@ -121,7 +120,7 @@ describe('Text', () => { text-default text-alternative text-muted - overlay-inverse + overlay-inverse primary-default primary-inverse error-default @@ -133,30 +132,34 @@ describe('Text', () => { info-inverse , ); - expect(getByText('text-default')).toHaveClass('box--color-text-default'); + expect(getByText('text-default')).toHaveClass('mm-box--color-text-default'); expect(getByText('text-alternative')).toHaveClass( - 'box--color-text-alternative', + 'mm-box--color-text-alternative', ); - expect(getByText('text-muted')).toHaveClass('box--color-text-muted'); + expect(getByText('text-muted')).toHaveClass('mm-box--color-text-muted'); expect(getByText('primary-default')).toHaveClass( - 'box--color-primary-default', + 'mm-box--color-primary-default', ); expect(getByText('primary-inverse')).toHaveClass( - 'box--color-primary-inverse', + 'mm-box--color-primary-inverse', + ); + expect(getByText('error-default')).toHaveClass( + 'mm-box--color-error-default', + ); + expect(getByText('error-inverse')).toHaveClass( + 'mm-box--color-error-inverse', ); - expect(getByText('error-default')).toHaveClass('box--color-error-default'); - expect(getByText('error-inverse')).toHaveClass('box--color-error-inverse'); expect(getByText('success-default')).toHaveClass( - 'box--color-success-default', + 'mm-box--color-success-default', ); expect(getByText('success-inverse')).toHaveClass( - 'box--color-success-inverse', + 'mm-box--color-success-inverse', ); expect(getByText('warning-inverse')).toHaveClass( - 'box--color-warning-inverse', + 'mm-box--color-warning-inverse', ); - expect(getByText('info-default')).toHaveClass('box--color-info-default'); - expect(getByText('info-inverse')).toHaveClass('box--color-info-inverse'); + expect(getByText('info-default')).toHaveClass('mm-box--color-info-default'); + expect(getByText('info-inverse')).toHaveClass('mm-box--color-info-inverse'); }); it('should render the Text with proper font style class name', () => { diff --git a/ui/components/component-library/text/text.tsx b/ui/components/component-library/text/text.tsx index 3bd9b423e..25d763433 100644 --- a/ui/components/component-library/text/text.tsx +++ b/ui/components/component-library/text/text.tsx @@ -1,12 +1,16 @@ -import React, { forwardRef, Ref } from 'react'; +import React from 'react'; import classnames from 'classnames'; -import Box from '../../ui/box'; + import { - FontWeight, TextVariant, TextColor, } from '../../../helpers/constants/design-system'; -import { TextProps } from './text.types'; + +import { Box } from '..'; + +import type { PolymorphicRef } from '../box'; + +import { TextProps, TextComponent } from './text.types'; const getTextElementDefault = (variant: TextVariant) => { switch (variant) { @@ -26,59 +30,50 @@ const getTextElementDefault = (variant: TextVariant) => { } }; -export const Text = forwardRef(function Text( - { - variant = TextVariant.bodyMd, - color = TextColor.textDefault, - fontWeight, - fontStyle, - textTransform, - textAlign, - textDirection, - overflowWrap, - ellipsis, - as, - className = '', - children, - ...props - }: TextProps, - ref: Ref, -) { - // Check if as is set otherwise set a default tag based on variant - const Tag = as ?? getTextElementDefault(variant); - let strongTagFontWeight; - - if (Tag === 'strong') { - strongTagFontWeight = FontWeight.Bold; - } - - const computedClassName = classnames( - 'mm-text', - className, - `mm-text--${variant}`, +export const Text: TextComponent = React.forwardRef( + ( { - [`mm-text--font-weight-${strongTagFontWeight || fontWeight}`]: Boolean( - strongTagFontWeight || fontWeight, - ), - [`mm-text--font-style-${String(fontStyle)}`]: Boolean(fontStyle), - [`mm-text--ellipsis`]: Boolean(ellipsis), - [`mm-text--text-transform-${String(textTransform)}`]: - Boolean(textTransform), - [`mm-text--text-align-${String(textAlign)}`]: Boolean(textAlign), - [`mm-text--overflow-wrap-${String(overflowWrap)}`]: Boolean(overflowWrap), - }, - ); - - return ( - - {children} - - ); -}); + variant = TextVariant.bodyMd, + fontWeight, + fontStyle, + textTransform, + textAlign, + textDirection, + overflowWrap, + ellipsis, + className = '', + children, + ...props + }: TextProps, + ref?: PolymorphicRef, + ) => { + // Set tag based on variant + // If as prop is passed tag will be overridden + const tag = getTextElementDefault(variant); + const computedClassName = classnames( + 'mm-text', + className, + `mm-text--${variant}`, + { + [`mm-text--font-weight-${fontWeight}`]: Boolean(fontWeight), + [`mm-text--font-style-${fontStyle}`]: Boolean(fontStyle), + [`mm-text--ellipsis`]: Boolean(ellipsis), + [`mm-text--text-transform-${textTransform}`]: Boolean(textTransform), + [`mm-text--text-align-${textAlign}`]: Boolean(textAlign), + [`mm-text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap), + }, + ); + return ( + + {children} + + ); + }, +); diff --git a/ui/components/component-library/text/text.types.ts b/ui/components/component-library/text/text.types.ts index c83a41ce7..2afc5a714 100644 --- a/ui/components/component-library/text/text.types.ts +++ b/ui/components/component-library/text/text.types.ts @@ -1,5 +1,4 @@ import React from 'react'; -import type { BoxProps } from '../../ui/box/box.d'; import { FontWeight, FontStyle, @@ -7,10 +6,13 @@ import { TextAlign, TextTransform, OverflowWrap, - TextColor, - Color, } from '../../../helpers/constants/design-system'; +import type { + StyleUtilityProps, + PolymorphicComponentPropWithRef, +} from '../box'; + export enum TextDirection { LeftToRight = 'ltr', RightToLeft = 'rtl', @@ -72,7 +74,11 @@ export type ValidTagType = | 'input' | 'header'; -export interface TextProps extends BoxProps { +export interface TextStyleUtilityProps extends StyleUtilityProps { + /** + * Additional className to assign the Text component + */ + className?: string; /** * The text content of the Text component */ @@ -96,11 +102,6 @@ export interface TextProps extends BoxProps { * `inherit` */ variant?: TextVariant; - /** - * The color of the Text component Should use the COLOR object from - * ./ui/helpers/constants/design-system.js - */ - color?: TextColor | Color; /** * The font-weight of the Text component. Should use the FontWeight enum from * ./ui/helpers/constants/design-system.js @@ -135,12 +136,11 @@ export interface TextProps extends BoxProps { * Used for long strings that can be cut off... */ ellipsis?: boolean; - /** - * Changes the root html element tag of the Text component. - */ - as?: ValidTagType; - /** - * Additional className to assign the Text component - */ - className?: string; } + +export type TextProps = + PolymorphicComponentPropWithRef; + +export type TextComponent = ( + props: TextProps, +) => React.ReactElement | null; diff --git a/ui/components/institutional/compliance-details/compliance-details.js b/ui/components/institutional/compliance-details/compliance-details.js index 65c98b825..58ec06c89 100644 --- a/ui/components/institutional/compliance-details/compliance-details.js +++ b/ui/components/institutional/compliance-details/compliance-details.js @@ -11,7 +11,8 @@ import { getComplianceTenantSubdomain, } from '../../../ducks/institutional/institutional'; import { formatDate } from '../../../helpers/utils/util'; -import { Text, Box } from '../../component-library'; +import { Box } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { TextColor, TextVariant, diff --git a/ui/components/institutional/compliance-modal/compliance-modal.js b/ui/components/institutional/compliance-modal/compliance-modal.js index 5bf2f2497..5c3805c56 100644 --- a/ui/components/institutional/compliance-modal/compliance-modal.js +++ b/ui/components/institutional/compliance-modal/compliance-modal.js @@ -4,7 +4,8 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { hideModal } from '../../../store/actions'; import Modal from '../../app/modal'; import Box from '../../ui/box'; -import { Text, ButtonIcon, IconSize, IconName } from '../../component-library'; +import { ButtonIcon, IconSize, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AlignItems, JustifyContent, diff --git a/ui/components/institutional/compliance-settings/compliance-settings.js b/ui/components/institutional/compliance-settings/compliance-settings.js index 73aa65401..4c1223252 100644 --- a/ui/components/institutional/compliance-settings/compliance-settings.js +++ b/ui/components/institutional/compliance-settings/compliance-settings.js @@ -11,12 +11,8 @@ import { } from '../../../helpers/constants/design-system'; import { I18nContext } from '../../../contexts/i18n'; import { mmiActionsFactory } from '../../../store/institutional/institution-background'; -import { - Text, - Button, - BUTTON_VARIANT, - BUTTON_SIZES, -} from '../../component-library'; +import { Button, BUTTON_VARIANT, BUTTON_SIZES } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box'; const ComplianceSettings = () => { diff --git a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js index f8dd64715..1f82c384a 100644 --- a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js +++ b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js @@ -6,7 +6,7 @@ import CustodyAccountList from '../../../pages/institutional/connect-custody/acc import { useI18nContext } from '../../../hooks/useI18nContext'; import { removeAccount } from '../../../store/actions'; import withModalProps from '../../../helpers/higher-order-components/with-modal-props'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box'; import { BorderRadius, diff --git a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js index 36e1ef821..f98b16dda 100644 --- a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js +++ b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js @@ -27,7 +27,8 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; -import { Text, Button, BUTTON_VARIANT } from '../../component-library'; +import { Button, BUTTON_VARIANT } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; const CustodyConfirmLink = () => { const t = useI18nContext(); diff --git a/ui/components/institutional/custody-labels/custody-labels.js b/ui/components/institutional/custody-labels/custody-labels.js index b095e5f3e..3044d0f9a 100644 --- a/ui/components/institutional/custody-labels/custody-labels.js +++ b/ui/components/institutional/custody-labels/custody-labels.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Text, Label } from '../../component-library'; +import { Label } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { TextTransform, BackgroundColor, diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js index 232f4817f..d9e1e98ce 100644 --- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js +++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js @@ -12,8 +12,8 @@ import { ModalContent, ModalHeader, ModalOverlay, - Text, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { BlockSize, diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js index 813a55662..4a17f7c77 100644 --- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js +++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js @@ -24,9 +24,9 @@ import { IconName, IconSize, ButtonLink, - Text, Box, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; const InteractiveReplacementTokenNotification = ({ isVisible }) => { const t = useI18nContext(); diff --git a/ui/components/institutional/jwt-dropdown/jwt-dropdown.js b/ui/components/institutional/jwt-dropdown/jwt-dropdown.js index 118f522e7..5e43e163f 100644 --- a/ui/components/institutional/jwt-dropdown/jwt-dropdown.js +++ b/ui/components/institutional/jwt-dropdown/jwt-dropdown.js @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import Dropdown from '../../ui/dropdown'; import { Color } from '../../../helpers/constants/design-system'; -import { Box, Text } from '../../component-library'; +import { Box } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { useI18nContext } from '../../../hooks/useI18nContext'; const JwtDropdown = (props) => { diff --git a/ui/components/institutional/jwt-url-form/jwt-url-form.js b/ui/components/institutional/jwt-url-form/jwt-url-form.js index 5ddf29ac1..867e32095 100644 --- a/ui/components/institutional/jwt-url-form/jwt-url-form.js +++ b/ui/components/institutional/jwt-url-form/jwt-url-form.js @@ -8,7 +8,8 @@ import { FlexDirection, TextVariant, } from '../../../helpers/constants/design-system'; -import { Box, Button, Text } from '../../component-library'; +import { Box, Button } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import JwtDropdown from '../jwt-dropdown'; const JwtUrlForm = (props) => { diff --git a/ui/components/institutional/note-to-trader/note-to-trader.js b/ui/components/institutional/note-to-trader/note-to-trader.js index d4aa601c0..019fa0862 100644 --- a/ui/components/institutional/note-to-trader/note-to-trader.js +++ b/ui/components/institutional/note-to-trader/note-to-trader.js @@ -5,7 +5,8 @@ import { FlexDirection, JustifyContent, } from '../../../helpers/constants/design-system'; -import { Label, Text } from '../../component-library'; +import { Label } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box'; const NoteToTrader = (props) => { diff --git a/ui/components/institutional/transaction-failed-modal/transaction-failed.js b/ui/components/institutional/transaction-failed-modal/transaction-failed.js index c594c8097..8c4188794 100644 --- a/ui/components/institutional/transaction-failed-modal/transaction-failed.js +++ b/ui/components/institutional/transaction-failed-modal/transaction-failed.js @@ -13,7 +13,8 @@ import { TextAlign, TextVariant, } from '../../../helpers/constants/design-system'; -import { Text, Icon, IconName, IconSize } from '../../component-library'; +import { Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; const TransactionFailedModal = ({ hideModal, diff --git a/ui/components/institutional/wrong-network-notification/wrong-network-notification.js b/ui/components/institutional/wrong-network-notification/wrong-network-notification.js index 3fecdb764..b260e84dc 100644 --- a/ui/components/institutional/wrong-network-notification/wrong-network-notification.js +++ b/ui/components/institutional/wrong-network-notification/wrong-network-notification.js @@ -12,7 +12,8 @@ import { getSelectedAccountCachedBalance } from '../../../selectors'; import { getIsCustodianSupportedChain } from '../../../selectors/institutional/selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { getProviderConfig } from '../../../ducks/metamask/metamask'; -import { Text, Icon, IconName, IconSize } from '../../component-library'; +import { Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../../ui/box'; const WrongNetworkNotification = () => { diff --git a/ui/components/multichain/account-details/account-details-authenticate.js b/ui/components/multichain/account-details/account-details-authenticate.js index ba0b1236b..d0deb1203 100644 --- a/ui/components/multichain/account-details/account-details-authenticate.js +++ b/ui/components/multichain/account-details/account-details-authenticate.js @@ -12,9 +12,9 @@ import { ButtonPrimary, ButtonSecondary, FormTextField, - Text, Box, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { exportAccount, hideWarning } from '../../../store/actions'; diff --git a/ui/components/multichain/account-details/account-details-key.js b/ui/components/multichain/account-details/account-details-key.js index 50e3517b1..cc46a474c 100644 --- a/ui/components/multichain/account-details/account-details-key.js +++ b/ui/components/multichain/account-details/account-details-key.js @@ -5,9 +5,9 @@ import { ButtonIcon, ButtonPrimary, IconName, - Text, Box, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AlignItems, BorderColor, diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js index 2921b0db0..d8bb25339 100644 --- a/ui/components/multichain/account-details/account-details.js +++ b/ui/components/multichain/account-details/account-details.js @@ -14,9 +14,9 @@ import { ModalContent, ModalHeader, ModalOverlay, - Text, Box, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { getMetaMaskAccountsOrdered } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js index cb763097d..ec69a70be 100644 --- a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js +++ b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js @@ -25,13 +25,13 @@ import { findKeyringForAddress } from '../../../ducks/metamask/metamask'; import { NETWORKS_ROUTE } from '../../../helpers/constants/routes'; import { MenuItem } from '../../ui/menu'; import { - Text, IconName, Popover, PopoverPosition, ModalFocus, PopoverRole, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { MetaMetricsEventCategory, MetaMetricsEventLinkType, diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index 5066578fd..6fbfa876e 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -11,7 +11,6 @@ import { AccountListItemMenu } from '..'; import { AvatarAccount, Box, - Text, AvatarFavicon, Tag, ButtonLink, @@ -20,6 +19,7 @@ import { IconSize, AvatarAccountVariant, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { Color, TextAlign, diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js index 52f17dba6..03513f477 100644 --- a/ui/components/multichain/account-list-menu/account-list-menu.js +++ b/ui/components/multichain/account-list-menu/account-list-menu.js @@ -7,13 +7,13 @@ import { IconName, ButtonLink, TextFieldSearch, - Text, Box, Modal, ModalContent, ModalOverlay, ModalHeader, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AccountListItem, CreateAccount, ImportAccount } from '..'; import { BlockSize, diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js index 8ac99e61e..a3986ad36 100644 --- a/ui/components/multichain/account-picker/account-picker.js +++ b/ui/components/multichain/account-picker/account-picker.js @@ -7,8 +7,8 @@ import { AvatarAccountVariant, Icon, IconName, - Text, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AlignItems, BackgroundColor, diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js index 50ff45780..d67107a67 100644 --- a/ui/components/multichain/global-menu/global-menu.js +++ b/ui/components/multichain/global-menu/global-menu.js @@ -12,12 +12,10 @@ import { } from '../../../helpers/constants/routes'; import { lockMetamask } from '../../../store/actions'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - IconName, - ///: BEGIN:ONLY_INCLUDE_IN(snaps) - Text, - ///: END:ONLY_INCLUDE_IN(snaps) -} from '../../component-library'; +import { IconName } from '../../component-library'; +///: BEGIN:ONLY_INCLUDE_IN(snaps) +import { Text } from '../../component-library/text/deprecated'; +///: END:ONLY_INCLUDE_IN(snaps) import { Menu, MenuItem } from '../../ui/menu'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app'; diff --git a/ui/components/multichain/import-account/import-account.js b/ui/components/multichain/import-account/import-account.js index ea5f61b32..e07b31826 100644 --- a/ui/components/multichain/import-account/import-account.js +++ b/ui/components/multichain/import-account/import-account.js @@ -7,7 +7,8 @@ import { MetaMetricsEventCategory, MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; -import { ButtonLink, Label, Text, Box } from '../../component-library'; +import { ButtonLink, Label, Box } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Dropdown from '../../ui/dropdown'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { diff --git a/ui/components/multichain/import-account/json.js b/ui/components/multichain/import-account/json.js index ac14d45de..af768103f 100644 --- a/ui/components/multichain/import-account/json.js +++ b/ui/components/multichain/import-account/json.js @@ -5,10 +5,10 @@ import FileInput from 'react-simple-file-input'; import { ButtonLink, FormTextField, - Text, TEXT_FIELD_SIZES, TEXT_FIELD_TYPES, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { Size, TextVariant, diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js index 0006a332e..3569e21f7 100644 --- a/ui/components/multichain/network-list-menu/network-list-menu.js +++ b/ui/components/multichain/network-list-menu/network-list-menu.js @@ -30,9 +30,9 @@ import { ModalContent, ModalHeader, ModalOverlay, - Text, Box, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app'; diff --git a/ui/components/multichain/product-tour-popover/product-tour-popover.js b/ui/components/multichain/product-tour-popover/product-tour-popover.js index d782bc44c..11b683fdd 100644 --- a/ui/components/multichain/product-tour-popover/product-tour-popover.js +++ b/ui/components/multichain/product-tour-popover/product-tour-popover.js @@ -14,13 +14,8 @@ import { TextVariant, TextAlign, } from '../../../helpers/constants/design-system'; -import { - ButtonBase, - ButtonIcon, - IconName, - Text, - Box, -} from '../../component-library'; +import { ButtonBase, ButtonIcon, IconName, Box } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { Menu } from '../../ui/menu'; diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js index d305660c9..4ddb40dcd 100644 --- a/ui/components/multichain/token-list-item/token-list-item.js +++ b/ui/components/multichain/token-list-item/token-list-item.js @@ -18,9 +18,9 @@ import { AvatarNetwork, AvatarToken, BadgeWrapper, - Text, Box, } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { getCurrentChainId, getCurrentNetwork, diff --git a/ui/components/ui/box/box.stories.tsx b/ui/components/ui/box/box.stories.tsx index 1491ae6e2..1450fce89 100644 --- 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'; +import { Text } from '../../component-library/text/deprecated'; import Box from './box'; diff --git a/ui/components/ui/callout/callout.js b/ui/components/ui/callout/callout.js index c2a8f671d..6010129ed 100644 --- a/ui/components/ui/callout/callout.js +++ b/ui/components/ui/callout/callout.js @@ -4,7 +4,8 @@ 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, Text } from '../../component-library'; +import { ButtonIcon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; /** * @deprecated `` has been deprecated in favor of the `` diff --git a/ui/components/ui/callout/callout.stories.js b/ui/components/ui/callout/callout.stories.js index 505533bc3..386ae05bf 100644 --- a/ui/components/ui/callout/callout.stories.js +++ b/ui/components/ui/callout/callout.stories.js @@ -5,7 +5,7 @@ import { TextVariant, } from '../../../helpers/constants/design-system'; import Box from '../box'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; 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 index 1c8aaa180..a2107f342 100644 --- a/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js +++ b/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js @@ -12,7 +12,8 @@ import Box from '../box/box'; import ActionableMessage from '../actionable-message/actionable-message'; import { getCurrentChainId } from '../../../selectors'; import { getCompletedOnboarding } from '../../../ducks/metamask/metamask'; -import { Text, Icon, IconName, IconSize } from '../../component-library'; +import { Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; 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 index 8e944efec..651897afa 100644 --- a/ui/components/ui/editable-label/editable-label.js +++ b/ui/components/ui/editable-label/editable-label.js @@ -8,12 +8,8 @@ import { TextVariant, } from '../../../helpers/constants/design-system'; import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts'; -import { - ButtonIcon, - FormTextField, - IconName, - Text, -} from '../../component-library'; +import { ButtonIcon, FormTextField, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Box from '../box/box'; export default class EditableLabel extends Component { 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 index e1a51bc69..85f1f1943 100644 --- a/ui/components/ui/export-text-container/export-text-container.component.js +++ b/ui/components/ui/export-text-container/export-text-container.component.js @@ -12,7 +12,8 @@ import { TextVariant, } from '../../../helpers/constants/design-system'; import Box from '../box/box'; -import { ButtonSecondary, Text } 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; diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js index 877de5b52..ba522fa4b 100644 --- a/ui/components/ui/form-field/form-field.js +++ b/ui/components/ui/form-field/form-field.js @@ -12,7 +12,8 @@ import { import NumericInput from '../numeric-input/numeric-input.component'; import InfoTooltip from '../info-tooltip/info-tooltip'; -import { Text, Box } from '../../component-library'; +import { Box } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; /** * @deprecated The `` component has been deprecated in favor of the new `` component from the component-library. diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js index 16022af64..1a4f6bc9d 100644 --- a/ui/components/ui/form-field/form-field.stories.js +++ b/ui/components/ui/form-field/form-field.stories.js @@ -3,7 +3,8 @@ import React, { useState } from 'react'; import Tooltip from '../tooltip'; -import { Icon, IconName, Text } from '../../component-library'; +import { Icon, IconName } 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 '.'; diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js index cc95d8343..1e4acfffe 100644 --- 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'; +import { Text } from '../../component-library/text/deprecated'; 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 index 592d43c8e..802ac739a 100644 --- a/ui/components/ui/logo/logo.stories.js +++ b/ui/components/ui/logo/logo.stories.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { BackgroundColor } from '../../../helpers/constants/design-system'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import Card from '../card'; import Box from '../box'; diff --git a/ui/components/ui/menu/menu-item.js b/ui/components/ui/menu/menu-item.js index 10fcce629..a22d1ad48 100644 --- a/ui/components/ui/menu/menu-item.js +++ b/ui/components/ui/menu/menu-item.js @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Text, Icon, IconSize } from '../../component-library'; +import { Icon, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; 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 index 859954144..f059e822a 100644 --- 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'; +import { Text } from '../../component-library/text/deprecated'; 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 index 0d449c443..778955dc3 100644 --- a/ui/components/ui/new-network-info/new-network-info.js +++ b/ui/components/ui/new-network-info/new-network-info.js @@ -25,7 +25,8 @@ 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, Text } from '../../component-library'; +import { Icon, IconName } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; 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 index 60101b487..7e04db323 100644 --- a/ui/components/ui/nft-info/nft-info.js +++ b/ui/components/ui/nft-info/nft-info.js @@ -10,7 +10,7 @@ import { } from '../../../helpers/constants/design-system'; import Identicon from '../identicon'; import Button from '../button'; -import { Text } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; export default function NftInfo({ assetName, tokenAddress, tokenId }) { const t = useContext(I18nContext); diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js index 8eba851be..9ae1756d8 100644 --- 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'; +import { Text } from '../../component-library/text/deprecated'; export default function NumericInput({ detailText = '', diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js index 261883c56..51c32f715 100644 --- a/ui/components/ui/popover/popover.component.js +++ b/ui/components/ui/popover/popover.component.js @@ -19,13 +19,8 @@ import { BLOCK_SIZES, } from '../../../helpers/constants/design-system'; -import { - ButtonIcon, - Icon, - IconName, - IconSize, - Text, -} from '../../component-library'; +import { ButtonIcon, Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; 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 index 3a4b4329d..c63e199d1 100644 --- 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'; +import { Text } from '../../component-library/text/deprecated'; 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 index d90471317..c6e700bae 100644 --- a/ui/components/ui/review-spending-cap/review-spending-cap.js +++ b/ui/components/ui/review-spending-cap/review-spending-cap.js @@ -3,13 +3,8 @@ import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import Box from '../box'; import Tooltip from '../tooltip'; -import { - ButtonLink, - Icon, - IconName, - IconSize, - Text, -} from '../../component-library'; +import { ButtonLink, Icon, IconName, IconSize } from '../../component-library'; +import { Text } from '../../component-library/text/deprecated'; import { AlignItems, DISPLAY, diff --git a/ui/components/ui/slider/slider.component.js b/ui/components/ui/slider/slider.component.js index 581665062..4bb101809 100644 --- a/ui/components/ui/slider/slider.component.js +++ b/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'; +import { Text } from '../../component-library/text/deprecated'; const styles = { root: { diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js index bbb48602c..6b8f26e84 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js @@ -14,7 +14,8 @@ import { FLEX_WRAP, TextVariant, } from '../../../../../helpers/constants/design-system'; -import { Icon, IconName, IconSize, Text } from '../../../../component-library'; +import { Icon, IconName, IconSize } from '../../../../component-library'; +import { Text } from '../../../../component-library/text/deprecated'; export const DropdownTab = ({ activeClassName, diff --git a/ui/components/ui/tooltip/tooltip.stories.js b/ui/components/ui/tooltip/tooltip.stories.js index 9eb054443..f17b78f2b 100644 --- a/ui/components/ui/tooltip/tooltip.stories.js +++ b/ui/components/ui/tooltip/tooltip.stories.js @@ -6,7 +6,6 @@ import Tooltip from '.'; export default { title: 'Components/UI/Tooltip', - argTypes: { containerClassName: { control: 'text', diff --git a/ui/helpers/utils/accounts.js b/ui/helpers/utils/accounts.js index cb974f1c6..74a23ce34 100644 --- a/ui/helpers/utils/accounts.js +++ b/ui/helpers/utils/accounts.js @@ -1,4 +1,4 @@ -import { INVISIBLE_CHARACTER } from '../../components/component-library/text/deprecated'; +import { InvisibleCharacter } from '../../components/component-library'; export function getAccountNameErrorMessage( accounts, @@ -30,7 +30,7 @@ export function getAccountNameErrorMessage( let errorMessage; if (isValidAccountName) { - errorMessage = INVISIBLE_CHARACTER; // Using an invisible character, so the spacing stays constant + errorMessage = InvisibleCharacter; // Using an invisible character, so the spacing stays constant } else if (isDuplicateAccountName) { errorMessage = context.t('accountNameDuplicate'); } else if (isReservedAccountName) { diff --git a/ui/helpers/utils/permission.js b/ui/helpers/utils/permission.js index 34e01ee7b..0efb8b49c 100644 --- a/ui/helpers/utils/permission.js +++ b/ui/helpers/utils/permission.js @@ -17,13 +17,13 @@ import Tooltip from '../../components/ui/tooltip'; import { AvatarIcon, ///: BEGIN:ONLY_INCLUDE_IN(snaps) - Text, Icon, ///: END:ONLY_INCLUDE_IN IconName, IconSize, } from '../../components/component-library'; ///: BEGIN:ONLY_INCLUDE_IN(snaps) +import { Text } from '../../components/component-library/text/deprecated'; import { Color, FontWeight, IconColor } from '../constants/design-system'; import { coinTypeToProtocolName, diff --git a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js index 309a14b39..f74dd27e9 100644 --- a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js +++ b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js @@ -24,9 +24,9 @@ import { ButtonIconSize, ButtonLink, IconName, - Text, Box, } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; import { getCurrentChainId, getRpcPrefsForCurrentProvider, diff --git a/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap b/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap index 3512ff69b..eb21729f2 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap +++ b/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap @@ -135,7 +135,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="mm-box custom-nonce__header mm-box--display-inline-flex mm-box--justify-content-flex-start mm-box--align-items-center" >
Nonce
@@ -146,7 +146,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
2
@@ -320,7 +320,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="mm-box custom-nonce__header mm-box--display-inline-flex mm-box--justify-content-flex-start mm-box--align-items-center" >
Nonce
@@ -331,7 +331,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
2
@@ -505,7 +505,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="mm-box custom-nonce__header mm-box--display-inline-flex mm-box--justify-content-flex-start mm-box--align-items-center" >
Nonce
@@ -516,7 +516,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
2
@@ -690,7 +690,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="mm-box custom-nonce__header mm-box--display-inline-flex mm-box--justify-content-flex-start mm-box--align-items-center" >
Nonce
@@ -701,7 +701,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
2
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js index b25933c8b..3a81f204c 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js +++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js @@ -31,8 +31,8 @@ import { ButtonIcon, Icon, IconName, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import TransactionDetailItem from '../../../components/app/transaction-detail-item/transaction-detail-item.component'; import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display'; import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; diff --git a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js index 6c663db0b..840f5b8ac 100644 --- a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js +++ b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import ConfirmTransactionBase from '../confirm-transaction-base'; import { toBuffer } from '../../../shared/modules/buffer-utils'; import Box from '../../components/ui/box'; -import { Text } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; import { Color, DISPLAY, diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js index 717192998..b93a8671b 100644 --- a/ui/pages/create-account/connect-hardware/index.js +++ b/ui/pages/create-account/connect-hardware/index.js @@ -24,8 +24,8 @@ import { BUTTON_VARIANT, BUTTON_SIZES, Button, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { TextColor } from '../../../helpers/constants/design-system'; import SelectHardware from './select-hardware'; diff --git a/ui/pages/desktop-pairing/desktop-pairing.component.js b/ui/pages/desktop-pairing/desktop-pairing.component.js index c529aa261..fb42e1d54 100644 --- a/ui/pages/desktop-pairing/desktop-pairing.component.js +++ b/ui/pages/desktop-pairing/desktop-pairing.component.js @@ -16,7 +16,8 @@ import { import Box from '../../components/ui/box/box'; import { useCopyToClipboard } from '../../hooks/useCopyToClipboard'; import Tooltip from '../../components/ui/tooltip'; -import { Text, Button } from '../../components/component-library'; +import { Button } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; export default function DesktopPairingPage({ generateDesktopOtp, diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 6bd76ea55..fff8e559c 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -42,12 +42,12 @@ import { ButtonIcon, ButtonIconSize, IconName, - Text, Box, ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi) ButtonLink, ///: END:ONLY_INCLUDE_IN } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; import { ASSET_ROUTE, diff --git a/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js b/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js index 9820ff691..4ccba021a 100644 --- a/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js +++ b/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js @@ -17,8 +17,8 @@ import { ButtonIcon, ButtonIconSize, IconName, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import Box from '../../../components/ui/box'; import ComplianceSettings from '../../../components/institutional/compliance-settings'; diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js index 61a572f74..4f0257e77 100644 --- a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js +++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js @@ -19,13 +19,13 @@ import { setProviderType } from '../../../store/actions'; import { mmiActionsFactory } from '../../../store/institutional/institution-background'; import { Label, - Text, ButtonLink, Button, BUTTON_SIZES, BUTTON_VARIANT, Box, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { complianceActivated, getInstitutionalConnectRequests, diff --git a/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js b/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js index fa7f60b7c..627f7acb3 100644 --- a/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js +++ b/ui/pages/institutional/confirm-add-institutional-feature/confirm-add-institutional-feature.js @@ -8,10 +8,10 @@ import { INSTITUTIONAL_FEATURES_DONE_ROUTE } from '../../../helpers/constants/ro import { MetaMetricsContext } from '../../../contexts/metametrics'; import { getMostRecentOverviewPage } from '../../../ducks/history/history'; import { - Text, BUTTON_SIZES, BUTTON_VARIANT, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { TextColor, TextVariant, diff --git a/ui/pages/institutional/connect-custody/account-list.js b/ui/pages/institutional/connect-custody/account-list.js index 0cf1a85fe..a4f868b18 100644 --- a/ui/pages/institutional/connect-custody/account-list.js +++ b/ui/pages/institutional/connect-custody/account-list.js @@ -18,7 +18,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { Box, Button, - Text, Label, Icon, IconName, @@ -27,6 +26,7 @@ import { BUTTON_VARIANT, BUTTON_SIZES, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; const getButtonLinkHref = (account) => { diff --git a/ui/pages/institutional/custody/custody.js b/ui/pages/institutional/custody/custody.js index 56eda94e7..0261eec90 100644 --- a/ui/pages/institutional/custody/custody.js +++ b/ui/pages/institutional/custody/custody.js @@ -14,7 +14,6 @@ import { MetaMetricsContext } from '../../../contexts/metametrics'; import { ButtonIcon, Button, - Text, Label, IconName, IconSize, @@ -22,6 +21,7 @@ import { BUTTON_VARIANT, Box, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { AlignItems, Display, diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js index 495b15d88..48b8f0145 100644 --- a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js +++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js @@ -4,11 +4,11 @@ import { useSelector } from 'react-redux'; import { getMostRecentOverviewPage } from '../../../ducks/history/history'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { - Text, Box, Button, BUTTON_VARIANT, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { TextColor, TypographyVariant, diff --git a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js index f3d83e988..b39fc78eb 100644 --- a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js +++ b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js @@ -17,7 +17,6 @@ import { showInteractiveReplacementTokenBanner, } from '../../../store/institutional/institution-background'; import { - Text, Label, Icon, ButtonLink, @@ -28,6 +27,7 @@ import { BUTTON_VARIANT, BUTTON_SIZES, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { OverflowWrap, TextColor, diff --git a/ui/pages/keychains/reveal-seed.js b/ui/pages/keychains/reveal-seed.js index ac4db39ab..3b045a173 100644 --- a/ui/pages/keychains/reveal-seed.js +++ b/ui/pages/keychains/reveal-seed.js @@ -22,7 +22,6 @@ import { import Box from '../../components/ui/box'; import { - Text, Label, BannerAlert, Button, @@ -33,6 +32,7 @@ import { TEXT_FIELD_TYPES, BUTTON_SIZES, } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; import { useI18nContext } from '../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../contexts/metametrics'; import ZENDESK_URLS from '../../helpers/constants/zendesk-url'; diff --git a/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx b/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx index 374f17b46..37ea6e02d 100644 --- a/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx +++ b/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx @@ -7,8 +7,8 @@ import { ModalContent, ModalHeader, ModalOverlay, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { AlignItems, Display, diff --git a/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx b/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx index 2ec9aea8c..5510fdf73 100644 --- a/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx +++ b/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx @@ -2,7 +2,8 @@ import { Snap } from '@metamask/snaps-utils'; import React, { useState, useEffect } from 'react'; import { shallowEqual, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; -import { Box, Text } from '../../../components/component-library'; +import { Box } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { AlignItems, Display, diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx index 7e47b59ad..32aa9db0f 100644 --- a/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx +++ b/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Box, Text } from '../../../components/component-library'; +import { Box } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { FlexDirection, TextVariant, diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx index ff44b01d4..e0aac1947 100644 --- a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx +++ b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx @@ -9,8 +9,8 @@ import { Icon, IconName, Tag, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { AlignItems, BackgroundColor, diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx index 711446ef4..ae8cd738f 100644 --- a/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx +++ b/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx @@ -7,8 +7,8 @@ import { Box, Button, Tag, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { BlockSize, Display, diff --git a/ui/pages/keyring-snaps/snap-card/snap-card.tsx b/ui/pages/keyring-snaps/snap-card/snap-card.tsx index 30277e626..c44e068d4 100644 --- a/ui/pages/keyring-snaps/snap-card/snap-card.tsx +++ b/ui/pages/keyring-snaps/snap-card/snap-card.tsx @@ -9,14 +9,14 @@ import { Button, Icon, IconName, - Text, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { AlignItems, BackgroundColor, BorderColor, BorderRadius, - Color, + TextColor, Display, FlexDirection, IconColor, @@ -110,7 +110,7 @@ export default function SnapCard({ {snapTitle} diff --git a/ui/pages/onboarding-flow/pin-extension/pin-extension.js b/ui/pages/onboarding-flow/pin-extension/pin-extension.js index 0c14d704e..75b6e3e6c 100644 --- a/ui/pages/onboarding-flow/pin-extension/pin-extension.js +++ b/ui/pages/onboarding-flow/pin-extension/pin-extension.js @@ -18,7 +18,7 @@ import { import { MetaMetricsContext } from '../../../contexts/metametrics'; import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding'; import { getFirstTimeFlowType } from '../../../selectors'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import OnboardingPinBillboard from './pin-billboard'; export default function OnboardingPinExtension() { diff --git a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js index f2130d817..9775b7cbb 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js +++ b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js @@ -26,12 +26,12 @@ import { MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; import { - Text, Box, Button, BUTTON_VARIANT, BUTTON_SIZES, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import SkipSRPBackup from './skip-srp-backup-popover'; export default function SecureYourWallet() { diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js index 00f83d79a..83b12dbbf 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.js +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom'; import { Carousel } from 'react-responsive-carousel'; import Mascot from '../../../components/ui/mascot'; import Button from '../../../components/ui/button'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import CheckBox from '../../../components/ui/check-box'; import Box from '../../../components/ui/box'; import { diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js index 52eec92ef..a69046846 100644 --- a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js +++ b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js @@ -22,9 +22,9 @@ import SnapAuthorshipHeader from '../../../../components/app/snaps/snap-authorsh import { AvatarIcon, IconName, - Text, ValidTag, } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import { getSnapName } from '../../../../helpers/utils/util'; import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list'; import { useScrollRequired } from '../../../../hooks/useScrollRequired'; diff --git a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js index 9deefe180..086f9f67d 100644 --- a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js +++ b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js @@ -21,9 +21,9 @@ import { AvatarIcon, IconName, IconSize, - Text, ValidTag, } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader'; import InstallError from '../../../../components/app/snaps/install-error/install-error'; import SnapAuthorshipHeader from '../../../../components/app/snaps/snap-authorship-header'; diff --git a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js index c3b6fdef3..152d2a606 100644 --- a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js +++ b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js @@ -25,9 +25,9 @@ import SnapAuthorshipHeader from '../../../../components/app/snaps/snap-authorsh import { AvatarIcon, IconName, - Text, ValidTag, } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import { useOriginMetadata } from '../../../../hooks/useOriginMetadata'; import { getSnapName } from '../../../../helpers/utils/util'; import { useScrollRequired } from '../../../../hooks/useScrollRequired'; diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js index ca3161185..caa8862e6 100644 --- a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js +++ b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js @@ -4,11 +4,8 @@ import PropTypes from 'prop-types'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import Box from '../../../../components/ui/box'; import SiteOrigin from '../../../../components/ui/site-origin'; -import { - IconSize, - Text, - ValidTag, -} from '../../../../components/component-library'; +import { IconSize, ValidTag } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import { FlexDirection, TextVariant, diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.js index 67533a739..72f23f1ee 100644 --- a/ui/pages/send/send-content/add-recipient/add-recipient.component.js +++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.js @@ -7,7 +7,7 @@ import ContactList from '../../../../components/app/contact-list'; import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component'; import { ellipsify } from '../../send.utils'; import Confusable from '../../../../components/ui/confusable'; -import { Text } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import Box from '../../../../components/ui/box'; import { TextColor, diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js index 8b8b6d165..b9b5f4c3b 100644 --- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js +++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -12,7 +12,7 @@ import { AssetType, TokenStandard, } from '../../../../../shared/constants/transaction'; -import { Text } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import { TextVariant } from '../../../../helpers/constants/design-system'; export default class SendAssetRow extends Component { diff --git a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js index 6f0a10fc2..8ff1a3b56 100644 --- a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js +++ b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js @@ -12,8 +12,8 @@ import { AvatarAccount, AvatarAccountSize, Box, - Text, } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import { AlignItems, Display, diff --git a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js index 40c3e410f..21c80d990 100644 --- a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js +++ b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js @@ -11,8 +11,8 @@ import { ButtonIcon, ButtonIconSize, IconName, - Text, } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import Tooltip from '../../../../components/ui/tooltip'; import { useI18nContext } from '../../../../hooks/useI18nContext'; diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js index ad4d0e627..0d6109899 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js @@ -7,7 +7,7 @@ import { } from '../../../helpers/utils/settings-search'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; import Typography from '../../../components/ui/typography/typography'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { FONT_WEIGHT, TextColor, diff --git a/ui/pages/settings/networks-tab/networks-list/networks-list.js b/ui/pages/settings/networks-tab/networks-list/networks-list.js index 7cb42959a..9fa629cd0 100644 --- a/ui/pages/settings/networks-tab/networks-list/networks-list.js +++ b/ui/pages/settings/networks-tab/networks-list/networks-list.js @@ -8,7 +8,7 @@ import { TextVariant, } from '../../../../helpers/constants/design-system'; import NetworksListItem from '../networks-list-item'; -import { Text } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; const NetworksList = ({ networkIsSelected, diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js index a823478c2..1f3e5770a 100644 --- a/ui/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/pages/settings/settings-tab/settings-tab.component.js @@ -18,7 +18,7 @@ import { handleSettingsRefs, } from '../../../helpers/utils/settings-search'; import { ThemeType } from '../../../../shared/constants/preferences'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; const sortedCurrencies = availableCurrencies.sort((a, b) => { return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()); diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js index 583c1f156..337c17952 100644 --- a/ui/pages/settings/settings.component.js +++ b/ui/pages/settings/settings.component.js @@ -33,9 +33,9 @@ import { ButtonIconSize, Icon, IconName, - Text, Box, } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; import { AlignItems, Color, diff --git a/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js index 86c722425..422552a5a 100644 --- a/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js +++ b/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js @@ -23,8 +23,8 @@ import { Icon, IconName, IconSize, - Text, } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; const SnapListTab = () => { const t = useI18nContext(); diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js index 5761fdea3..79d8ccb7e 100644 --- a/ui/pages/settings/snaps/view-snap/view-snap.js +++ b/ui/pages/settings/snaps/view-snap/view-snap.js @@ -33,7 +33,8 @@ import { getTargetSubjectMetadata, } from '../../../../selectors'; import { getSnapName } from '../../../../helpers/utils/util'; -import { Text, BUTTON_VARIANT } from '../../../../components/component-library'; +import { BUTTON_VARIANT } from '../../../../components/component-library'; +import { Text } from '../../../../components/component-library/text/deprecated'; import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list'; import { SnapDelineator } from '../../../../components/app/snaps/snap-delineator'; import { DelineatorType } from '../../../../helpers/constants/snaps'; diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js index dacb93729..da6b202d8 100644 --- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js +++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js @@ -32,7 +32,7 @@ import { import SwapsFooter from '../swaps-footer'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import SwapStepIcon from './swap-step-icon'; export default function AwaitingSignatures() { diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js index c9856fcb3..8d02a2ee1 100644 --- a/ui/pages/swaps/fee-card/fee-card.js +++ b/ui/pages/swaps/fee-card/fee-card.js @@ -14,7 +14,7 @@ import { import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; import { getUseCurrencyRateCheck } from '../../../selectors'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; const GAS_FEES_LEARN_MORE_URL = 'https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172'; diff --git a/ui/pages/swaps/import-token/import-token.js b/ui/pages/swaps/import-token/import-token.js index eb8983262..373da1028 100644 --- a/ui/pages/swaps/import-token/import-token.js +++ b/ui/pages/swaps/import-token/import-token.js @@ -5,7 +5,7 @@ import UrlIcon from '../../../components/ui/url-icon'; import Popover from '../../../components/ui/popover'; import Button from '../../../components/ui/button'; import Box from '../../../components/ui/box'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import ActionableMessage from '../../../components/ui/actionable-message/actionable-message'; import { TextVariant, diff --git a/ui/pages/swaps/list-with-search/list-with-search.js b/ui/pages/swaps/list-with-search/list-with-search.js index aeddbacb1..86a8897e2 100644 --- a/ui/pages/swaps/list-with-search/list-with-search.js +++ b/ui/pages/swaps/list-with-search/list-with-search.js @@ -13,7 +13,8 @@ import { TextVariant, BlockSize, } from '../../../helpers/constants/design-system'; -import { TextFieldSearch, Text } from '../../../components/component-library'; +import { TextFieldSearch } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import ItemList from '../searchable-item-list/item-list'; import { isValidHexAddress } from '../../../../shared/modules/hexstring-utils'; import { I18nContext } from '../../../contexts/i18n'; diff --git a/ui/pages/swaps/notification-page/notification-page.js b/ui/pages/swaps/notification-page/notification-page.js index a9835d4b1..67fb6e263 100644 --- a/ui/pages/swaps/notification-page/notification-page.js +++ b/ui/pages/swaps/notification-page/notification-page.js @@ -14,7 +14,8 @@ import { TEXT_ALIGN, IconColor, } from '../../../helpers/constants/design-system'; -import { Text, Icon, IconName } from '../../../components/component-library'; +import { Icon, IconName } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { PREPARE_SWAP_ROUTE } from '../../../helpers/constants/routes'; import SwapsFooter from '../swaps-footer'; import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps'; diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js index e1f0c5f0e..f83ad4800 100644 --- a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js +++ b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js @@ -115,12 +115,12 @@ import { IconSize, TextField, ButtonLink, - Text, Modal, ModalOverlay, ModalContent, ModalHeader, } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { BannerAlert } from '../../../components/component-library/banner-alert'; import { SWAPS_NOTIFICATION_ROUTE } from '../../../helpers/constants/routes'; import ImportToken from '../import-token'; diff --git a/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js b/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js index 771e21639..f013dfe83 100644 --- a/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js +++ b/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js @@ -11,7 +11,7 @@ import { AlignItems, TextVariant, } from '../../../helpers/constants/design-system'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import MascotBackgroundAnimation from '../mascot-background-animation/mascot-background-animation'; export default function QuotesLoadingAnimation(props) { diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js index 13b9e9f57..a363747b9 100644 --- a/ui/pages/swaps/prepare-swap-page/review-quote.js +++ b/ui/pages/swaps/prepare-swap-page/review-quote.js @@ -115,11 +115,8 @@ import { TEXT_ALIGN, Size, } from '../../../helpers/constants/design-system'; -import { - BannerAlert, - Text, - ButtonLink, -} from '../../../components/component-library'; +import { BannerAlert, ButtonLink } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; import { parseStandardTokenTransactionData } from '../../../../shared/modules/transaction.utils'; diff --git a/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js b/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js index 75c4056ac..839e11ece 100644 --- a/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js +++ b/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js @@ -14,7 +14,7 @@ import { FONT_WEIGHT, TextColor, } from '../../../helpers/constants/design-system'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import PopoverCustomBackground from '../popover-custom-background/popover-custom-background'; export default function SmartTransactionsPopover({ diff --git a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js index 1219fbd73..9db5fd2e9 100644 --- a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js +++ b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js @@ -12,11 +12,8 @@ import { BLOCK_SIZES, } from '../../../helpers/constants/design-system'; import { GasRecommendations } from '../../../../shared/constants/gas'; -import { - BannerAlert, - Text, - ButtonLink, -} from '../../../components/component-library'; +import { BannerAlert, ButtonLink } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; export default function ViewQuotePriceDifference(props) { const { diff --git a/ui/pages/swaps/slippage-buttons/slippage-buttons.js b/ui/pages/swaps/slippage-buttons/slippage-buttons.js index 64f81d7f9..b649e2442 100644 --- a/ui/pages/swaps/slippage-buttons/slippage-buttons.js +++ b/ui/pages/swaps/slippage-buttons/slippage-buttons.js @@ -15,7 +15,7 @@ import { } from '../../../helpers/constants/design-system'; import { getTranslatedStxErrorMessage } from '../swaps.util'; import { Slippage } from '../../../../shared/constants/swaps'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; export default function SlippageButtons({ onSelect, diff --git a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js index 9285fcb5e..7abba8697 100644 --- a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js +++ b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js @@ -31,7 +31,7 @@ import { DEFAULT_ROUTE, BUILD_QUOTE_ROUTE, } from '../../../helpers/constants/routes'; -import { Text } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import Box from '../../../components/ui/box'; import UrlIcon from '../../../components/ui/url-icon'; import { diff --git a/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js b/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js index 87a4e3ee2..ef9bc0063 100644 --- a/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js +++ b/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js @@ -11,7 +11,8 @@ import { Size, TextVariant, } from '../../../helpers/constants/design-system'; -import { ButtonLink, Text } from '../../../components/component-library'; +import { ButtonLink } from '../../../components/component-library'; +import { Text } from '../../../components/component-library/text/deprecated'; import { QUOTES_EXPIRED_ERROR, SWAP_FAILED_ERROR, diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js index 5ab20f615..aeae9d5c5 100644 --- a/ui/pages/token-allowance/token-allowance.js +++ b/ui/pages/token-allowance/token-allowance.js @@ -65,7 +65,8 @@ import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWar import SimulationErrorMessage from '../../components/ui/simulation-error-message'; import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field'; import SecurityProviderBannerMessage from '../../components/app/security-provider-banner-message/security-provider-banner-message'; -import { Text, Icon, IconName } from '../../components/component-library'; +import { Icon, IconName } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; import { ConfirmPageContainerWarning } from '../../components/app/confirm-page-container/confirm-page-container-content'; import CustomNonce from '../../components/app/custom-nonce'; diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js index 17f058187..9b9d515ef 100644 --- a/ui/pages/token-details/token-details-page.js +++ b/ui/pages/token-details/token-details-page.js @@ -28,8 +28,8 @@ import { ButtonIcon, ButtonIconSize, IconName, - Text, } from '../../components/component-library'; +import { Text } from '../../components/component-library/text/deprecated'; export default function TokenDetailsPage() { const dispatch = useDispatch();