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

Updating Icon types and component to use TS Box component (#19990)

Browse Source
This commit is contained in:
George Marshall 2023-07-25 09:05:37 -07:00 committed by GitHub
parent 3f27d018c4
commit 25247d0300
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 174 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
View File

@ -28,7 +28,7 @@ exports[`Beta Header should match snapshot 1`] = `
data-testid="beta-header-close"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>

2
ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
View File

@ -14,7 +14,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
style="visibility: hidden;"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
<span

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

@ -42,7 +42,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/question.svg');"
/>
</div>

2
ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/info.svg');"
/>
<div>

2
ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
View File

@ -24,7 +24,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="box mm-button-icon mm-button-icon--size-sm customize-nonce-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>

6
ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
class="box box--margin-bottom-4 box--display-flex box--flex-direction-row box--justify-content-center"
>
<span
class="box eth-sign-modal__warning-icon mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box eth-sign-modal__warning-icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<button
@ -17,7 +17,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
class="box mm-button-icon mm-button-icon--size-sm eth-sign-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>
@ -44,7 +44,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-6 box--margin-bottom-6 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<div>

2
ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
View File

@ -105,7 +105,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-5 box--margin-left-5 box--padding-1 box--sm:padding-3 box--lg:padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<div>

2
ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`Transaction Confirmed should match snapshot 1`] = `
class="transaction-confirmed__content"
>
<span
class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-success-default"
class="mm-box mm-icon mm-icon--size-xl mm-box--display-inline-block mm-box--color-success-default"
style="mask-image: url('./images/icons/check.svg');"
/>
<div

6
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
class="asset-breadcrumb"
>
<span
class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-xs mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-inherit"
data-testid="asset__back"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
@ -30,7 +30,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
data-testid="nft-options__button"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/more-vertical.svg');"
/>
</button>
@ -195,7 +195,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
data-testid="nft-address-copy"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>

6
ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<div>
@ -34,7 +34,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
[seeDetails]
</p>
<span
class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-start-2 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-start-2 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/arrow-up.svg');"
/>
</summary>
@ -62,7 +62,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
[securityProviderAdviceBy]

14
ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
View File

@ -5,7 +5,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<div>
@ -24,7 +24,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>
@ -51,7 +51,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-warning-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
style="mask-image: url('./images/icons/warning.svg');"
/>
<div>
@ -70,7 +70,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>
@ -98,7 +98,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-warning-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
style="mask-image: url('./images/icons/warning.svg');"
/>
<div>
@ -126,7 +126,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
See details
</p>
<span
class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-start-2 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-start-2 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/arrow-up.svg');"
/>
</summary>
@ -155,7 +155,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="box disclosure__summary--icon mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>

2
ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap
View File

@ -33,7 +33,7 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
class="selected-account__copy"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-alternative"
style="mask-image: url('./images/icons/copy.svg');"
/>
</div>

4
ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
View File

@ -185,7 +185,7 @@ exports[`Signature Request Component render should match snapshot when we are us
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
</div>
@ -960,7 +960,7 @@ exports[`Signature Request Component render should match snapshot when we want t
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
</div>

8
ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap
View File

@ -20,7 +20,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/add.svg');"
/>
</div>
@ -42,7 +42,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-up.svg');"
/>
</div>
@ -64,7 +64,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/programming-arrows.svg');"
/>
</div>
@ -86,7 +86,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/check.svg');"
/>
</div>

2
ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`AvatarFavicon should render correctly 1`] = `
data-testid="avatar-favicon"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
</div>

2
ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`AvatarIcon should render correctly 1`] = `
data-testid="avatar-icon"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/swap-horizontal.svg');"
/>
</div>

2
ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
data-testid="bannerAlert"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/info.svg');"
/>
<div>

2
ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`ButtonIcon should render button element correctly 1`] = `
data-testid="button-icon"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/add-square.svg');"
/>
</button>

5
ui/components/component-library/button-icon/button-icon.types.ts
View File

@ -1,6 +1,5 @@
import type { BoxProps } from '../../ui/box/box.d';
import { IconName } from '../icon';
import type { IconProps } from '../icon';
import { IconName, IconProps } from '../icon';
import { IconColor } from '../../../helpers/constants/design-system';
export enum ButtonIconSize {
@ -42,7 +41,7 @@ export interface ButtonIconProps extends BoxProps {
/**
* iconProps accepts all the props from Icon
*/
iconProps?: IconProps;
iconProps?: IconProps<'span'>;
/**
* The size of the ButtonIcon.
* Possible values could be 'ButtonIconSize.Sm' 24px, 'ButtonIconSize.Lg' 32px,

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

@ -63,7 +63,7 @@ export interface CheckboxStyleUtilityProps extends StyleUtilityProps {
/*
* iconProps - additional props to be spread to the Icon component used for the Checkbox
*/
iconProps?: IconProps;
iconProps?: IconProps<'span'>;
}
export type CheckboxProps<C extends React.ElementType> =

2
ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`Icon should render correctly 1`] = `
<div>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
data-testid="icon"
style="mask-image: url('./images/icons/add-square.svg');"
/>

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

