mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
migration of button icon to use TS box version (#20227)
* migration of button icon to use TS box version * fixed lint issues * Some convention and linting updates * README fixes * Updating snapshot * snapshot updates --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Monalisha Mishra
GitHub
parent
d482b21513
commit
b46501cc0d
@ -24,7 +24,7 @@ exports[`Beta Header should match snapshot 1`] = `
|
||||
</h6>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="box mm-button-icon mm-button-icon--size-sm beta-header__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-warning-inverse box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm beta-header__button mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-warning-inverse mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
data-testid="beta-header-close"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -21,7 +21,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
|
||||
</h4>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="box mm-button-icon mm-button-icon--size-sm customize-nonce-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm customize-nonce-modal__close mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
@ -14,7 +14,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
|
||||
/>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="box mm-button-icon mm-button-icon--size-sm eth-sign-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm eth-sign-modal__close mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
@ -26,7 +26,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
||||
<div>
|
||||
<button
|
||||
aria-label="NFT Options"
|
||||
class="box mm-button-icon mm-button-icon--size-sm nft-options__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm nft-options__button 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 mm-box--rounded-lg"
|
||||
data-testid="nft-options__button"
|
||||
>
|
||||
<span
|
||||
@ -191,7 +191,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-label="copy"
|
||||
class="box mm-button-icon mm-button-icon--size-lg nft-details__contract-copy-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-lg nft-details__contract-copy-button mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
data-testid="nft-address-copy"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { IconColor, TextColor } from '../../../helpers/constants/design-system';
|
||||
import { IconName, IconSize, IconStyleUtilityProps } from '../icon';
|
||||
import { IconName, IconProps, IconSize } from '../icon';
|
||||
import type { PolymorphicComponentPropWithRef } from '../box';
|
||||
import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
|
||||
|
||||
@ -28,7 +28,7 @@ export interface AvatarIconStyleUtilityProps
|
||||
/**
|
||||
* Props for the icon inside AvatarIcon. All Icon props can be used
|
||||
*/
|
||||
iconProps?: IconStyleUtilityProps;
|
||||
iconProps?: IconProps<'span'>;
|
||||
/**
|
||||
* The size of the AvatarIcon
|
||||
* Possible values could be 'AvatarIconSize.Xs' 16px, 'AvatarIconSize.Sm' 24px, 'AvatarIconSize.Md' 32px, 'AvatarIconSize.Lg' 40px, 'AvatarIconSize.Xl' 48px
|
||||
|
||||
@ -11,7 +11,7 @@ The `ButtonIcon` is used for icons associated with a user action.
|
||||
|
||||
## Props
|
||||
|
||||
The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
|
||||
|
||||
<ArgsTable of={ButtonIcon} />
|
||||
|
||||
@ -26,8 +26,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon } from '../ui/component-library';
|
||||
import { IconName } from '../icon';
|
||||
import { ButtonIcon, IconName } from '../../component-library';
|
||||
|
||||
<ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
|
||||
```
|
||||
@ -46,8 +45,8 @@ Possible sizes include:
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIconSize } from '../../../helpers/constants/design-system';
|
||||
import { ButtonIcon } from '../ui/component-library';
|
||||
|
||||
import { ButtonIcon, ButtonIconSize, IconName } from '../../component-library';
|
||||
|
||||
<ButtonIcon size={ButtonIconSize.Sm} iconName={IconName.Close} ariaLabel="Close"/>
|
||||
<ButtonIcon size={ButtonIconSize.Lg} iconName={IconName.Close} ariaLabel="Close"/>
|
||||
@ -62,12 +61,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
import { IconColor } from '../../../helpers/constants/design-system';
|
||||
import { ButtonIcon, IconName } from '../../component-library';
|
||||
|
||||
|
||||
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={IconColor.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
```
|
||||
|
||||
### As
|
||||
@ -84,12 +83,12 @@ Button `as` options:
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
import { IconColor } from '../../../helpers/constants/design-system';
|
||||
import { ButtonIcon, IconName } from '../../component-library';
|
||||
|
||||
|
||||
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={IconColor.primaryDefault} ariaLabel="Visit MetaMask.io"/>
|
||||
```
|
||||
|
||||
### Href
|
||||
@ -101,14 +100,14 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
import { IconColor } from '../../../helpers/constants/design-system';
|
||||
import { ButtonIcon, IconName } from '../../component-library';
|
||||
|
||||
<ButtonIcon
|
||||
href="https://metamask.io/"
|
||||
target="_blank"
|
||||
iconName={IconName.Export}
|
||||
color={Color.primaryDefault}
|
||||
color={IconColor.primaryDefault}
|
||||
ariaLabel="Visit MetaMask.io"
|
||||
/>;
|
||||
```
|
||||
@ -122,12 +121,12 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon, IconName } from '../ui/component-library';
|
||||
import { Color } from '../../../helpers/constants/design-system';
|
||||
import { IconColor } from '../../../helpers/constants/design-system';
|
||||
import { ButtonIcon, IconName } from '../../component-library';
|
||||
|
||||
<ButtonIcon
|
||||
iconName={IconName.Export}
|
||||
color={Color.primaryDefault}
|
||||
color={IconColor.primaryDefault}
|
||||
ariaLabel="Visit MetaMask.io"
|
||||
/>;
|
||||
```
|
||||
@ -141,7 +140,7 @@ Use the boolean `disabled` prop to disable button
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { ButtonIcon } from '../ui/component-library';
|
||||
import { ButtonIcon, IconName } from '../../component-library';
|
||||
|
||||
<ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
|
||||
```
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`ButtonIcon should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
aria-label="add"
|
||||
class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
data-testid="button-icon"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
height: var(--button-icon-size);
|
||||
width: var(--button-icon-size);
|
||||
min-width: var(--button-icon-size); // fixes width for flexbox
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ import README from './README.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/ButtonIcon',
|
||||
|
||||
component: ButtonIcon,
|
||||
parameters: {
|
||||
docs: {
|
||||
@ -21,51 +20,29 @@ export default {
|
||||
options: ['button', 'a'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
iconName: IconName.Close,
|
||||
ariaLabel: 'Close',
|
||||
},
|
||||
} as Meta<typeof ButtonIcon>;
|
||||
|
||||
const Template: StoryFn<typeof ButtonIcon> = (args) => <ButtonIcon {...args} />;
|
||||
|
||||
export const DefaultStory = Template.bind({});
|
||||
|
||||
DefaultStory.args = {
|
||||
iconName: IconName.Close,
|
||||
ariaLabel: 'Close',
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const IconNameStory: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<ButtonIcon {...args} />
|
||||
);
|
||||
|
||||
IconNameStory.args = {
|
||||
iconName: IconName.Close,
|
||||
ariaLabel: 'Close',
|
||||
};
|
||||
|
||||
IconNameStory.storyName = 'IconName';
|
||||
|
||||
export const SizeStory: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<>
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
size={ButtonIconSize.Sm}
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
/>
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
size={ButtonIconSize.Md}
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
/>
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
size={ButtonIconSize.Lg}
|
||||
color={IconColor.primaryDefault}
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
/>
|
||||
<ButtonIcon {...args} size={ButtonIconSize.Sm} />
|
||||
<ButtonIcon {...args} size={ButtonIconSize.Md} />
|
||||
<ButtonIcon {...args} size={ButtonIconSize.Lg} />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -73,12 +50,7 @@ SizeStory.storyName = 'Size';
|
||||
|
||||
export const AriaLabel: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<>
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
as="button"
|
||||
iconName={IconName.Close}
|
||||
ariaLabel="Close"
|
||||
/>
|
||||
<ButtonIcon {...args} />
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
as="a"
|
||||
@ -93,11 +65,11 @@ export const AriaLabel: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
|
||||
export const As: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<>
|
||||
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
|
||||
<ButtonIcon {...args} />
|
||||
<ButtonIcon
|
||||
{...args}
|
||||
as="a"
|
||||
href="#"
|
||||
{...args}
|
||||
color={IconColor.primaryDefault}
|
||||
iconName={IconName.Export}
|
||||
ariaLabel="demo"
|
||||
@ -106,17 +78,19 @@ export const As: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
);
|
||||
|
||||
export const Href: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<ButtonIcon {...args} iconName={IconName.Export} target="_blank" />
|
||||
<ButtonIcon {...args} />
|
||||
);
|
||||
|
||||
Href.args = {
|
||||
ariaLabel: 'Visit Metamask.io',
|
||||
href: 'https://metamask.io/',
|
||||
target: '_blank',
|
||||
color: IconColor.primaryDefault,
|
||||
iconName: IconName.Export,
|
||||
};
|
||||
|
||||
export const ColorStory: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
|
||||
<ButtonIcon {...args} />
|
||||
);
|
||||
ColorStory.storyName = 'Color';
|
||||
|
||||
@ -125,7 +99,7 @@ ColorStory.args = {
|
||||
};
|
||||
|
||||
export const Disabled: StoryFn<typeof ButtonIcon> = (args) => (
|
||||
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
|
||||
<ButtonIcon {...args} />
|
||||
);
|
||||
|
||||
Disabled.args = {
|
||||
|
||||
@ -99,10 +99,10 @@ describe('ButtonIcon', () => {
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId(IconColor.iconDefault)).toHaveClass(
|
||||
`box--color-${IconColor.iconDefault}`,
|
||||
`mm-box--color-${IconColor.iconDefault}`,
|
||||
);
|
||||
expect(getByTestId(IconColor.errorDefault)).toHaveClass(
|
||||
`box--color-${IconColor.errorDefault}`,
|
||||
`mm-box--color-${IconColor.errorDefault}`,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -10,10 +10,14 @@ import {
|
||||
JustifyContent,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
import { Icon, IconSize } from '../icon';
|
||||
|
||||
import { ButtonIconSize, ButtonIconProps } from './button-icon.types';
|
||||
import { Box, Icon } from '..';
|
||||
import { IconSize } from '../icon';
|
||||
import { BoxProps, PolymorphicRef } from '../box';
|
||||
import {
|
||||
ButtonIconSize,
|
||||
ButtonIconProps,
|
||||
ButtonIconComponent,
|
||||
} from './button-icon.types';
|
||||
|
||||
const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
|
||||
[ButtonIconSize.Sm]: IconSize.Sm,
|
||||
@ -21,11 +25,11 @@ const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
|
||||
[ButtonIconSize.Lg]: IconSize.Lg,
|
||||
};
|
||||
|
||||
export const ButtonIcon = React.forwardRef(
|
||||
(
|
||||
export const ButtonIcon: ButtonIconComponent = React.forwardRef(
|
||||
<C extends React.ElementType = 'button' | 'a'>(
|
||||
{
|
||||
ariaLabel,
|
||||
as = 'button',
|
||||
as,
|
||||
className = '',
|
||||
color = IconColor.iconDefault,
|
||||
href,
|
||||
@ -34,15 +38,15 @@ export const ButtonIcon = React.forwardRef(
|
||||
disabled,
|
||||
iconProps,
|
||||
...props
|
||||
}: ButtonIconProps,
|
||||
ref: React.Ref<HTMLElement>,
|
||||
}: ButtonIconProps<C>,
|
||||
ref?: PolymorphicRef<C>,
|
||||
) => {
|
||||
const Tag = href ? 'a' : as;
|
||||
const isDisabled = disabled && Tag === 'button';
|
||||
const tag = href ? 'a' : as || 'button';
|
||||
const isDisabled = disabled && tag === 'button';
|
||||
return (
|
||||
<Box
|
||||
aria-label={ariaLabel}
|
||||
as={Tag}
|
||||
as={tag}
|
||||
className={classnames(
|
||||
'mm-button-icon',
|
||||
`mm-button-icon--size-${String(size)}`,
|
||||
@ -60,7 +64,7 @@ export const ButtonIcon = React.forwardRef(
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
{...(href ? { href } : {})}
|
||||
ref={ref}
|
||||
{...props}
|
||||
{...(props as BoxProps<C>)}
|
||||
>
|
||||
<Icon
|
||||
name={iconName}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { BoxProps } from '../../ui/box/box.d';
|
||||
import { IconName, IconProps } from '../icon';
|
||||
import { IconColor } from '../../../helpers/constants/design-system';
|
||||
import { PolymorphicComponentPropWithRef, StyleUtilityProps } from '../box';
|
||||
|
||||
export enum ButtonIconSize {
|
||||
Sm = 'sm',
|
||||
@ -8,7 +8,7 @@ export enum ButtonIconSize {
|
||||
Lg = 'lg',
|
||||
}
|
||||
|
||||
export interface ButtonIconProps extends BoxProps {
|
||||
export interface ButtonIconStyleUtilityProps extends StyleUtilityProps {
|
||||
/**
|
||||
* String that adds an accessible name for ButtonIcon
|
||||
*/
|
||||
@ -48,3 +48,10 @@ export interface ButtonIconProps extends BoxProps {
|
||||
*/
|
||||
size?: ButtonIconSize;
|
||||
}
|
||||
|
||||
export type ButtonIconProps<C extends React.ElementType> =
|
||||
PolymorphicComponentPropWithRef<C, ButtonIconStyleUtilityProps>;
|
||||
|
||||
export type ButtonIconComponent = <C extends React.ElementType = 'button'>(
|
||||
props: ButtonIconProps<C>,
|
||||
) => React.ReactElement | null;
|
||||
|
||||
@ -19,7 +19,7 @@ export interface ModalHeaderProps extends HeaderBaseStyleUtilityProps {
|
||||
/**
|
||||
* The props to pass to the back `ButtonIcon`
|
||||
*/
|
||||
backButtonProps?: ButtonIconProps;
|
||||
backButtonProps?: ButtonIconProps<'button'>;
|
||||
/**
|
||||
* The start (left) content area of ModalHeader
|
||||
* Default to have the back `ButtonIcon` when `onBack` is passed, but passing a `startAccessory` will override this
|
||||
@ -33,7 +33,7 @@ export interface ModalHeaderProps extends HeaderBaseStyleUtilityProps {
|
||||
/**
|
||||
* The props to pass to the close `ButtonIcon`
|
||||
*/
|
||||
closeButtonProps?: ButtonIconProps;
|
||||
closeButtonProps?: ButtonIconProps<'button'>;
|
||||
/**
|
||||
* The end (right) content area of ModalHeader
|
||||
* Default to have the close `ButtonIcon` when `onClose` is passed, but passing a `endAccessory` will override this
|
||||
|
||||
@ -19,7 +19,7 @@ export interface PopoverHeaderProps extends HeaderBaseStyleUtilityProps {
|
||||
/**
|
||||
* The props to pass to the back `ButtonIcon`
|
||||
*/
|
||||
backButtonProps?: ButtonIconProps;
|
||||
backButtonProps?: ButtonIconProps<'button'>;
|
||||
/**
|
||||
* The start (left) content area of PopoverHeader
|
||||
* Default to have the back `ButtonIcon` when `onBack` is passed, but passing a `startAccessory` will override this
|
||||
@ -33,7 +33,7 @@ export interface PopoverHeaderProps extends HeaderBaseStyleUtilityProps {
|
||||
/**
|
||||
* The props to pass to the close `ButtonIcon`
|
||||
*/
|
||||
closeButtonProps?: ButtonIconProps;
|
||||
closeButtonProps?: ButtonIconProps<'button'>;
|
||||
/**
|
||||
* The end (right) content area of PopoverHeader
|
||||
* Default to have the close `ButtonIcon` when `onClose` is passed, but passing a `endAccessory` will override this
|
||||
|
||||
@ -122,7 +122,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
|
||||
</div>
|
||||
<button
|
||||
aria-label="Test Account Options"
|
||||
class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
data-testid="account-list-item-menu-button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -300,7 +300,7 @@ exports[`App Header should match snapshot 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-label="Account options"
|
||||
class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
data-testid="account-options-menu-button"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -25,7 +25,7 @@ exports[`NetworkListItem renders properly 1`] = `
|
||||
</div>
|
||||
<button
|
||||
aria-label="[deleteNetwork]"
|
||||
class="box mm-button-icon mm-button-icon--size-sm multichain-network-list-item__delete box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-error-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm multichain-network-list-item__delete mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-error-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
@ -410,7 +410,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm callout__close-button mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
@ -453,7 +453,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm callout__close-button mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
@ -244,7 +244,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm callout__close-button mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
@ -18,7 +18,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
|
||||
</h3>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="box mm-button-icon mm-button-icon--size-sm box--margin-left-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--margin-left-auto mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
data-testid="hardware-connect-close-btn"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -33,7 +33,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
|
||||
>
|
||||
<button
|
||||
aria-label="Back"
|
||||
class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
@ -289,7 +289,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-label="Copy to clipboard"
|
||||
class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
|
||||
@ -309,7 +309,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-label="Open in block explorer"
|
||||
class="box mm-button-icon mm-button-icon--size-lg box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg"
|
||||
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
|
||||
>
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user