m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating Text and import paths (#19949)

Browse Source
This commit is contained in:
George Marshall 2023-07-14 10:59:30 -07:00 committed by GitHub
parent 5bc0ba7f3a
commit 74cc312cb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
202 changed files with 740 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/add-network/add-network.js
View File

@ -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 = () => {

2
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
View File

@ -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();

2
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js
View File

@ -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) ||

2
ui/components/app/approve-content-card/approve-content-card.js
View File

@ -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,

8
ui/components/app/beta-header/index.js
View File

@ -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();

3
ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
View File

@ -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 {

2
ui/components/app/configure-snap-popup/configure-snap-popup.tsx
View File

@ -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,

2
ui/components/app/confirm-data/confirm-data.js
View File

@ -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();

2
ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
View File

@ -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,

2
ui/components/app/confirm-hexdata/confirm-hexdata.js
View File

@ -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 }) => {

2
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -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,

2
ui/components/app/confirm-page-container/snaps/snap-insight.js
View File

@ -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,

2
ui/components/app/confirm-subtitle/confirm-subtitle.js
View File

@ -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 = ({

2
ui/components/app/confirm-title/confirm-title.js
View File

@ -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,

3
ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
View File

@ -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();

2
ui/components/app/contact-list/recipient-group/recipient-group.component.js
View File

@ -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();

2
ui/components/app/create-new-vault/create-new-vault.js
View File

@ -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';

3
ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
View File

@ -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,

3
ui/components/app/custom-spending-cap/custom-spending-cap.js
View File

@ -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,

2
ui/components/app/detected-token/detected-token-address/detected-token-address.js
View File

@ -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();

3
ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
View File

@ -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;

2
ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
View File

@ -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,

3
ui/components/app/detected-token/detected-token-values/detected-token-values.js
View File

@ -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,

2
ui/components/app/edit-gas-display/edit-gas-display.component.js
View File

@ -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';

3
ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
View File

@ -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();

2
ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
View File

@ -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';

2
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
View File

@ -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,

2
ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
View File

@ -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';

2
ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js
View File

@ -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();

3
ui/components/app/ledger-instruction-field/ledger-instruction-field.js
View File

@ -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,

2
ui/components/app/loading-network-screen/loading-network-screen.component.js
View File

@ -10,8 +10,8 @@ import {
Icon,
IconName,
IconSize,
Text,
} from '../../component-library';
import { Text } from '../../component-library/text/deprecated';
import {
DISPLAY,
IconColor,

3
ui/components/app/modals/contract-details-modal/contract-details-modal.js
View File

@ -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,

2
ui/components/app/modals/customize-nonce/customize-nonce.component.js
View File

@ -17,8 +17,8 @@ import {
ButtonIconSize,
ButtonLink,
IconName,
Text,
} from '../../../component-library';
import { Text } from '../../../component-library/text/deprecated';
const CustomizeNonce = ({
hideModal,

2
ui/components/app/modals/eth-sign-modal/eth-sign-modal.js
View File

@ -14,8 +14,8 @@ import {
IconName,
IconSize,
Label,
Text,
} from '../../../component-library';
import { Text } from '../../../component-library/text/deprecated';
import {
AlignItems,
Display,

2
ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
View File

@ -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 {

2
ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
View File

@ -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,

2
ui/components/app/network-account-balance-header/network-account-balance-header.js
View File

@ -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,

2
ui/components/app/nft-default-image/nft-default-image.js
View File

@ -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({

3
ui/components/app/nft-details/nft-details.js
View File

@ -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';

3
ui/components/app/nfts-detection-notice/nfts-detection-notice.js
View File

@ -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,

3
ui/components/app/nfts-tab/nfts-tab.js
View File

@ -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';

3
ui/components/app/permission-cell/permission-cell-options.js
View File

@ -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,

9
ui/components/app/permission-cell/permission-cell.js
View File

@ -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';

2
ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
View File

@ -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();

2
ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
View File

@ -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();

3
ui/components/app/security-provider-banner-message/security-provider-banner-message.js
View File

@ -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,

2
ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
View File

@ -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,

3
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -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';

2
ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js
View File

@ -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,

2
ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js
View File

@ -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 (

3
ui/components/app/signature-request-siwe/signature-request-siwe.js
View File

@ -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';

2
ui/components/app/signature-request/signature-request-message/signature-request-message.js
View File

@ -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,

2
ui/components/app/signature-request/signature-request.component.js
View File

@ -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';

3
ui/components/app/snaps/install-error/install-error.js
View File

@ -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 (

3
ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js
View File

@ -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';

2
ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
View File

@ -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';

9
ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
View File

@ -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';

8
ui/components/app/snaps/snap-delineator/snap-delineator.js
View File

@ -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,

3
ui/components/app/snaps/snap-install-warning/snap-install-warning.js
View File

@ -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';
/**

2
ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js
View File

@ -12,8 +12,8 @@ import {
ButtonLink,
IconName,
IconSize,
Text,
} from '../../../component-library';
import { Text } from '../../../component-library/text/deprecated';
import {
AlignItems,
BackgroundColor,

3
ui/components/app/snaps/snap-settings-card/snap-settings-card.js
View File

@ -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 }) => {

2
ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
View File

@ -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';

2
ui/components/app/snaps/snap-version/snap-version.js
View File

@ -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 }) => {

2
ui/components/app/srp-input/srp-input.js
View File

@ -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;

3
ui/components/app/srp-quiz-modal/QuizContent/QuizContent.tsx
View File

@ -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({

2
ui/components/app/terms-of-use-popup/terms-of-use-popup.js
View File

@ -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 {

3
ui/components/app/transaction-alerts/transaction-alerts.js
View File

@ -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';

3
ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
View File

@ -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';

2
ui/components/app/whats-new-popup/whats-new-popup.js
View File

@ -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';

4
ui/components/component-library/avatar-base/avatar-base.tsx
View File

@ -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}

2
ui/components/component-library/avatar-base/avatar-base.types.ts
View File

@ -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',

9
ui/components/component-library/avatar-token/avatar-token.stories.js
View File

@ -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';

11
ui/components/component-library/banner-base/banner-base.js
View File

@ -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
*/

6
ui/components/component-library/button-base/button-base.js
View File

@ -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
*/

2
ui/components/component-library/help-text/help-text.js
View File

@ -9,7 +9,7 @@ import {
SEVERITIES,
} from '../../../helpers/constants/design-system';
import { Text } from '../text';
import { Text } from '../text/deprecated';
export const HelpText = ({
severity,

2
ui/components/component-library/input/input.js
View File

@ -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';

2
ui/components/component-library/label/label.js
View File

@ -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 }) => (
<Text

3
ui/components/component-library/modal-header/modal-header.stories.tsx
View File

@ -10,7 +10,8 @@ import {
JustifyContent,
} from '../../../helpers/constants/design-system';
import { AvatarAccount, BUTTON_SIZES, Button, Text } from '..';
import { AvatarAccount, BUTTON_SIZES, Button } from '..';
import { Text } from '../text/deprecated';
import { ModalHeader } from './modal-header';
import README from './README.mdx';

10
ui/components/component-library/modal-header/modal-header.tsx
View File

@ -1,13 +1,7 @@
import React from 'react';
import classnames from 'classnames';
import {
HeaderBase,
Text,
ButtonIcon,
ButtonIconSize,
IconName,
ValidTag,
} from '..';
import { HeaderBase, ButtonIcon, ButtonIconSize, IconName, ValidTag } from '..';
import { Text } from '../text/deprecated';
import {
TextVariant,
TextAlign,

7
ui/components/component-library/picker-network/picker-network.js
View File

@ -1,9 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { AvatarNetwork } from '../avatar-network';
import { IconName, Icon, IconSize } from '../icon';
import { Text } from '../text';
import { AvatarNetwork, IconName, Icon, IconSize } from '..';
import { Text } from '../text/deprecated';
import Box from '../../ui/box';
import {
AlignItems,
@ -69,7 +68,7 @@ PickerNetwork.propTypes = {
/**
* It accepts all the props from AvatarNetwork
*/
avatarNetworkProps: PropTypes.shape(AvatarNetwork.PropTypes),
avatarNetworkProps: PropTypes.shape(AvatarNetwork.propTypes),
/**
* It accepts all the props from Icon
*/

3
ui/components/component-library/popover-header/popover-header.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import classnames from 'classnames';
import { HeaderBase, Text, ButtonIcon, ButtonIconSize, IconName } from '..';
import { HeaderBase, ButtonIcon, ButtonIconSize, IconName } from '..';
import { Text } from '../text/deprecated';
import {
IconColor,
TextVariant,

8
ui/components/component-library/tag-url/tag-url.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { Text } from '../text';
import { Text } from '../text/deprecated';
import {
AlignItems,
BackgroundColor,
@ -85,7 +85,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from Avatar Favicon
*/
avatarFaviconProps: PropTypes.shape(AvatarFavicon.PropTypes),
avatarFaviconProps: PropTypes.shape(AvatarFavicon.propTypes),
/**
* It accepts all the props from Icon
*/
@ -97,7 +97,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from Text Component
*/
labelProps: PropTypes.shape(Text.PropTypes),
labelProps: PropTypes.shape(Text.propTypes),
/**
* If we want a button in TagUrl component.
*/
@ -105,7 +105,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from ButtonLink
*/
actionButtonProps: PropTypes.shape(ButtonLink.PropTypes),
actionButtonProps: PropTypes.shape(ButtonLink.propTypes),
/**
* Additional classNames to be added to the TagUrl component
*/

4
ui/components/component-library/tag/tag.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { Text } from '../text';
import { Text } from '../text/deprecated';
import {
AlignItems,
BackgroundColor,
@ -43,7 +43,7 @@ Tag.propTypes = {
/**
* The label props of the component. Most Text component props can be used
*/
labelProps: PropTypes.shape(Text.PropTypes),
labelProps: PropTypes.shape(Text.propTypes),
/**
* Additional classNames to be added to the Tag component
*/

2
ui/components/component-library/text-field-search/text-field-search.js
View File

@ -87,7 +87,7 @@ TextFieldSearch.propTypes = {
/**
* The props to pass to the clear button
*/
clearButtonProps: PropTypes.shape(ButtonIcon.PropTypes),
clearButtonProps: PropTypes.shape(ButtonIcon.propTypes),
/**
* An additional className to apply to the TextFieldSearch
*/

35
ui/components/component-library/text/README.mdx
View File

@ -1,20 +1,20 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import ActionableMessage from '../../ui/actionable-message';
import { Text } from './text';
import { Text } from '../text';
# Text
> 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 `<Typography>` with `<Text>`. [See details](#converting-from-typography-to-text)
<Canvas>
<Story id="components-componentlibrary-text--default-story" />
</Canvas>
## 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
<ArgsTable of={Text} />
@ -280,7 +280,8 @@ You can also utilize the `ValidTag` enum from `./text.types` to ensure that you
</Canvas>
```jsx
import { Text } from '../../component-library';
import { Display } from '../../../helpers/constants/design-system';
import { Text } from '../../component-library'
<Text as="dd">dd</Text>
<Text as="div">div</Text>
@ -294,9 +295,12 @@ import { Text } from '../../component-library';
<Text as="h6">h6</Text>
<Text as="li">li</Text>
<Text as="p">p</Text>
<Text as="span">span</Text>
<Text as="strong">strong</Text>
<Text as="input" placeholder="input"></Text>
<Text display={Display.Block} as="span">span</Text>
<Text display={Display.Block} as="strong">strong</Text>
<Text as="ul">ul</Text>
<Text as="label">label</Text>
<Text as="header">header</Text>
<Text as="input" placeholder="input" />
```
Renders the html:
@ -316,6 +320,11 @@ Renders the html:
<p>p</p>
<span>span</span>
<strong>strong</strong>
<ul>
ul
</ul>
<label>label</label>
<header>header</header>
<input placeholder="input" />
```
@ -360,10 +369,6 @@ import { Text } from '../../component-library';
</Text>
```
### 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`

26
ui/components/component-library/text/__snapshots__/text.test.tsx.snap
View File

@ -3,67 +3,67 @@
exports[`Text should render the Text with proper variant class name 1`] = `
<div>
<h1
class="box mm-text mm-text--display-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--display-md mm-box--color-text-default"
>
display-md
</h1>
<h2
class="box mm-text mm-text--heading-lg box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--heading-lg mm-box--color-text-default"
>
heading-lg
</h2>
<h3
class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--heading-md mm-box--color-text-default"
>
heading-md
</h3>
<h4
class="box mm-text mm-text--heading-sm box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-box--color-text-default"
>
heading-sm
</h4>
<p
class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
>
body-lg-medium
</p>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
body-md
</p>
<p
class="box mm-text mm-text--body-md-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
>
body-md-medium
</p>
<p
class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md-bold mm-box--color-text-default"
>
body-md-bold
</p>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
>
body-sm
</p>
<p
class="box mm-text mm-text--body-sm-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-sm-medium mm-box--color-text-default"
>
body-sm-medium
</p>
<p
class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
>
body-sm-bold
</p>
<p
class="box mm-text mm-text--body-xs box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-xs mm-box--color-text-default"
>
body-xs
</p>
<p
class="box mm-text mm-text--body-xs-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-xs-medium mm-box--color-text-default"
>
body-xs-medium
</p>

15
ui/components/component-library/text/deprecated/__snapshots__/text.test.js.snap → ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap
View File

@ -32,6 +32,11 @@ exports[`Text should render the Text with proper variant class name 1`] = `
>
body-md
</p>
<p
class="box mm-text mm-text--body-md-medium box--flex-direction-row box--color-text-default"
>
body-md-medium
</p>
<p
class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
>
@ -42,6 +47,11 @@ exports[`Text should render the Text with proper variant class name 1`] = `
>
body-sm
</p>
<p
class="box mm-text mm-text--body-sm-medium box--flex-direction-row box--color-text-default"
>
body-sm-medium
</p>
<p
class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
>
@ -52,5 +62,10 @@ exports[`Text should render the Text with proper variant class name 1`] = `
>
body-xs
</p>
<p
class="box mm-text mm-text--body-xs-medium box--flex-direction-row box--color-text-default"
>
body-xs-medium
</p>
</div>
`;

2
ui/components/component-library/text/deprecated/index.js
View File

@ -1,2 +0,0 @@
export { Text } from './text';
export { TEXT_DIRECTIONS, INVISIBLE_CHARACTER } from './text.constants';

3
ui/components/component-library/text/deprecated/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { Text } from './text';
export { ValidTag, TextDirection, InvisibleCharacter } from './text.types';
export type { TextProps, ValidTagType } from './text.types';

11
ui/components/component-library/text/deprecated/text.constants.js
View File

@ -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';

185
ui/components/component-library/text/deprecated/text.js
View File

@ -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 (
<Box
ref={ref}
className={classnames(computedClassName)}
as={Tag}
dir={textDirection}
color={color}
{...props}
>
{children}
</Box>
);
},
);
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

43
ui/components/component-library/text/deprecated/text.test.js → ui/components/component-library/text/deprecated/text.test.tsx
View File

@ -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', () => {
<Text variant={TextVariant.headingSm}>heading-sm</Text>
<Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
<Text variant={TextVariant.bodyMd}>body-md</Text>
<Text variant={TextVariant.bodyMdMedium}>body-md-medium</Text>
<Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
<Text variant={TextVariant.bodySm}>body-sm</Text>
<Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
<Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
<Text variant={TextVariant.bodyXs}>body-xs</Text>
<Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
</>,
);
@ -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(
<>
<Text fontWeight={FONT_WEIGHT.BOLD}>bold</Text>
<Text fontWeight={FONT_WEIGHT.MEDIUM}>medium</Text>
<Text fontWeight={FONT_WEIGHT.NORMAL}>normal</Text>
<Text fontWeight={FontWeight.Bold}>bold</Text>
<Text fontWeight={FontWeight.Medium}>medium</Text>
<Text fontWeight={FontWeight.Normal}>normal</Text>
</>,
);
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(
<>
<Text fontStyle={FONT_STYLE.ITALIC}>italic</Text>
<Text fontStyle={FONT_STYLE.NORMAL}>normal</Text>
<Text fontStyle={FontStyle.Italic}>italic</Text>
<Text fontStyle={FontStyle.Normal}>normal</Text>
</>,
);
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(
<>
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>break-word</Text>
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}>normal</Text>
<Text overflowWrap={OverflowWrap.BreakWord}>break-word</Text>
<Text overflowWrap={OverflowWrap.Normal}>normal</Text>
</>,
);
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(
<>
<Text textTransform={TEXT_TRANSFORM.UPPERCASE}>uppercase</Text>
<Text textTransform={TEXT_TRANSFORM.LOWERCASE}>lowercase</Text>
<Text textTransform={TEXT_TRANSFORM.CAPITALIZE}>capitalize</Text>
<Text textTransform={TextTransform.Uppercase}>uppercase</Text>
<Text textTransform={TextTransform.Lowercase}>lowercase</Text>
<Text textTransform={TextTransform.Capitalize}>capitalize</Text>
</>,
);
expect(getByText('uppercase')).toHaveClass(
@ -230,9 +237,9 @@ describe('Text', () => {
it('should render the Text with proper direction', () => {
const { getByText } = render(
<>
<Text textDirection={TEXT_DIRECTIONS.AUTO}>auto</Text>
<Text textDirection={TEXT_DIRECTIONS.LEFT_TO_RIGHT}>ltr</Text>
<Text textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}>rtl</Text>
<Text textDirection={TextDirection.Auto}>auto</Text>
<Text textDirection={TextDirection.LeftToRight}>ltr</Text>
<Text textDirection={TextDirection.RightToLeft}>rtl</Text>
</>,
);
expect(getByText('auto')).toHaveAttribute('dir', 'auto');

89
ui/components/component-library/text/deprecated/text.tsx Normal file
View File

@ -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 `<Text />` 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<HTMLElement>,
) {
// 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 (
<Box
className={classnames(computedClassName)}
as={Tag}
dir={textDirection}
color={color}
ref={ref}
{...props}
>
{children}
</Box>
);
});

146
ui/components/component-library/text/deprecated/text.types.ts Normal file
View File

@ -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. `<Text as="h1">Hello World</Text>`
*
* 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;
}

6
ui/components/component-library/text/index.ts
View File

@ -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';

4
ui/components/component-library/text/text.scss
View File

@ -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);
}

81
ui/components/component-library/text/text.stories.tsx
View File

@ -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<typeof Text> = (args) => (
export const As: StoryFn<typeof Text> = (args) => (
<>
{Object.keys(ValidTag).map((tag) => {
if (ValidTag[tag] === ValidTag.Input) {
return (
<Text
key={ValidTag[tag]}
{...args}
as={ValidTag[tag]}
placeholder={ValidTag[tag]}
/>
);
}
return (
<div key={ValidTag[tag]}>
<Text {...args} as={ValidTag[tag]}>
{ValidTag[tag]}
</Text>
</div>
);
})}
<Text {...args} as="dd">
dd
</Text>
<Text {...args} as="div">
div
</Text>
<Text {...args} as="dt">
dt
</Text>
<Text {...args} as="em">
em
</Text>
<Text {...args} as="h1">
h1
</Text>
<Text {...args} as="h2">
h2
</Text>
<Text {...args} as="h3">
h3
</Text>
<Text {...args} as="h4">
h4
</Text>
<Text {...args} as="h5">
h5
</Text>
<Text {...args} as="h6">
h6
</Text>
<Text {...args} as="li">
li
</Text>
<Text {...args} as="p">
p
</Text>
<Text {...args} display={Display.Block} as="span">
span
</Text>
<Text {...args} display={Display.Block} as="strong">
strong
</Text>
<Text {...args} as="ul">
ul
</Text>
<Text {...args} as="label">
label
</Text>
<Text {...args} as="header">
header
</Text>
<Text {...args} as="input" placeholder="input" />
</>
);
@ -243,10 +276,10 @@ export const TextDirectionStory: StoryFn<typeof Text> = (args) => (
export const Strong: StoryFn<typeof Text> = (args) => (
<>
<Text {...args} as="strong">
This is an as="strong" demo.
Text as="strong" tag
</Text>
<Text {...args}>
This is a <strong>strong element</strong> demo.
This is a <strong>strong tag</strong> as a child inside of Text
</Text>
</>
);

33
ui/components/component-library/text/text.test.tsx
View File

@ -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 color={TextColor.textDefault}>text-default</Text>
<Text color={TextColor.textAlternative}>text-alternative</Text>
<Text color={TextColor.textMuted}>text-muted</Text>
<Text color={Color.overlayInverse}>overlay-inverse</Text>
<Text color={TextColor.overlayInverse}>overlay-inverse</Text>
<Text color={TextColor.primaryDefault}>primary-default</Text>
<Text color={TextColor.primaryInverse}>primary-inverse</Text>
<Text color={TextColor.errorDefault}>error-default</Text>
@ -133,30 +132,34 @@ describe('Text', () => {
<Text color={TextColor.infoInverse}>info-inverse</Text>
</>,
);
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', () => {

113
ui/components/component-library/text/text.tsx
View File

@ -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<HTMLElement>,
) {
// 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(
<C extends React.ElementType = 'p'>(
{
[`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 (
<Box
className={classnames(computedClassName)}
as={Tag}
dir={textDirection}
color={color}
ref={ref}
{...props}
>
{children}
</Box>
);
});
variant = TextVariant.bodyMd,
fontWeight,
fontStyle,
textTransform,
textAlign,
textDirection,
overflowWrap,
ellipsis,
className = '',
children,
...props
}: TextProps<C>,
ref?: PolymorphicRef<C>,
) => {
// 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 (
<Box
className={classnames(computedClassName)}
as={tag}
dir={textDirection}
ref={ref}
color={TextColor.textDefault}
{...props} // TODO: Need to fix Box types to allow for spreading props
>
{children}
</Box>
);
},
);

34
ui/components/component-library/text/text.types.ts
View File

@ -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<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, TextStyleUtilityProps>;
export type TextComponent = <C extends React.ElementType = 'span'>(
props: TextProps<C>,
) => React.ReactElement | null;

Some files were not shown because too many files have changed in this diff Show More