From d4e0561be6a2e605dc03479ea0746b928691afc7 Mon Sep 17 00:00:00 2001
From: georgewrmarshall
Date: Mon, 24 Jul 2023 21:22:33 -0700
Subject: [PATCH] Updating Icon types and component to use TS Box component
---
.../__snapshots__/beta-header.test.js.snap | 2 +-
...ge-container-header.component.test.js.snap | 2 +-
.../custom-spending-cap.test.js.snap | 2 +-
.../ledger-instruction-field.test.js.snap | 2 +-
.../customize-nonce.test.js.snap | 2 +-
.../__snapshots__/eth-sign-modal.test.js.snap | 6 +-
.../export-private-key-modal.test.js.snap | 2 +-
.../transaction-confirmed.test.js.snap | 2 +-
.../__snapshots__/nft-details.test.js.snap | 6 +-
...ecurity-provider-banner-alert.test.js.snap | 6 +-
.../blockaid-banner-alert.test.js.snap | 14 ++---
.../selected-account-component.test.js.snap | 2 +-
.../signature-request.test.js.snap | 4 +-
...action-activity-log.component.test.js.snap | 8 +--
.../__snapshots__/avatar-favicon.test.js.snap | 2 +-
.../__snapshots__/avatar-icon.test.js.snap | 2 +-
.../__snapshots__/banner-alert.test.js.snap | 2 +-
.../__snapshots__/button-icon.test.tsx.snap | 2 +-
.../button-icon/button-icon.types.ts | 5 +-
.../checkbox/checkbox.types.ts | 2 +-
.../icon/__snapshots__/icon.test.tsx.snap | 2 +-
.../component-library/icon/icon.stories.tsx | 3 +-
.../component-library/icon/icon.test.tsx | 6 +-
ui/components/component-library/icon/icon.tsx | 63 ++++++++++---------
.../component-library/icon/icon.types.ts | 17 ++++-
ui/components/component-library/icon/index.ts | 6 +-
.../__snapshots__/picker-network.test.js.snap | 2 +-
.../__snapshots__/tag-url.test.js.snap | 2 +-
.../text-field-search.test.js.snap | 2 +-
.../__snapshots__/jwt-dropdown.test.js.snap | 2 +-
.../account-list-item.test.js.snap | 2 +-
.../__snapshots__/account-picker.test.js.snap | 2 +-
.../activity-list-item.test.js.snap | 2 +-
.../__snapshots__/app-header.test.js.snap | 6 +-
.../connected-site-menu.test.js.snap | 6 +-
.../detected-token-banner.test.js.snap | 2 +-
.../import-token-link.test.js.snap | 8 +--
.../network-list-item.test.js.snap | 2 +-
.../error-message.component.test.js.snap | 4 +-
...irm-approve-content.component.test.js.snap | 8 +--
.../confirm-send-ether.test.js.snap | 6 +-
.../__snapshots__/index.test.js.snap | 2 +-
.../add-ethereum-chain.test.js.snap | 20 +++---
.../__snapshots__/error.test.js.snap | 2 +-
.../__snapshots__/success.test.js.snap | 2 +-
.../switch-ethereum-chain.test.js.snap | 2 +-
.../__snapshots__/index.test.tsx.snap | 2 +-
.../__snapshots__/account-list.test.js.snap | 8 +--
.../__snapshots__/custody.test.js.snap | 2 +-
.../__snapshots__/reveal-seed.test.js.snap | 2 +-
.../snap-account-detail-page.test.tsx.snap | 6 +-
.../__snapshots__/snap-card.test.tsx.snap | 2 +-
.../__snapshots__/metametrics.test.js.snap | 10 +--
.../onboarding-app-header.test.js.snap | 2 +-
.../review-recovery-phrase.test.js.snap | 2 +-
.../__snapshots__/send-gas-row.test.js.snap | 4 +-
.../dropdown-search-list.test.js.snap | 2 +-
.../exchange-rate-display.test.js.snap | 2 +-
.../list-with-search.test.js.snap | 2 +-
.../main-quote-summary.test.js.snap | 2 +-
.../__snapshots__/selected-token.test.js.snap | 4 +-
.../view-quote-price-difference.test.js.snap | 8 +--
.../__snapshots__/view-quote.test.js.snap | 4 +-
.../token-allowance.test.js.snap | 6 +-
64 files changed, 174 insertions(+), 152 deletions(-)
diff --git a/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
index 56524a2b99a0..3e0c260d1ee6 100644
--- a/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
+++ b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
@@ -28,7 +28,7 @@ exports[`Beta Header should match snapshot 1`] = `
data-testid="beta-header-close"
>
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
index 7885407301ce..6bcd678b78c5 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap
@@ -14,7 +14,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
style="visibility: hidden;"
>
diff --git a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
index f198b593fd18..24031c4a11e1 100644
--- a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
+++ b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
@@ -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"
>
diff --git a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
index 309780a8f34f..7dc9032a9322 100644
--- a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
+++ b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
@@ -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"
>
diff --git a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
index 0850fa7a01f5..1e96bdb57279 100644
--- a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
+++ b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
@@ -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"
>
@@ -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"
>
diff --git a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
index e424c1b24b32..6df657baa985 100644
--- a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
+++ b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
@@ -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"
>
diff --git a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
index 5368bd39750b..b4b6ed44093b 100644
--- a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
+++ b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
@@ -12,7 +12,7 @@ exports[`Transaction Confirmed should match snapshot 1`] = `
class="transaction-confirmed__content"
>
@@ -30,7 +30,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
data-testid="nft-options__button"
>
@@ -195,7 +195,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
data-testid="nft-address-copy"
>
diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
index 54139024ceb2..db26f9e91ce9 100644
--- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
@@ -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"
>
@@ -34,7 +34,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
[seeDetails]
@@ -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"
>
[securityProviderAdviceBy]
diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index ca18324d9563..23b9c5825dc4 100644
--- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -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"
>
@@ -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"
>
@@ -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"
>
@@ -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"
>
@@ -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"
>
@@ -126,7 +126,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
See details
@@ -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"
>
diff --git a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap
index 6031f8d0ba5e..32e6183651b5 100644
--- a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap
+++ b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap
@@ -33,7 +33,7 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
class="selected-account__copy"
>
diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
index c7cdfac65c26..ae126915eea7 100644
--- a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
+++ b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap
@@ -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"
>
@@ -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"
>
diff --git a/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap b/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap
index f99da1facd3e..31d7667af99a 100644
--- a/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap
+++ b/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap
@@ -20,7 +20,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
@@ -42,7 +42,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
@@ -64,7 +64,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
@@ -86,7 +86,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
>
diff --git a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
index 9addad983323..393fc286cd05 100644
--- a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
+++ b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
@@ -7,7 +7,7 @@ exports[`AvatarFavicon should render correctly 1`] = `
data-testid="avatar-favicon"
>
diff --git a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
index f3d2944ec584..8b644dbc8d85 100644
--- a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
+++ b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
@@ -7,7 +7,7 @@ exports[`AvatarIcon should render correctly 1`] = `
data-testid="avatar-icon"
>
diff --git a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
index 47a6ef8f8501..28da219ef795 100644
--- a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
+++ b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
@@ -7,7 +7,7 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
data-testid="bannerAlert"
>
diff --git a/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap
index 8a527a095ec9..5cf8a575a670 100644
--- a/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap
+++ b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`ButtonIcon should render button element correctly 1`] = `
data-testid="button-icon"
>
diff --git a/ui/components/component-library/button-icon/button-icon.types.ts b/ui/components/component-library/button-icon/button-icon.types.ts
index 70250075dc8d..3c64ba9bfd46 100644
--- a/ui/components/component-library/button-icon/button-icon.types.ts
+++ b/ui/components/component-library/button-icon/button-icon.types.ts
@@ -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,
diff --git a/ui/components/component-library/checkbox/checkbox.types.ts b/ui/components/component-library/checkbox/checkbox.types.ts
index cc7871b8c9b6..412c40311cbb 100644
--- a/ui/components/component-library/checkbox/checkbox.types.ts
+++ b/ui/components/component-library/checkbox/checkbox.types.ts
@@ -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
=
diff --git a/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap b/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap
index a99ac639395b..93a83b525af3 100644
--- a/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap
+++ b/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`Icon should render correctly 1`] = `
diff --git a/ui/components/component-library/icon/icon.stories.tsx b/ui/components/component-library/icon/icon.stories.tsx
index aa24122c7538..a20fa83a6770 100644
--- a/ui/components/component-library/icon/icon.stories.tsx
+++ b/ui/components/component-library/icon/icon.stories.tsx
@@ -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';
diff --git a/ui/components/component-library/icon/icon.test.tsx b/ui/components/component-library/icon/icon.test.tsx
index 32174a8a472c..c0edf89d3c06 100644
--- a/ui/components/component-library/icon/icon.test.tsx
+++ b/ui/components/component-library/icon/icon.test.tsx
@@ -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',
);
});
});
diff --git a/ui/components/component-library/icon/icon.tsx b/ui/components/component-library/icon/icon.tsx
index d4dbd7d92762..20f537e67e06 100644
--- a/ui/components/component-library/icon/icon.tsx
+++ b/ui/components/component-library/icon/icon.tsx
@@ -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';
+
+import { IconSize, IconProps, IconComponent } from './icon.types';
-export const Icon = ({
- name,
- size = IconSize.Md,
- color = IconColor.inherit,
- className = '',
- style,
- ...props
-}: IconProps) => (
-
+export const Icon: IconComponent = React.forwardRef(
+ (
+ {
+ name,
+ size = IconSize.Md,
+ color = IconColor.inherit,
+ className = '',
+ style,
+ ...props
+ }: IconProps,
+ ref?: PolymorphicRef,
+ ) => (
+ )}
+ />
+ ),
);
diff --git a/ui/components/component-library/icon/icon.types.ts b/ui/components/component-library/icon/icon.types.ts
index af1282d66937..f5d9ff22afeb 100644
--- a/ui/components/component-library/icon/icon.types.ts
+++ b/ui/components/component-library/icon/icon.types.ts
@@ -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 =
+ PolymorphicComponentPropWithRef;
+
+export type IconComponent = (
+ props: IconProps,
+) => React.ReactElement | null;
diff --git a/ui/components/component-library/icon/index.ts b/ui/components/component-library/icon/index.ts
index d122b469668b..ad2e637463a1 100644
--- a/ui/components/component-library/icon/index.ts
+++ b/ui/components/component-library/icon/index.ts
@@ -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';
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
index 510227656d68..42534287bd20 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
@@ -17,7 +17,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
Imported
diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
index 5407e13acdc0..24d8a9a187b2 100644
--- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
@@ -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"
>
diff --git a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
index 4f2c22dc7f08..92792636b323 100644
--- a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
+++ b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
@@ -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"
>
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index e2bb2b4a601b..e15f761c4950 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -132,7 +132,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
data-testid="account-list-item-menu-button"
>
diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
index 49accc5e5c8e..a0dfbafe9452 100644
--- a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
+++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
@@ -31,7 +31,7 @@ exports[`AccountPicker renders properly 1`] = `
Account 1
diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
index a842265304a5..7bbb0b9608cd 100644
--- a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
+++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
@@ -47,7 +47,7 @@ exports[`ActivityListItem should match snapshot with props 1`] = `
class="mm-box mm-box--display-inline-flex"
>
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index fc0fc5c4bde4..640729436e42 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -222,7 +222,7 @@ exports[`App Header should match snapshot 1`] = `
Chain 5
@@ -283,7 +283,7 @@ exports[`App Header should match snapshot 1`] = `
Test Account
@@ -304,7 +304,7 @@ exports[`App Header should match snapshot 1`] = `
data-testid="account-options-menu-button"
>
diff --git a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
index b6538b1d9ae4..83a1eef2c854 100644
--- a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
+++ b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
@@ -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"
>
diff --git a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
index 73c678f61f67..4439d2bce68b 100644
--- a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
+++ b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
@@ -13,7 +13,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
data-testid="import-token-button"
>
Import tokens
@@ -27,7 +27,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
data-testid="refresh-list-button"
>
Refresh list
@@ -50,7 +50,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
data-testid="import-token-button"
>
Import tokens
@@ -64,7 +64,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
data-testid="refresh-list-button"
>
Refresh list
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index a32760c67b37..5bbb6b8fc12a 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -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"
>
diff --git a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap
index 387889742577..63bf4bafaae0 100644
--- a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap
+++ b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap
@@ -6,7 +6,7 @@ exports[`ErrorMessage Component should render a message from props.errorMessage
class="error-message"
>
@@ -258,7 +258,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
@@ -443,7 +443,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
@@ -628,7 +628,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="confirm-approve-content__card-header__symbol"
>
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index 1a04516b3a86..6590df11c02c 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -84,7 +84,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
style="visibility: initial;"
>
@@ -352,7 +352,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
Site suggested
diff --git a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
index c9e8f1f751fe..faf175d6cef9 100644
--- a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
+++ b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
@@ -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"
>
diff --git a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index a428e168cfb0..e294686d8411 100644
--- a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -85,7 +85,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
@@ -110,7 +110,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
@@ -135,7 +135,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
@@ -160,7 +160,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
tabindex="0"
>
@@ -292,7 +292,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
@@ -317,7 +317,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
@@ -342,7 +342,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
@@ -367,7 +367,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
tabindex="0"
>
@@ -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"
>
@@ -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"
>
diff --git a/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
index ccb7cdb0ea47..cca61aa89e26 100644
--- a/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
@@ -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"
>
diff --git a/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
index 9f126239a362..061cad94832a 100644
--- a/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
@@ -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"
>
diff --git a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index 14430aa1c33a..3a8bb05f105c 100644
--- a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -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"
>
diff --git a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap
index c9196293723a..a52088d2ba5c 100644
--- a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap
+++ b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
data-testid="hardware-connect-close-btn"
>
diff --git a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
index 21d5935acd4e..0430157d0c0a 100644
--- a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
+++ b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
@@ -56,7 +56,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
>
0x123...7890
@@ -74,7 +74,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="custody-account-list__item__clipboard"
>
@@ -131,7 +131,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
>
0x098...4321
@@ -149,7 +149,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="custody-account-list__item__clipboard"
>
diff --git a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
index eaacf61073e3..c6aaf4ac1097 100644
--- a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
+++ b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
@@ -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"
>
diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
index 0d6c31b91822..1c97baf36af7 100644
--- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
+++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
@@ -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"
>
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
index 3aa813a67299..b1fa7113f0ec 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
Create a Snap Account
@@ -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"
>
diff --git a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
index 8ebecf6189c8..e8f1fc13edb1 100644
--- a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
+++ b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`SnapCard should render 1`] = `
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
diff --git a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
index 8bde23f941ab..ed23cc0d8b26 100644
--- a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
+++ b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
@@ -24,14 +24,14 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
Always allow you to opt-out via Settings
Send anonymized click and pageview events
@@ -41,7 +41,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
class="box box--flex-direction-row"
>
@@ -62,7 +62,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
class="box box--flex-direction-row"
>
@@ -83,7 +83,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
class="box box--flex-direction-row"
>
diff --git a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
index fbec275c4351..9a9afaad8b19 100644
--- a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
+++ b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
@@ -213,7 +213,7 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
diff --git a/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap b/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
index 20dd89441dfd..8331a05d8d5f 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
+++ b/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
@@ -600,7 +600,7 @@ exports[`Review Recovery Phrase Component should match snapshot after reveal rec
class="button__icon"
>
diff --git a/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap b/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap
index f97cefbc4af4..467786c510fd 100644
--- a/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap
+++ b/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap
@@ -31,7 +31,7 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
tabindex="0"
>
@@ -84,7 +84,7 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
tabindex="0"
>
diff --git a/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap b/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
index be5ea2352bc3..6057b37ee370 100644
--- a/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
+++ b/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
@@ -37,7 +37,7 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
diff --git a/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap b/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap
index bdd3b3dfab0d..1f3820d2ef8e 100644
--- a/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap
+++ b/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap
@@ -31,7 +31,7 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = `
@@ -66,7 +66,7 @@ exports[`SelectedToken renders the component with no token selected 1`] = `
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
index ce2ad6d17ba3..5116743379bc 100644
--- a/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
@@ -36,7 +36,7 @@ exports[`View Price Quote Difference displays a fiat error when calculationError
tabindex="0"
>
@@ -94,7 +94,7 @@ exports[`View Price Quote Difference displays an error when in high bucket 1`] =
tabindex="0"
>
@@ -152,7 +152,7 @@ exports[`View Price Quote Difference displays an error when in medium bucket 1`]
tabindex="0"
>
@@ -210,7 +210,7 @@ exports[`View Price Quote Difference should match snapshot 1`] = `
tabindex="0"
>
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
index d9ed7df327f1..75b44c0eef06 100644
--- a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
@@ -63,7 +63,7 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = `
@@ -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"
>
@@ -383,7 +383,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
tabindex="0"
>