@ -16,8 +16,6 @@ import {
BorderRadius,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import {
ButtonIcon,
ButtonLink,
@ -28,6 +26,7 @@ import {
TEXT_FIELD_SIZES,
ButtonIconSize,
BUTTON_LINK_SIZES,
Box,
} from '..';
import { Icon } from './icon';

6
ui/components/component-library/icon/icon.test.tsx
View File

@ -129,13 +129,13 @@ describe('Icon', () => {
</>,
);
expect(getByTestId('icon-color-default')).toHaveClass(
'box--color-icon-default',
'mm-box--color-icon-default',
);
expect(getByTestId('icon-color-alternative')).toHaveClass(
'box--color-icon-alternative',
'mm-box--color-icon-alternative',
);
expect(getByTestId('icon-color-muted')).toHaveClass(
'box--color-icon-muted',
'mm-box--color-icon-muted',
);
});
});

63
ui/components/component-library/icon/icon.tsx
View File

@ -1,35 +1,42 @@
import React from 'react';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { IconColor, Display } from '../../../helpers/constants/design-system';
import { IconProps, IconSize } from './icon.types';
import { Box, BoxProps } from '../box';
import type { PolymorphicRef } from '../box';
export const Icon = ({
name,
size = IconSize.Md,
color = IconColor.inherit,
className = '',
style,
...props
}: IconProps) => (
<Box
className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
as="span"
display={Display.InlineBlock}
color={color}
style={{
/**
* To reduce the possibility of injection attacks
* the icon component uses mask-image instead of rendering
* the svg directly.
*/
maskImage: `url('./images/icons/${String(name)}.svg')`,
WebkitMaskImage: `url('./images/icons/${String(name)}.svg')`,
...style,
}}
{...props}
/>
import { IconSize, IconProps, IconComponent } from './icon.types';
export const Icon: IconComponent = React.forwardRef(
<C extends React.ElementType = 'span'>(
{
name,
size = IconSize.Md,
color = IconColor.inherit,
className = '',
style,
...props
}: IconProps<C>,
ref?: PolymorphicRef<C>,
) => (
<Box
className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
ref={ref}
as="span"
display={Display.InlineBlock}
color={color}
style={{
/**
* To reduce the possibility of injection attacks
* the icon component uses mask-image instead of rendering
* the svg directly.
*/
maskImage: `url('./images/icons/${String(name)}.svg')`,
WebkitMaskImage: `url('./images/icons/${String(name)}.svg')`,
...style,
}}
{...(props as BoxProps<C>)}
/>
),
);

17
ui/components/component-library/icon/icon.types.ts
View File

@ -1,6 +1,12 @@
import type { BoxProps } from '../../ui/box/box.d';
import React from 'react';
import { IconColor } from '../../../helpers/constants/design-system';
import type {
StyleUtilityProps,
PolymorphicComponentPropWithRef,
} from '../box';
export enum IconSize {
Xs = 'xs',
Sm = 'sm',
@ -171,7 +177,7 @@ export enum IconName {
Wifi = 'wifi',
}
export interface IconProps extends BoxProps {
export interface IconStyleUtilityProps extends StyleUtilityProps {
/**
* The name of the icon to display. Use the IconName enum
* Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story
@ -198,3 +204,10 @@ export interface IconProps extends BoxProps {
*/
style?: React.CSSProperties;
}
export type IconProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, IconStyleUtilityProps>;
export type IconComponent = <C extends React.ElementType = 'span'>(
props: IconProps<C>,
) => React.ReactElement | null;

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

@ -1,3 +1,7 @@
export { Icon } from './icon';
export { IconName, IconSize } from './icon.types';
export type { IconProps } from './icon.types';
export type {
IconProps,
IconComponent,
IconStyleUtilityProps,
} from './icon.types';

2
ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
View File

@ -17,7 +17,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
Imported
</p>
<span
class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</button>

2
ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
</div>

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

@ -6,7 +6,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
class="box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-text-field-search box--padding-left-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/search.svg');"
/>
<input

2
ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap
View File

@ -34,7 +34,7 @@ exports[`JwtDropdown should render the Jwt dropdown component 1`] = `
</option>
</select>
<span
class="box dropdown__icon-caret-down mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box dropdown__icon-caret-down mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</div>

2
ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View File

@ -132,7 +132,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
data-testid="account-list-item-menu-button"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/more-vertical.svg');"
/>
</button>

2
ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
View File

@ -31,7 +31,7 @@ exports[`AccountPicker renders properly 1`] = `
Account 1
</span>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</span>

2
ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
View File

@ -47,7 +47,7 @@ exports[`ActivityListItem should match snapshot with props 1`] = `
class="mm-box mm-box--display-inline-flex"
>
<span
class="box mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/custody.svg');"
/>
</div>

6
ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
View File

@ -222,7 +222,7 @@ exports[`App Header should match snapshot 1`] = `
Chain 5
</p>
<span
class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</button>
@ -283,7 +283,7 @@ exports[`App Header should match snapshot 1`] = `
Test Account
</span>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</span>
@ -304,7 +304,7 @@ exports[`App Header should match snapshot 1`] = `
data-testid="account-options-menu-button"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/more-vertical.svg');"
/>
</button>

6
ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
View File

@ -19,7 +19,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
@ -56,7 +56,7 @@ exports[`Connected Site Menu should render the site menu in not connected state
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
@ -93,7 +93,7 @@ exports[`Connected Site Menu should render the site menu in not connected to cur
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div

2
ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`DetectedTokensBanner should render correctly 1`] = `
data-testid="detected-token-banner"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/info.svg');"
/>
<div>

8
ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
View File

@ -13,7 +13,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
data-testid="import-token-button"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/add.svg');"
/>
Import tokens
@ -27,7 +27,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
data-testid="refresh-list-button"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/refresh.svg');"
/>
Refresh list
@ -50,7 +50,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
data-testid="import-token-button"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/add.svg');"
/>
Import tokens
@ -64,7 +64,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
data-testid="refresh-list-button"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-1 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/refresh.svg');"
/>
Refresh list

2
ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
View File

@ -28,7 +28,7 @@ exports[`NetworkListItem renders properly 1`] = `
class="box mm-button-icon mm-button-icon--size-sm multichain-network-list-item__delete box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-error-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/trash.svg');"
/>
</button>

4
ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`ErrorMessage Component should render a message from props.errorMessage
class="error-message"
>
<span
class="box error-message__icon mm-icon mm-icon--size-sm box--margin-right-2 box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box error-message__icon mm-icon mm-icon--size-sm mm-box--margin-right-2 mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/warning.svg');"
/>
<div
@ -24,7 +24,7 @@ exports[`ErrorMessage Component should render a message translated from props.er
class="error-message"
>
<span
class="box error-message__icon mm-icon mm-icon--size-sm box--margin-right-2 box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box error-message__icon mm-icon mm-icon--size-sm mm-box--margin-right-2 mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/warning.svg');"
/>
<div

8
ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
View File

@ -73,7 +73,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
@ -258,7 +258,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
@ -443,7 +443,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
@ -628,7 +628,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>

6
ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
View File

@ -84,7 +84,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
style="visibility: initial;"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
<span
@ -317,7 +317,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-warning-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
style="mask-image: url('./images/icons/warning.svg');"
/>
<div>
@ -352,7 +352,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
Site suggested
</span>
<span
class="box mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/arrow-right.svg');"
/>
</button>

2
ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
View File

@ -184,7 +184,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
</div>

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

@ -85,7 +85,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -110,7 +110,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -135,7 +135,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -160,7 +160,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -292,7 +292,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -317,7 +317,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -342,7 +342,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -367,7 +367,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-icon-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -417,7 +417,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>
@ -460,7 +460,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>

2
ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
View File

@ -23,7 +23,7 @@ exports[`error template matches the snapshot 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-error-default mm-box--background-color-error-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-xl mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/warning.svg');"
/>
</div>

2
ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
View File

@ -23,7 +23,7 @@ exports[`success template matches the snapshot 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-success-default mm-box--background-color-success-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-xl mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/confirmation.svg');"
/>
</div>

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

@ -251,7 +251,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>

2
ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap
View File

@ -22,7 +22,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
data-testid="hardware-connect-close-btn"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>

8
ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
View File

@ -56,7 +56,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
>
0x123...7890
<span
class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-md mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/undefined.svg');"
/>
</span>
@ -74,7 +74,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="custody-account-list__item__clipboard"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/undefined.svg');"
/>
</button>
@ -131,7 +131,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
>
0x098...4321
<span
class="box mm-icon mm-icon--size-md box--margin-left-1 box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-md mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/undefined.svg');"
/>
</span>
@ -149,7 +149,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="custody-account-list__item__clipboard"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-muted"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-muted"
style="mask-image: url('./images/icons/undefined.svg');"
/>
</button>

2
ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
View File

@ -36,7 +36,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>

2
ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
View File

@ -57,7 +57,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/danger.svg');"
/>
<div>

6
ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
View File

@ -17,7 +17,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
Create a Snap Account
</button>
<span
class="box mm-icon mm-icon--size-md box--margin-right-4 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--margin-right-4 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-right.svg');"
/>
<p
@ -70,7 +70,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/star.svg');"
/>
@ -92,7 +92,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/star.svg');"
/>

2
ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
View File

@ -44,7 +44,7 @@ exports[`SnapCard should render 1`] = `
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<span
class="box mm-icon mm-icon--size-md box--margin-left-auto box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-md mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-alternative"
data-testid="to-snap-detail"
style="mask-image: url('./images/icons/arrow-2-right.svg');"
/>

10
ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
View File

@ -24,14 +24,14 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
<ul>
<li>
<span
class="box mm-icon mm-icon--size-md box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-success-default"
class="mm-box mm-icon mm-icon--size-md mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-success-default"
style="mask-image: url('./images/icons/check.svg');"
/>
Always allow you to opt-out via Settings
</li>
<li>
<span
class="box mm-icon mm-icon--size-md box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-success-default"
class="mm-box mm-icon mm-icon--size-md mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-success-default"
style="mask-image: url('./images/icons/check.svg');"
/>
Send anonymized click and pageview events
@ -41,7 +41,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
class="box box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-2 box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/close.svg');"
/>
<span>
@ -62,7 +62,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
class="box box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-2 box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/close.svg');"
/>
<span>
@ -83,7 +83,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
class="box box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-2 box--display-inline-block box--flex-direction-row box--color-error-default"
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
style="mask-image: url('./images/icons/close.svg');"
/>
<span>

2
ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
View File

@ -213,7 +213,7 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
</option>
</select>
<span
class="box dropdown__icon-caret-down mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box dropdown__icon-caret-down mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</div>

2
ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
View File

@ -600,7 +600,7 @@ exports[`Review Recovery Phrase Component should match snapshot after reveal rec
class="button__icon"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-primary-default"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/copy.svg');"
/>
</span>

4
ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap
View File

@ -31,7 +31,7 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
tabindex="0"
>
<span
class="box info-circle mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box info-circle mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -84,7 +84,7 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
tabindex="0"
>
<span
class="box info-circle mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box info-circle mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>

2
ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
View File

@ -37,7 +37,7 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
</div>
</div>
<span
class="box mm-icon mm-icon--size-xs box--margin-right-3 box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-xs mm-box--margin-right-3 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</div>

2
ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap
View File

@ -31,7 +31,7 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = `
</span>
</div>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
data-testid="exchange-rate-display-switch"
style="mask-image: url('./images/icons/swap-horizontal.svg'); cursor: pointer;"
title="Switch"

2
ui/pages/swaps/list-with-search/__snapshots__/list-with-search.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`ListWithSearch renders the component with initial props 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/search.svg');"
/>
<input

2
ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
View File

@ -106,7 +106,7 @@ exports[`MainQuoteSummary renders the component with initial props 4`] = `
</span>
</div>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
data-testid="exchange-rate-display-switch"
style="mask-image: url('./images/icons/swap-horizontal.svg'); cursor: pointer;"
title="Switch"

4
ui/pages/swaps/selected-token/__snapshots__/selected-token.test.js.snap
View File

@ -34,7 +34,7 @@ exports[`SelectedToken renders the component with initial props 1`] = `
</div>
</div>
<span
class="box mm-icon mm-icon--size-xs box--margin-right-3 box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-xs mm-box--margin-right-3 mm-box--display-inline-block mm-box--color-icon-alternative"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</div>
@ -66,7 +66,7 @@ exports[`SelectedToken renders the component with no token selected 1`] = `
</div>
</div>
<span
class="box mm-icon mm-icon--size-xs box--margin-right-3 box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-xs mm-box--margin-right-3 mm-box--display-inline-block mm-box--color-icon-alternative"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</div>

8
ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
View File

@ -36,7 +36,7 @@ exports[`View Price Quote Difference displays a fiat error when calculationError
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -94,7 +94,7 @@ exports[`View Price Quote Difference displays an error when in high bucket 1`] =
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -152,7 +152,7 @@ exports[`View Price Quote Difference displays an error when in medium bucket 1`]
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
@ -210,7 +210,7 @@ exports[`View Price Quote Difference should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>

4
ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
View File

@ -63,7 +63,7 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = `
</span>
</div>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
data-testid="exchange-rate-display-switch"
style="mask-image: url('./images/icons/swap-horizontal.svg'); cursor: pointer;"
title="Switch"
@ -135,7 +135,7 @@ exports[`ViewQuote renders the component with initial props 2`] = `
</span>
</div>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-icon-alternative"
data-testid="exchange-rate-display-switch"
style="mask-image: url('./images/icons/swap-horizontal.svg'); cursor: pointer;"
title="Switch"

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

@ -292,7 +292,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
@ -312,7 +312,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
class="box mm-button-icon mm-button-icon--size-lg box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg"
>
<span
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/export.svg');"
/>
</button>
@ -383,7 +383,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/question.svg');"
/>
</div>