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

Update Text import paths: component library/ (#19987)

Browse Source 
* Updating component-librar import paths

* Updating snapshots

* Updates to AvatarBase story

* Updates to avatar and checkbox

* Updating last of the deprecated import paths

* Updating component-library snapshots from button-base

* Updating snapshots from rest of codebase to do with button-base

* Removing unneeded CSS

* Updating snapshots
This commit is contained in:
George Marshall 2023-07-17 14:00:16 -07:00 committed by GitHub
parent 343cde9091
commit 5d17f86e02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
82 changed files with 235 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,7 +67,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Max
</button>
@ -93,7 +93,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
</span>
</h6>
<a
class="box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
target="_blank"
>

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

@ -37,7 +37,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
>
<span>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Go to full screen to connect your Ledger.
</button>

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

@ -37,7 +37,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
>
This is an advanced feature, use cautiously.
<a
class="box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/7417499333531-How-to-customize-a-transaction-nonce"
rel="noopener noreferrer"
target="_blank"
@ -61,7 +61,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="mm-box mm-box--width-1/6"
>
<button
class="box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="customize-nonce-reset"
>
Reset

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

@ -32,7 +32,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
>
Allowing eth_sign requests can make you vulnerable to phishing attacks. Always review the URL and be careful when signing messages that contain code.
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io/hc/en-us/articles/14764161421467"
rel="noopener noreferrer"
target="_blank"
@ -63,7 +63,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
type="checkbox"
/>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
for="eth-sign__checkbox"
>
<span
@ -77,12 +77,12 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
class="box box--margin-top-6 box--display-flex box--gap-4 box--flex-direction-row box--justify-content-space-between"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
>
Continue

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

@ -80,7 +80,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
class="box box--padding-right-5 box--padding-left-5 box--display-flex box--flex-direction-column box--align-items-flex-start box--width-full"
>
<label
class="box mm-text mm-label mm-text--body-sm mm-text--font-weight-medium box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-text--body-sm mm-text--font-weight-medium mm-box--margin-bottom-2 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
>
Type your MetaMask password
</label>
@ -90,7 +90,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
focused="false"
placeholder="Enter password"
type="password"
@ -110,7 +110,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
/>
<div>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
Warning: Never disclose this key. Anyone with your private keys can steal any assets held in your account.
</p>
@ -120,13 +120,13 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
class="box box--margin-top-3 box--padding-5 box--md:padding-5 box--display-flex box--flex-direction-row box--justify-content-space-between box--width-full"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium box--margin-right-4 box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-1/2 box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
type="secondary"
>
Cancel
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-1/2 box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
type="primary"
>

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

@ -63,7 +63,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
style="top: -4px; right: -4px;"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-width-2 box--border-style-solid"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge 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-background-default mm-box--border-width-2 box--border-style-solid"
data-testid="nft-network-badge"
>
C

4
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`Token Cell should match snapshot 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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-border-default box--border-style-solid box--border-width-1"
>
T
</div>
@ -23,7 +23,7 @@ exports[`Token Cell should match snapshot 1`] = `
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs 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-border-muted box--border-style-solid box--border-width-1"
>
<img
alt="Ethereum Mainnet logo"

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

@ -3,7 +3,7 @@
exports[`AvatarAccount should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account 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-border-default box--border-style-solid box--border-width-1"
data-testid="avatar-account"
>
<div

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

@ -3,7 +3,7 @@
exports[`AvatarBase should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md 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-border-default box--border-style-solid box--border-width-1"
data-testid="avatar-base"
/>
</div>

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

@ -1,4 +1,4 @@
import { Meta } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import {
AlignItems,
@ -9,12 +9,9 @@ import {
IconColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { Icon, IconName } from '..';
import { AvatarBase, Icon, IconName, Box } from '..';
import { AvatarBaseSize } from './avatar-base.types';
import README from './README.mdx';
import { AvatarBase } from './avatar-base';
import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
const marginSizeKnobOptions = [
0,
@ -35,7 +32,6 @@ const marginSizeKnobOptions = [
export default {
title: 'Components/ComponentLibrary/AvatarBase',
component: AvatarBase,
parameters: {
docs: {
@ -47,6 +43,9 @@ export default {
control: 'select',
options: Object.values(AvatarBaseSize),
},
children: {
control: 'text',
},
color: {
options: Object.values(TextColor),
control: 'select',
@ -94,11 +93,13 @@ export default {
},
} as Meta<typeof AvatarBase>;
export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
export const DefaultStory: StoryFn<typeof AvatarBase> = (args) => (
<AvatarBase {...args} />
);
DefaultStory.storyName = 'Default';
export const Size = (args: AvatarBaseProps) => (
export const Size: StoryFn<typeof AvatarBase> = (args) => (
<Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<AvatarBase {...args} size={AvatarBaseSize.Xs} />
<AvatarBase {...args} size={AvatarBaseSize.Sm} />
@ -108,7 +109,7 @@ export const Size = (args: AvatarBaseProps) => (
</Box>
);
export const Children = (args: AvatarBaseProps) => (
export const Children: StoryFn<typeof AvatarBase> = (args) => (
<Box display={Display.Flex} gap={1}>
<AvatarBase {...args}>
<img src="./images/eth_logo.png" />
@ -130,7 +131,9 @@ export const Children = (args: AvatarBaseProps) => (
</Box>
);
export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
export const ColorBackgroundColorAndBorderColor: StoryFn<typeof AvatarBase> = (
args,
) => (
<Box display={Display.Flex} gap={1}>
<AvatarBase {...args}>B</AvatarBase>
<AvatarBase

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

@ -79,10 +79,10 @@ describe('AvatarBase', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
`mm-box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
`mm-box--color-${TextColor.errorDefault}`,
);
});
// background color
@ -100,10 +100,10 @@ describe('AvatarBase', () => {
</>,
);
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--background-color-${Color.successDefault}`,
`mm-box--background-color-${Color.successDefault}`,
);
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--background-color-${Color.errorDefault}`,
`mm-box--background-color-${Color.errorDefault}`,
);
});
// border color
@ -121,10 +121,10 @@ describe('AvatarBase', () => {
</>,
);
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--border-color-${Color.successDefault}`,
`mm-box--border-color-${Color.successDefault}`,
);
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--border-color-${Color.errorDefault}`,
`mm-box--border-color-${Color.errorDefault}`,
);
});
it('should forward a ref to the root html element', () => {

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

@ -1,4 +1,4 @@
import React, { forwardRef, Ref } from 'react';
import React from 'react';
import classnames from 'classnames';
import {
@ -13,12 +13,17 @@ import {
TextTransform,
} from '../../../helpers/constants/design-system';
import { Text } from '../text/deprecated';
import type { PolymorphicRef } from '../box';
import { Text } from '../text';
import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
import {
AvatarBaseComponent,
AvatarBaseProps,
AvatarBaseSize,
} from './avatar-base.types';
export const AvatarBase = forwardRef(
(
export const AvatarBase: AvatarBaseComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
size = AvatarBaseSize.Md,
children,
@ -27,8 +32,8 @@ export const AvatarBase = forwardRef(
color = TextColor.textDefault,
className = '',
...props
}: AvatarBaseProps,
ref: Ref<HTMLElement>,
}: AvatarBaseProps<C>,
ref?: PolymorphicRef<C>,
) => {
let fallbackTextVariant;
@ -54,7 +59,8 @@ export const AvatarBase = forwardRef(
borderRadius={BorderRadius.full}
variant={fallbackTextVariant}
textTransform={TextTransform.Uppercase}
{...{ backgroundColor, borderColor, color, ...props }}
{...{ backgroundColor, borderColor, color }}
{...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
>
{children}
</Text>

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

@ -3,7 +3,8 @@ import {
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import type { TextProps } from '../text/deprecated';
import type { PolymorphicComponentPropWithRef } from '../box';
import type { TextStyleUtilityProps } from '../text';
export enum AvatarBaseSize {
Xs = 'xs',
@ -13,7 +14,7 @@ export enum AvatarBaseSize {
Xl = 'xl',
}
export interface AvatarBaseProps extends TextProps {
export interface Props extends TextStyleUtilityProps {
/**
* The size of the AvatarBase.
* Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
@ -45,3 +46,10 @@ export interface AvatarBaseProps extends TextProps {
*/
className?: string;
}
export type AvatarBaseProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, Props>;
export type AvatarBaseComponent = <C extends React.ElementType = 'span'>(
props: AvatarBaseProps<C>,
) => React.ReactElement | null;

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

@ -3,7 +3,7 @@
exports[`AvatarFavicon should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-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"
data-testid="avatar-favicon"
>
<span

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

@ -3,7 +3,7 @@
exports[`AvatarIcon should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-primary-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon 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-primary-default mm-box--background-color-primary-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-icon"
>
<span

4
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -100,9 +100,9 @@ describe('AvatarIcon', () => {
/>,
);
expect(getByTestId('success')).toHaveClass('box--color-success-default');
expect(getByTestId('success')).toHaveClass('mm-box--color-success-default');
expect(getByTestId('success')).toHaveClass(
'box--background-color-success-muted',
'mm-box--background-color-success-muted',
);
});
it('should forward a ref to the root html element', () => {

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

@ -3,7 +3,7 @@
exports[`AvatarNetwork should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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"
data-testid="avatar-network"
>
?

12
ui/components/component-library/avatar-network/avatar-network.test.js
View File

@ -75,10 +75,10 @@ describe('AvatarNetwork', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
`mm-box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
`mm-box--color-${TextColor.errorDefault}`,
);
});
// background color
@ -96,10 +96,10 @@ describe('AvatarNetwork', () => {
</>,
);
expect(getByTestId(BackgroundColor.successDefault)).toHaveClass(
`box--background-color-${BackgroundColor.successDefault}`,
`mm-box--background-color-${BackgroundColor.successDefault}`,
);
expect(getByTestId(BackgroundColor.errorDefault)).toHaveClass(
`box--background-color-${BackgroundColor.errorDefault}`,
`mm-box--background-color-${BackgroundColor.errorDefault}`,
);
});
// border color
@ -117,10 +117,10 @@ describe('AvatarNetwork', () => {
</>,
);
expect(getByTestId(BorderColor.successDefault)).toHaveClass(
`box--border-color-${BorderColor.successDefault}`,
`mm-box--border-color-${BorderColor.successDefault}`,
);
expect(getByTestId(BorderColor.errorDefault)).toHaveClass(
`box--border-color-${BorderColor.errorDefault}`,
`mm-box--border-color-${BorderColor.errorDefault}`,
);
});
it('should forward a ref to the root html element', () => {

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

@ -3,7 +3,7 @@
exports[`AvatarToken should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token 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"
data-testid="avatar-token"
>
<img

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

@ -10,8 +10,13 @@ import {
import Box from '../../ui/box/box';
import { AvatarNetwork, BUTTON_LINK_SIZES, BadgeWrapper, ButtonLink } from '..';
import { Text } from '../text/deprecated';
import {
AvatarNetwork,
BUTTON_LINK_SIZES,
BadgeWrapper,
ButtonLink,
Text,
} from '..';
import README from './README.mdx';

12
ui/components/component-library/avatar-token/avatar-token.test.js
View File

@ -73,10 +73,10 @@ describe('AvatarToken', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
`mm-box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
`mm-box--color-${TextColor.errorDefault}`,
);
});
// background color
@ -94,10 +94,10 @@ describe('AvatarToken', () => {
</>,
);
expect(getByTestId(BackgroundColor.successDefault)).toHaveClass(
`box--background-color-${BackgroundColor.successDefault}`,
`mm-box--background-color-${BackgroundColor.successDefault}`,
);
expect(getByTestId(BackgroundColor.errorDefault)).toHaveClass(
`box--background-color-${BackgroundColor.errorDefault}`,
`mm-box--background-color-${BackgroundColor.errorDefault}`,
);
});
// border color
@ -115,10 +115,10 @@ describe('AvatarToken', () => {
</>,
);
expect(getByTestId(BorderColor.successDefault)).toHaveClass(
`box--border-color-${BorderColor.successDefault}`,
`mm-box--border-color-${BorderColor.successDefault}`,
);
expect(getByTestId(BorderColor.errorDefault)).toHaveClass(
`box--border-color-${BorderColor.errorDefault}`,
`mm-box--border-color-${BorderColor.errorDefault}`,
);
});
it('should forward a ref to the root html element', () => {

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

@ -12,13 +12,13 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
/>
<div>
<h5
class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
data-testid="mm-banner-base-title"
>
BannerAlert test
</h5>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
should render BannerAlert element correctly
</p>

4
ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
View File

@ -8,13 +8,13 @@ exports[`BannerBase should render bannerbase element correctly 1`] = `
>
<div>
<h5
class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
data-testid="mm-banner-base-title"
>
Bannerbase test
</h5>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
should render bannerbase element correctly
</p>

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

@ -12,8 +12,7 @@ import {
import Box from '../../ui/box';
import { ButtonLink, IconName, ButtonIcon } from '..';
import { Text } from '../text/deprecated';
import { ButtonLink, IconName, ButtonIcon, Text } from '..';
export const BannerBase = ({
className,
@ -93,7 +92,7 @@ BannerBase.propTypes = {
/**
* Additional props to pass to the `Text` component used for the `title` text
*/
titleProps: PropTypes.shape(Text.propTypes),
titleProps: PropTypes.object,
/**
* The description is the content area below BannerBase title
*/
@ -101,7 +100,7 @@ BannerBase.propTypes = {
/**
* Additional props to pass to the `Text` component used for the `description` text
*/
descriptionProps: PropTypes.shape(Text.propTypes),
descriptionProps: PropTypes.object,
/**
* The children is an alternative to using the description prop for BannerBase content below the title
*/
@ -113,7 +112,7 @@ BannerBase.propTypes = {
/**
* Props for action button (ButtonLink) of the BannerBase below the children
*/
actionButtonProps: PropTypes.shape(ButtonLink.propTypes),
actionButtonProps: PropTypes.object,
/**
* The onClick handler for the action button (ButtonLink)
*/
@ -130,7 +129,7 @@ BannerBase.propTypes = {
/**
* The props to pass to the close button
*/
closeButtonProps: PropTypes.shape(ButtonIcon.propTypes),
closeButtonProps: PropTypes.object,
/**
* An additional className to apply to the BannerBase
*/

4
ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
View File

@ -17,13 +17,13 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
</div>
<div>
<h5
class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
data-testid="mm-banner-base-title"
>
BannerTip test
</h5>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
should render BannerTip element correctly
</p>

4
ui/components/component-library/banner-tip/banner-tip.js
View File

@ -60,11 +60,11 @@ BannerTip.propTypes = {
/**
* logoProps accepts all the props from Box
*/
logoProps: PropTypes.shape(Box.propTypes),
logoProps: PropTypes.object,
/**
* logoWrapperProps accepts all the props from Box
*/
logoWrapperProps: PropTypes.shape(Box.propTypes),
logoWrapperProps: PropTypes.object,
/**
* The start(defualt left) content area of BannerBase
*/

4
ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = `
<div>
<a
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-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-pill"
data-testid="button-base"
href="https://www.test.com/"
rel="noopener noreferrer"
@ -17,7 +17,7 @@ exports[`ButtonBase should render anchor element correctly by href and externalL
exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-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-pill"
data-testid="button-base"
>
Button base

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

@ -4,7 +4,7 @@ import classnames from 'classnames';
import Box from '../../ui/box';
import { IconName, Icon, IconSize } from '../icon';
import { Text } from '../text/deprecated';
import { Text } from '..';
import {
AlignItems,
@ -133,7 +133,7 @@ ButtonBase.propTypes = {
/**
* Additional props to pass to the Text component that wraps the button children
*/
buttonTextProps: PropTypes.shape(Text.propTypes),
buttonTextProps: PropTypes.object,
/**
* The children to be rendered inside the ButtonBase
*/
@ -195,7 +195,7 @@ ButtonBase.propTypes = {
/**
* textProps accepts all the props from Icon
*/
textProps: PropTypes.shape(Text.propTypes),
textProps: PropTypes.object,
/**
* ButtonBase accepts all the props from Box
*/

1
ui/components/component-library/button-base/button-base.scss
View File

@ -1,7 +1,6 @@
.mm-button-base {
position: relative;
height: 40px;
padding: 0; // TODO: remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
cursor: pointer;
vertical-align: middle;
user-select: none;

2
ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonLink should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="button-link"
>
Button Link

2
ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonPrimary should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="button-primary"
>
Button Primary

2
ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonSecondary should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="button-secondary"
>
Button Secondary

8
ui/components/component-library/button/__snapshots__/button.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Button should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="button"
>
Button
@ -14,19 +14,19 @@ exports[`Button should render button element correctly 1`] = `
exports[`Button should render with different button types 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="primary"
>
Button
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="secondary"
>
Button
</button>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="link"
>
Button

2
ui/components/component-library/checkbox/checkbox.tsx
View File

@ -56,7 +56,7 @@ export const Checkbox: CheckboxComponent = React.forwardRef(
alignItems={AlignItems.center}
ref={ref}
htmlFor={id}
{...props}
{...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
>
<span className="mm-checkbox__input-wrapper">
<Box

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

@ -10,7 +10,7 @@ exports[`FormTextField should render correctly 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
focused="false"
type="text"
value=""

4
ui/components/component-library/form-text-field/form-text-field.test.js
View File

@ -79,7 +79,9 @@ describe('FormTextField', () => {
/>,
);
expect(getByTestId('text-field')).toHaveClass('mm-text-field--error');
expect(getByText('test help text')).toHaveClass('box--color-error-default');
expect(getByText('test help text')).toHaveClass(
'mm-box--color-error-default',
);
});
// helpText
it('should render with helpText', () => {

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

@ -3,7 +3,7 @@
exports[`HelpText should match snapshot 1`] = `
<div>
<p
class="box mm-text mm-help-text mm-text--body-xs box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-help-text mm-text--body-xs mm-box--color-text-default"
>
help text
</p>

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

@ -9,7 +9,9 @@ import {
SEVERITIES,
} from '../../../helpers/constants/design-system';
import { Text } from '../text/deprecated';
import Box from '../../ui/box';
import { Text } from '../text';
export const HelpText = ({
severity,
@ -60,7 +62,7 @@ HelpText.propTypes = {
*/
className: PropTypes.string,
/**
* HelpText also accepts all Text and Box props
* HelpText also accepts all Box props
*/
...Text.propTypes,
...Box.propTypes,
};

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

@ -40,10 +40,10 @@ describe('HelpText', () => {
<HelpText severity={SEVERITIES.INFO}>info</HelpText>
</>,
);
expect(getByText('error')).toHaveClass('box--color-error-default');
expect(getByText('success')).toHaveClass('box--color-success-default');
expect(getByText('warning')).toHaveClass('box--color-warning-default');
expect(getByText('info')).toHaveClass('box--color-info-default');
expect(getByText('error')).toHaveClass('mm-box--color-error-default');
expect(getByText('success')).toHaveClass('mm-box--color-success-default');
expect(getByText('warning')).toHaveClass('mm-box--color-warning-default');
expect(getByText('info')).toHaveClass('mm-box--color-info-default');
});
it('should render with different colors', () => {
const { getByText } = render(
@ -54,12 +54,12 @@ describe('HelpText', () => {
<HelpText color={Color.textMuted}>text muted</HelpText>
</>,
);
expect(getByText('default')).toHaveClass('box--color-text-default');
expect(getByText('text default')).toHaveClass('box--color-text-default');
expect(getByText('default')).toHaveClass('mm-box--color-text-default');
expect(getByText('text default')).toHaveClass('mm-box--color-text-default');
expect(getByText('text alternative')).toHaveClass(
'box--color-text-alternative',
'mm-box--color-text-alternative',
);
expect(getByText('text muted')).toHaveClass('box--color-text-muted');
expect(getByText('text muted')).toHaveClass('mm-box--color-text-muted');
});
it('should render with a different html element if children is an object', () => {
const { getByText, getByTestId } = render(

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

@ -4,7 +4,7 @@ exports[`Input should render correctly 1`] = `
<div>
<input
autocomplete="off"
class="box mm-text mm-input mm-text--body-md box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
type="text"
value=""
/>

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

@ -10,7 +10,7 @@ import {
import Box from '../../ui/box';
import { Text } from '../text/deprecated';
import { Text } from '..';
import { INPUT_TYPES } from './input.constants';

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

@ -3,7 +3,7 @@
exports[`label should render text inside the label 1`] = `
<div>
<label
class="box mm-text mm-label mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
>
label
</label>

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

@ -7,7 +7,7 @@ import {
Display,
AlignItems,
} from '../../../helpers/constants/design-system';
import { Text } from '../text/deprecated';
import { Text } from '..';
export const Label = ({ htmlFor, className, children, ...props }) => (
<Text

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

@ -10,7 +10,7 @@ exports[`ModalHeader should render ModalHeader correctly 1`] = `
class="box box--flex-direction-row box--width-full"
>
<header
class="box mm-text mm-text--heading-sm mm-text--text-align-center box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
>
Modal header
</header>

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

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

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

@ -1,7 +1,6 @@
import React from 'react';
import classnames from 'classnames';
import { HeaderBase, ButtonIcon, ButtonIconSize, IconName, ValidTag } from '..';
import { Text } from '../text/deprecated';
import { HeaderBase, Text, ButtonIcon, ButtonIconSize, IconName } from '..';
import {
TextVariant,
TextAlign,
@ -52,7 +51,7 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
>
{typeof children === 'string' ? (
<Text
as={ValidTag.Header}
as="header"
variant={TextVariant.headingSm}
textAlign={TextAlign.Center}
>

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

@ -7,12 +7,12 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
data-testid="picker-network"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs 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"
>
I
</div>
<p
class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
>
Imported
</p>

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

@ -1,9 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { AvatarNetwork, IconName, Icon, IconSize } from '..';
import { Text } from '../text/deprecated';
import Box from '../../ui/box';
import {
AlignItems,
DISPLAY,
@ -13,6 +10,8 @@ import {
IconColor,
BackgroundColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { AvatarNetwork, IconName, Icon, IconSize, Text } from '..';
export const PickerNetwork = ({
className,
@ -68,7 +67,7 @@ PickerNetwork.propTypes = {
/**
* It accepts all the props from AvatarNetwork
*/
avatarNetworkProps: PropTypes.shape(AvatarNetwork.propTypes),
avatarNetworkProps: PropTypes.object,
/**
* It accepts all the props from Icon
*/

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

@ -10,7 +10,7 @@ exports[`PopoverHeader should render PopoverHeader correctly 1`] = `
class="box box--flex-direction-row box--width-full"
>
<h4
class="box mm-text mm-text--heading-sm mm-text--text-align-center box--flex-direction-row box--color-inherit"
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-inherit"
>
PopoverHeader
</h4>

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

@ -1,12 +1,11 @@
import React from 'react';
import classnames from 'classnames';
import { HeaderBase, ButtonIcon, ButtonIconSize, IconName } from '..';
import { Text } from '../text/deprecated';
import { HeaderBase, ButtonIcon, ButtonIconSize, IconName, Text } from '..';
import {
IconColor,
TextVariant,
TextAlign,
Color,
TextColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { PopoverHeaderProps } from '.';
@ -58,7 +57,7 @@ export const PopoverHeader: React.FC<PopoverHeaderProps> = ({
<Text
variant={TextVariant.headingSm}
textAlign={TextAlign.Center}
color={Color.inherit}
color={TextColor.inherit}
>
{children}
</Text>

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

@ -7,7 +7,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
data-testid="tag-url"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-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"
@ -15,7 +15,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
/>
</div>
<p
class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default"
>
https://app.uniswap.org
</p>

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

@ -1,8 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { Text } from '../text/deprecated';
import {
AlignItems,
BackgroundColor,
@ -13,7 +11,8 @@ import {
Size,
TextVariant,
} from '../../../helpers/constants/design-system';
import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize } from '..';
import Box from '../../ui/box/box';
import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize, Text } from '..';
export const TagUrl = ({
label,
@ -85,7 +84,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from Avatar Favicon
*/
avatarFaviconProps: PropTypes.shape(AvatarFavicon.propTypes),
avatarFaviconProps: PropTypes.object,
/**
* It accepts all the props from Icon
*/
@ -97,7 +96,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from Text Component
*/
labelProps: PropTypes.shape(Text.propTypes),
labelProps: PropTypes.object,
/**
* If we want a button in TagUrl component.
*/
@ -105,7 +104,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from ButtonLink
*/
actionButtonProps: PropTypes.shape(ButtonLink.propTypes),
actionButtonProps: PropTypes.object,
/**
* Additional classNames to be added to the TagUrl component
*/

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

@ -7,7 +7,7 @@ exports[`Tag should render the label inside the tag and match snapshot 1`] = `
data-testid="tag"
>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
>
Imported
</p>

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

@ -1,8 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { Text } from '../text/deprecated';
import {
AlignItems,
BackgroundColor,
@ -12,6 +10,8 @@ import {
JustifyContent,
TextVariant,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { Text } from '..';
export const Tag = ({ label, className, labelProps, ...props }) => {
return (
@ -43,7 +43,7 @@ Tag.propTypes = {
/**
* The label props of the component. Most Text component props can be used
*/
labelProps: PropTypes.shape(Text.propTypes),
labelProps: PropTypes.object,
/**
* Additional classNames to be added to the Tag component
*/

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

@ -11,7 +11,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
/>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--margin-right-6 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
focused="false"
type="search"
value=""

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

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

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

@ -7,7 +7,7 @@ exports[`TextField should render correctly 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
focused="false"
type="text"
value=""

6
ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
View File

@ -14,13 +14,13 @@ exports[`Compliance Settings shows disconnect when Compliance is activated 1`] =
class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="disconnect-compliance"
>
Disconnect
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="start-compliance"
>
Open Codefi Compliance
@ -80,7 +80,7 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="start-compliance"
>
Open Codefi Compliance

2
ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`CustodyLabels Component should render correctly 1`] = `
<div>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center mm-box--color-text-default"
for="address-index"
>
<p

2
ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
for="transaction-note"
>
Transaction note

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

@ -6,7 +6,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="mm-box multichain-account-list-item mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--margin-inline-end-2 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--margin-inline-end-2 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"
>
<div
class="mm-avatar-account__jazzicon"
@ -61,10 +61,10 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis box--margin-inline-end-2 box--flex-direction-row box--color-text-default"
>
<button
class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
>
<span
class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
Test Account
</span>

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

@ -3,14 +3,14 @@
exports[`AccountPicker renders properly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-transparent box--rounded-lg"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="account-menu-icon"
>
<span
class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse"
class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs 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-background-default box--border-style-solid box--border-width-1"
>
<canvas
height="32"

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

@ -212,12 +212,12 @@ exports[`App Header should match snapshot 1`] = `
disabled=""
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs 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"
>
C
</div>
<p
class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
>
Chain 5
</p>
@ -228,14 +228,14 @@ exports[`App Header should match snapshot 1`] = `
</button>
</div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-transparent box--rounded-lg"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="account-menu-icon"
>
<span
class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse"
class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs 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-background-default box--border-style-solid box--border-width-1"
>
<div
class="mm-avatar-account__jazzicon"

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

@ -12,12 +12,12 @@ exports[`DetectedTokensBanner should render correctly 1`] = `
/>
<div>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
3 new tokens found in this account
</p>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Import tokens
</button>

8
ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
View File

@ -7,7 +7,7 @@ exports[`Json should match snapshot 1`] = `
>
Used by a variety of different clients
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
rel="noopener noreferrer"
target="_blank"
@ -30,7 +30,7 @@ exports[`Json should match snapshot 1`] = `
<input
aria-invalid="true"
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
focused="true"
id="json-password-box"
placeholder="Enter optional password"
@ -43,12 +43,12 @@ exports[`Json should match snapshot 1`] = `
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="import-account-confirm-button"
disabled=""
>

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

@ -9,7 +9,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="import-token-button"
>
<span
@ -23,7 +23,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="refresh-list-button"
>
<span
@ -46,7 +46,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="import-token-button"
>
<span
@ -60,7 +60,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="refresh-list-button"
>
<span

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

@ -6,7 +6,7 @@ exports[`NetworkListItem renders properly 1`] = `
class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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"
>
<img
alt="Polygon logo"
@ -18,10 +18,10 @@ exports[`NetworkListItem renders properly 1`] = `
class="mm-box multichain-network-list-item__network-name"
>
<button
class="box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
>
<span
class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
Polygon
</span>

4
ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`TokenListItem should render correctly 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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-border-default box--border-style-solid box--border-width-1"
>
?
</div>
@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs 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-border-muted box--border-style-solid box--border-width-1"
>
<img
alt="Ethereum Mainnet logo"

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

@ -140,7 +140,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>
@ -325,7 +325,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>
@ -510,7 +510,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>
@ -695,7 +695,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
Nonce
</h6>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Edit
</button>

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

@ -322,7 +322,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
/>
<div>
<p
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
Network is busy. Gas prices are high and estimates are less accurate.
</p>
@ -677,4 +677,4 @@ exports[`ConfirmSendEther should render correct information for for confirm send
</div>
</div>,
]
`;
`;

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

@ -20,7 +20,7 @@ exports[`error template matches the snapshot 1`] = `
class="box box--padding-top-2 box--padding-bottom-2 box--flex-direction-column box--justify-content-center box--align-items-center box--height-full box--display-flex"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-error-default box--background-color-error-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-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"

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

@ -20,7 +20,7 @@ exports[`success template matches the snapshot 1`] = `
class="box box--padding-top-2 box--padding-bottom-2 box--flex-direction-column box--justify-content-center box--align-items-center box--height-full box--display-flex"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-success-default box--background-color-success-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-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"

2
ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
View File

@ -156,7 +156,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
class="box box--flex-direction-row"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
>
Done
</button>

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

@ -29,7 +29,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
>
<label
class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
for="address-0"
>
<span
@ -39,20 +39,20 @@ exports[`CustodyAccountList renders accounts 1`] = `
</span>
</label>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-right-3 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
for="address-0"
>
<span
class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
>
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://etherscan.io/address/0x1234567890123456789012345678901234567890"
rel="noopener noreferrer"
target="_blank"
>
<span
class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
>
0x123...7890
<span
@ -104,7 +104,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
>
<label
class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
for="address-1"
>
<span
@ -114,20 +114,20 @@ exports[`CustodyAccountList renders accounts 1`] = `
</span>
</label>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-right-3 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
for="address-1"
>
<span
class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
>
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://etherscan.io/address/0x0987654321098765432109876543210987654321"
rel="noopener noreferrer"
target="_blank"
>
<span
class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
>
0x098...4321
<span
@ -171,13 +171,13 @@ exports[`CustodyAccountList renders accounts 1`] = `
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="custody-account-cancel-button"
>
[cancel]
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="custody-account-connect-button"
disabled=""
>

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

@ -81,7 +81,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
</p>
</div>
<button
class="box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="custody-connect-button"
>
Select

4
ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
View File

@ -95,12 +95,12 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Reject
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
>
displayName
</button>

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

@ -17,7 +17,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
The
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure"
rel="noopener noreferrer"
target="_blank"
@ -42,7 +42,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
MetaMask is a
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet"
rel="noopener noreferrer"
target="_blank"
@ -80,7 +80,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
</div>
<form>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
for="password-box"
>
Enter password to continue
@ -90,7 +90,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
data-testid="input-password"
focused="true"
id="password-box"
@ -104,12 +104,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
class="box box--margin-top-auto box--display-flex box--gap-4 box--flex-direction-row"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
disabled=""
>
Next

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

@ -12,7 +12,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box mm-box--margin-bottom-4 mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-right-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Create a Snap Account
</button>
@ -42,7 +42,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="mm-box"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
>
Install snap
</button>
@ -64,7 +64,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-info-default"
class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
@ -86,7 +86,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-info-default"
class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
@ -138,7 +138,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
>
<p
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
>
EOA
</p>
@ -180,7 +180,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="auditUrl1"
>
auditUrl1
@ -190,7 +190,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="auditUrl2"
>
auditUrl2

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

@ -24,7 +24,7 @@ exports[`SnapCard should render 1`] = `
</div>
</div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="install-snap-button"
>
Install

4
ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
View File

@ -24,7 +24,7 @@ exports[`Security Tab should match snapshot 1`] = `
class="settings-page__content-padded"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
data-testid="reveal-seed-words"
type="danger"
>
@ -357,7 +357,7 @@ exports[`Security Tab should match snapshot 1`] = `
class="settings-page__content-item-col"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
type="secondary"
>
Add custom network

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

@ -11,7 +11,7 @@ exports[`ListWithSearch renders the component with initial props 1`] = `
/>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--margin-right-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
focused="true"
id="list-with-search__text-search"
placeholder="Enter token name or paste address"

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

@ -408,7 +408,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
>
Max
</button>
@ -434,7 +434,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
</span>
</h6>
<a
class="box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
target="_blank"
>