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

migration of button icon to use TS box version (#20227)

Browse Source 
* 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 2023-08-04 00:53:47 +05:30 committed by GitHub
parent d482b21513
commit b46501cc0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 83 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ exports[`Beta Header should match snapshot 1`] = `
</h6> </h6>
<button <button
aria-label="Close" 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" data-testid="beta-header-close"
> >
<span <span

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

@ -21,7 +21,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
</h4> </h4>
<button <button
aria-label="Close" 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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

@ -14,7 +14,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
/> />
<button <button
aria-label="Close" 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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

@ -26,7 +26,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
<div> <div>
<button <button
aria-label="NFT Options" 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" data-testid="nft-options__button"
> >
<span <span
@ -191,7 +191,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
> >
<button <button
aria-label="copy" 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" data-testid="nft-address-copy"
> >
<span <span

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

@ -1,5 +1,5 @@
import { IconColor, TextColor } from '../../../helpers/constants/design-system'; 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 { PolymorphicComponentPropWithRef } from '../box';
import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types'; 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 * Props for the icon inside AvatarIcon. All Icon props can be used
*/ */
iconProps?: IconStyleUtilityProps; iconProps?: IconProps<'span'>;
/** /**
* The size of the AvatarIcon * The size of the AvatarIcon
* Possible values could be 'AvatarIconSize.Xs' 16px, 'AvatarIconSize.Sm' 24px, 'AvatarIconSize.Md' 32px, 'AvatarIconSize.Lg' 40px, 'AvatarIconSize.Xl' 48px * Possible values could be 'AvatarIconSize.Xs' 16px, 'AvatarIconSize.Sm' 24px, 'AvatarIconSize.Md' 32px, 'AvatarIconSize.Lg' 40px, 'AvatarIconSize.Xl' 48px

35
ui/components/component-library/button-icon/README.mdx
View File

@ -11,7 +11,7 @@ The `ButtonIcon` is used for icons associated with a user action.
## Props ## 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} /> <ArgsTable of={ButtonIcon} />
@ -26,8 +26,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon, IconName } from '../../component-library';
import { IconName } from '../icon';
<ButtonIcon iconName={IconName.Close} ariaLabel="Close" />; <ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
``` ```
@ -46,8 +45,8 @@ Possible sizes include:
</Canvas> </Canvas>
```jsx ```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.Sm} iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon size={ButtonIconSize.Lg} 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> </Canvas>
```jsx ```jsx
import { ButtonIcon, IconName } from '../ui/component-library'; import { IconColor } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system'; import { ButtonIcon, IconName } from '../../component-library';
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/> <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 ### As
@ -84,12 +83,12 @@ Button `as` options:
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, IconName } from '../ui/component-library'; import { IconColor } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system'; import { ButtonIcon, IconName } from '../../component-library';
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/> <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 ### Href
@ -101,14 +100,14 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, IconName } from '../ui/component-library'; import { IconColor } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system'; import { ButtonIcon, IconName } from '../../component-library';
<ButtonIcon <ButtonIcon
href="https://metamask.io/" href="https://metamask.io/"
target="_blank" target="_blank"
iconName={IconName.Export} iconName={IconName.Export}
color={Color.primaryDefault} color={IconColor.primaryDefault}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
``` ```
@ -122,12 +121,12 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, IconName } from '../ui/component-library'; import { IconColor } from '../../../helpers/constants/design-system';
import { Color } from '../../../helpers/constants/design-system'; import { ButtonIcon, IconName } from '../../component-library';
<ButtonIcon <ButtonIcon
iconName={IconName.Export} iconName={IconName.Export}
color={Color.primaryDefault} color={IconColor.primaryDefault}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
``` ```
@ -141,7 +140,7 @@ Use the boolean `disabled` prop to disable button
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon, IconName } from '../../component-library';
<ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />; <ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
``` ```

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

@ -4,7 +4,7 @@ exports[`ButtonIcon should render button element correctly 1`] = `
<div> <div>
<button <button
aria-label="add" 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" data-testid="button-icon"
> >
<span <span

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

@ -3,6 +3,7 @@
height: var(--button-icon-size); height: var(--button-icon-size);
width: var(--button-icon-size); width: var(--button-icon-size);
min-width: var(--button-icon-size); // fixes width for flexbox
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;

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

@ -8,7 +8,6 @@ import README from './README.mdx';
export default { export default {
title: 'Components/ComponentLibrary/ButtonIcon', title: 'Components/ComponentLibrary/ButtonIcon',
component: ButtonIcon, component: ButtonIcon,
parameters: { parameters: {
docs: { docs: {
@ -21,51 +20,29 @@ export default {
options: ['button', 'a'], options: ['button', 'a'],
}, },
}, },
args: {
iconName: IconName.Close,
ariaLabel: 'Close',
},
} as Meta<typeof ButtonIcon>; } as Meta<typeof ButtonIcon>;
const Template: StoryFn<typeof ButtonIcon> = (args) => <ButtonIcon {...args} />; const Template: StoryFn<typeof ButtonIcon> = (args) => <ButtonIcon {...args} />;
export const DefaultStory = Template.bind({}); export const DefaultStory = Template.bind({});
DefaultStory.args = {
iconName: IconName.Close,
ariaLabel: 'Close',
};
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const IconNameStory: StoryFn<typeof ButtonIcon> = (args) => ( export const IconNameStory: StoryFn<typeof ButtonIcon> = (args) => (
<ButtonIcon {...args} /> <ButtonIcon {...args} />
); );
IconNameStory.args = {
iconName: IconName.Close,
ariaLabel: 'Close',
};
IconNameStory.storyName = 'IconName'; IconNameStory.storyName = 'IconName';
export const SizeStory: StoryFn<typeof ButtonIcon> = (args) => ( export const SizeStory: StoryFn<typeof ButtonIcon> = (args) => (
<> <>
<ButtonIcon <ButtonIcon {...args} size={ButtonIconSize.Sm} />
{...args} <ButtonIcon {...args} size={ButtonIconSize.Md} />
size={ButtonIconSize.Sm} <ButtonIcon {...args} size={ButtonIconSize.Lg} />
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"
/>
</> </>
); );
@ -73,12 +50,7 @@ SizeStory.storyName = 'Size';
export const AriaLabel: StoryFn<typeof ButtonIcon> = (args) => ( export const AriaLabel: StoryFn<typeof ButtonIcon> = (args) => (
<> <>
<ButtonIcon <ButtonIcon {...args} />
{...args}
as="button"
iconName={IconName.Close}
ariaLabel="Close"
/>
<ButtonIcon <ButtonIcon
{...args} {...args}
as="a" as="a"
@ -93,11 +65,11 @@ export const AriaLabel: StoryFn<typeof ButtonIcon> = (args) => (
export const As: StoryFn<typeof ButtonIcon> = (args) => ( export const As: StoryFn<typeof ButtonIcon> = (args) => (
<> <>
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" /> <ButtonIcon {...args} />
<ButtonIcon <ButtonIcon
{...args}
as="a" as="a"
href="#" href="#"
{...args}
color={IconColor.primaryDefault} color={IconColor.primaryDefault}
iconName={IconName.Export} iconName={IconName.Export}
ariaLabel="demo" ariaLabel="demo"
@ -106,17 +78,19 @@ export const As: StoryFn<typeof ButtonIcon> = (args) => (
); );
export const Href: StoryFn<typeof ButtonIcon> = (args) => ( export const Href: StoryFn<typeof ButtonIcon> = (args) => (
<ButtonIcon {...args} iconName={IconName.Export} target="_blank" /> <ButtonIcon {...args} />
); );
Href.args = { Href.args = {
ariaLabel: 'Visit Metamask.io', ariaLabel: 'Visit Metamask.io',
href: 'https://metamask.io/', href: 'https://metamask.io/',
target: '_blank',
color: IconColor.primaryDefault, color: IconColor.primaryDefault,
iconName: IconName.Export,
}; };
export const ColorStory: StoryFn<typeof ButtonIcon> = (args) => ( export const ColorStory: StoryFn<typeof ButtonIcon> = (args) => (
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" /> <ButtonIcon {...args} />
); );
ColorStory.storyName = 'Color'; ColorStory.storyName = 'Color';
@ -125,7 +99,7 @@ ColorStory.args = {
}; };
export const Disabled: StoryFn<typeof ButtonIcon> = (args) => ( export const Disabled: StoryFn<typeof ButtonIcon> = (args) => (
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" /> <ButtonIcon {...args} />
); );
Disabled.args = { Disabled.args = {

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

@ -99,10 +99,10 @@ describe('ButtonIcon', () => {
</>, </>,
); );
expect(getByTestId(IconColor.iconDefault)).toHaveClass( expect(getByTestId(IconColor.iconDefault)).toHaveClass(
`box--color-${IconColor.iconDefault}`, `mm-box--color-${IconColor.iconDefault}`,
); );
expect(getByTestId(IconColor.errorDefault)).toHaveClass( expect(getByTestId(IconColor.errorDefault)).toHaveClass(
`box--color-${IconColor.errorDefault}`, `mm-box--color-${IconColor.errorDefault}`,
); );
}); });

30
ui/components/component-library/button-icon/button-icon.tsx
View File

@ -10,10 +10,14 @@ import {
JustifyContent, JustifyContent,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import { Box, Icon } from '..';
import { Icon, IconSize } from '../icon'; import { IconSize } from '../icon';
import { BoxProps, PolymorphicRef } from '../box';
import { ButtonIconSize, ButtonIconProps } from './button-icon.types'; import {
ButtonIconSize,
ButtonIconProps,
ButtonIconComponent,
} from './button-icon.types';
const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = { const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
[ButtonIconSize.Sm]: IconSize.Sm, [ButtonIconSize.Sm]: IconSize.Sm,
@ -21,11 +25,11 @@ const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
[ButtonIconSize.Lg]: IconSize.Lg, [ButtonIconSize.Lg]: IconSize.Lg,
}; };
export const ButtonIcon = React.forwardRef( export const ButtonIcon: ButtonIconComponent = React.forwardRef(
( <C extends React.ElementType = 'button' | 'a'>(
{ {
ariaLabel, ariaLabel,
as = 'button', as,
className = '', className = '',
color = IconColor.iconDefault, color = IconColor.iconDefault,
href, href,
@ -34,15 +38,15 @@ export const ButtonIcon = React.forwardRef(
disabled, disabled,
iconProps, iconProps,
...props ...props
}: ButtonIconProps, }: ButtonIconProps<C>,
ref: React.Ref<HTMLElement>, ref?: PolymorphicRef<C>,
) => { ) => {
const Tag = href ? 'a' : as; const tag = href ? 'a' : as || 'button';
const isDisabled = disabled && Tag === 'button'; const isDisabled = disabled && tag === 'button';
return ( return (
<Box <Box
aria-label={ariaLabel} aria-label={ariaLabel}
as={Tag} as={tag}
className={classnames( className={classnames(
'mm-button-icon', 'mm-button-icon',
`mm-button-icon--size-${String(size)}`, `mm-button-icon--size-${String(size)}`,
@ -60,7 +64,7 @@ export const ButtonIcon = React.forwardRef(
backgroundColor={BackgroundColor.transparent} backgroundColor={BackgroundColor.transparent}
{...(href ? { href } : {})} {...(href ? { href } : {})}
ref={ref} ref={ref}
{...props} {...(props as BoxProps<C>)}
> >
<Icon <Icon
name={iconName} name={iconName}

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

@ -1,6 +1,6 @@
import type { BoxProps } from '../../ui/box/box.d';
import { IconName, IconProps } from '../icon'; import { IconName, IconProps } from '../icon';
import { IconColor } from '../../../helpers/constants/design-system'; import { IconColor } from '../../../helpers/constants/design-system';
import { PolymorphicComponentPropWithRef, StyleUtilityProps } from '../box';
export enum ButtonIconSize { export enum ButtonIconSize {
Sm = 'sm', Sm = 'sm',
@ -8,7 +8,7 @@ export enum ButtonIconSize {
Lg = 'lg', Lg = 'lg',
} }
export interface ButtonIconProps extends BoxProps { export interface ButtonIconStyleUtilityProps extends StyleUtilityProps {
/** /**
* String that adds an accessible name for ButtonIcon * String that adds an accessible name for ButtonIcon
*/ */
@ -48,3 +48,10 @@ export interface ButtonIconProps extends BoxProps {
*/ */
size?: ButtonIconSize; 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;

4
ui/components/component-library/modal-header/modal-header.types.ts
View File

@ -19,7 +19,7 @@ export interface ModalHeaderProps extends HeaderBaseStyleUtilityProps {
/** /**
* The props to pass to the back `ButtonIcon` * The props to pass to the back `ButtonIcon`
*/ */
backButtonProps?: ButtonIconProps; backButtonProps?: ButtonIconProps<'button'>;
/** /**
* The start (left) content area of ModalHeader * The start (left) content area of ModalHeader
* Default to have the back `ButtonIcon` when `onBack` is passed, but passing a `startAccessory` will override this * 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` * The props to pass to the close `ButtonIcon`
*/ */
closeButtonProps?: ButtonIconProps; closeButtonProps?: ButtonIconProps<'button'>;
/** /**
* The end (right) content area of ModalHeader * The end (right) content area of ModalHeader
* Default to have the close `ButtonIcon` when `onClose` is passed, but passing a `endAccessory` will override this * Default to have the close `ButtonIcon` when `onClose` is passed, but passing a `endAccessory` will override this

4
ui/components/component-library/popover-header/popover-header.types.ts
View File

@ -19,7 +19,7 @@ export interface PopoverHeaderProps extends HeaderBaseStyleUtilityProps {
/** /**
* The props to pass to the back `ButtonIcon` * The props to pass to the back `ButtonIcon`
*/ */
backButtonProps?: ButtonIconProps; backButtonProps?: ButtonIconProps<'button'>;
/** /**
* The start (left) content area of PopoverHeader * The start (left) content area of PopoverHeader
* Default to have the back `ButtonIcon` when `onBack` is passed, but passing a `startAccessory` will override this * 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` * The props to pass to the close `ButtonIcon`
*/ */
closeButtonProps?: ButtonIconProps; closeButtonProps?: ButtonIconProps<'button'>;
/** /**
* The end (right) content area of PopoverHeader * The end (right) content area of PopoverHeader
* Default to have the close `ButtonIcon` when `onClose` is passed, but passing a `endAccessory` will override this * Default to have the close `ButtonIcon` when `onClose` is passed, but passing a `endAccessory` will override this

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

@ -122,7 +122,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
</div> </div>
<button <button
aria-label="Test Account Options" 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" data-testid="account-list-item-menu-button"
> >
<span <span

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

@ -300,7 +300,7 @@ exports[`App Header should match snapshot 1`] = `
> >
<button <button
aria-label="Account options" 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" data-testid="account-options-menu-button"
> >
<span <span

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

@ -25,7 +25,7 @@ exports[`NetworkListItem renders properly 1`] = `
</div> </div>
<button <button
aria-label="[deleteNetwork]" 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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

@ -410,7 +410,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
</span> </span>
</p> </p>
<button <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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" 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> </span>
</p> </p>
<button <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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

@ -244,7 +244,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
</span> </span>
</p> </p>
<button <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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

@ -18,7 +18,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
</h3> </h3>
<button <button
aria-label="Close" 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" data-testid="hardware-connect-close-btn"
> >
<span <span

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

@ -33,7 +33,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
> >
<button <button
aria-label="Back" 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 <span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

@ -289,7 +289,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
> >
<button <button
aria-label="Copy to clipboard" 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 <span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit" 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 <button
aria-label="Open in block explorer" 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 <span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit" class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"