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

Update Text import paths: /ui (#20076)

Browse Source 
* Updating Text import paths in ui folder

* Updating snapshot
This commit is contained in:
George Marshall 2023-07-19 10:55:38 -07:00 committed by GitHub
parent b4bc033b72
commit f9649a27f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 92 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

2
ui/components/ui/box/box.stories.tsx
View File

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

3
ui/components/ui/callout/callout.js
View File

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

4
ui/components/ui/callout/callout.stories.js
View File

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

3
ui/components/ui/deprecated-test-networks/deprecated-test-networks.js
View File

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

10
ui/components/ui/editable-label/editable-label.js
View File

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

16
ui/components/ui/export-text-container/export-text-container.component.js
View File

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

10
ui/components/ui/form-field/form-field.js
View File

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

3
ui/components/ui/form-field/form-field.stories.js
View File

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

2
ui/components/ui/icon-button/icon-button.js
View File

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

4
ui/components/ui/logo/logo.stories.js
View File

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

3
ui/components/ui/menu/menu-item.js
View File

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

2
ui/components/ui/metafox-logo/metafox-logo.stories.js
View File

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

3
ui/components/ui/new-network-info/new-network-info.js
View File

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

19
ui/components/ui/nft-info/nft-info.js
View File

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

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

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

9
ui/components/ui/popover/popover.component.js
View File

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

2
ui/components/ui/radio-group/radio-group.component.js
View File

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

30
ui/components/ui/review-spending-cap/review-spending-cap.js
View File

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

2
ui/components/ui/slider/slider.component.js
View File

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

3
ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
View File

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

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

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

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

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

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

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

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

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

12
ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
View File

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