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>

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

@@ -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

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

@@ -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"

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

@@ -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"

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

@@ -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

ui/components/component-library/avatar-icon/avatar-icon.types.ts

@@ -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

ui/components/component-library/button-icon/README.mdx

@@ -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 { ButtonIcon, IconName } from '../../component-library';
-import { IconName } from '../icon';
 
 <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 { 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="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 { 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="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 { IconColor } from '../../../helpers/constants/design-system';
-import { Color } 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 { IconColor } from '../../../helpers/constants/design-system';
-import { Color } 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" />;
 ```

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

@@ -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

ui/components/component-library/button-icon/button-icon.scss

@@ -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;
 

ui/components/component-library/button-icon/button-icon.stories.tsx

@@ -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
+    <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) => (
   <>
-    <ButtonIcon
+    <ButtonIcon {...args} />
-      {...args}
-      as="button"
-      iconName={IconName.Close}
-      ariaLabel="Close"
-    />
     <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 = {

ui/components/component-library/button-icon/button-icon.test.tsx

@@ -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}`,
     );
   });
 

ui/components/component-library/button-icon/button-icon.tsx

@@ -10,10 +10,14 @@ import {
   JustifyContent,
 } 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> = {
   [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,
+    }: 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 (
       <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}

ui/components/component-library/button-icon/button-icon.types.ts

@@ -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;

ui/components/component-library/modal-header/modal-header.types.ts

@@ -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

ui/components/component-library/popover-header/popover-header.types.ts

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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

ui/pages/institutional/custody/__snapshots__/custody.test.js.snap

@@ -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"

ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -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"