update ButtonIcon to TS (#18448)

* update ButtonIcon to TS

lint updates

fix lint issues

add ref

fix as prop

test updates

* box and icon updates for support

* Update ui/components/component-library/text-field/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* fix disabled

* update types for as

* update readme

* fix storybook

* george changes to button icon

* revert headerbase

* box prop back to HTMLElementTagNameMap

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

ui/components/app/beta-header/index.js

@@ -14,7 +14,7 @@ import {
 import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
 
 import { hideBetaHeader } from '../../../store/actions';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import {
   ICON_NAMES,
   ICON_SIZES,

ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { Menu } from '../../../ui/menu';
 import { ICON_NAMES } from '../../../component-library/icon/deprecated';
-import { ButtonIcon } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 const ConnectedAccountsListOptions = ({

ui/components/app/dropdowns/network-dropdown.js

@@ -32,7 +32,7 @@ import {
   ADD_POPULAR_CUSTOM_NETWORK,
   ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import {
   Icon,
   ICON_NAMES,

ui/components/app/flask/snap-authorship/snap-authorship.js

@@ -20,7 +20,8 @@ import {
   getSnapName,
   removeSnapIdPrefix,
 } from '../../../../helpers/utils/util';
-import { Text, ButtonIcon } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
+import { Text } from '../../../component-library';
 import {
   ICON_NAMES,
   ICON_SIZES,

ui/components/app/menu-bar/menu-bar.js

@@ -14,7 +14,7 @@ import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { GlobalMenu } from '../../multichain/global-menu';
 import AccountOptionsMenu from './account-options-menu';

ui/components/app/modals/contract-details-modal/contract-details-modal.js

@@ -25,7 +25,7 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
-import { ButtonIcon } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default function ContractDetailsModal({

ui/components/app/modals/customize-nonce/customize-nonce.component.js

@@ -15,7 +15,7 @@ import Box from '../../../ui/box';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
-import { ButtonIcon } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import {
   ICON_NAMES,
   ICON_SIZES,

ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js

@@ -10,7 +10,7 @@ import {
   calcTokenAmount,
   toPrecisionWithoutTrailingZeros,
 } from '../../../../../shared/lib/transactions-controller-utils';
-import { ButtonIcon } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import {
   ICON_SIZES,
   ICON_NAMES,

ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js

@@ -2,12 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import Box from '../../../ui/box';
-import {
-  Text,
-  Button,
-  BUTTON_TYPES,
-  ButtonIcon,
-} from '../../../component-library';
+import { Text, Button, BUTTON_TYPES } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 import {
   AlignItems,

ui/components/app/modals/new-account-modal/new-account-modal.component.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../ui/button/button.component';
-import { ButtonIcon } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default class NewAccountModal extends Component {

ui/components/app/nft-details/nft-details.js

@@ -53,7 +53,7 @@ import {
   TokenStandard,
 } from '../../../../shared/constants/transaction';
 import NftDefaultImage from '../nft-default-image';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import Tooltip from '../../ui/tooltip';
 import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';

ui/components/app/nft-options/nft-options.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../ui/menu';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { Color } from '../../../helpers/constants/design-system';
 

ui/components/app/wallet-overview/eth-overview.js

@@ -37,7 +37,10 @@ import {
 import Spinner from '../../ui/spinner';
 import { startNewDraftTransaction } from '../../../ducks/send';
 import { AssetType } from '../../../../shared/constants/transaction';
-import { ButtonIcon, BUTTON_ICON_SIZES } from '../../component-library';
+import {
+  ButtonIcon,
+  BUTTON_ICON_SIZES,
+} from '../../component-library/button-icon/deprecated';
 import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import { IconColor } from '../../../helpers/constants/design-system';
 import useRamps from '../../../hooks/experiences/useRamps';

ui/components/component-library/banner-base/banner-base.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { ButtonIcon, ButtonLink, Text } from '..';
-import { IconName } from '../icon';
+import { ButtonIcon } from '../button-icon/deprecated';
+import { ButtonLink, Text } from '..';
+import { ICON_NAMES } from '../icon/deprecated';
 
 import Box from '../../ui/box';
 
@@ -72,7 +73,7 @@ export const BannerBase = ({
         <ButtonIcon
           className="mm-banner-base__close-button"
           marginLeft="auto"
-          iconName={IconName.Close}
+          iconName={ICON_NAMES.CLOSE}
           size={Size.SM}
           ariaLabel="Close" // TODO: i18n
           onClick={onClose}

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

@@ -34,26 +34,23 @@ import { IconName } from '../icon';
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js`
-to change the size of `ButtonIcon`. Defaults to `Size.SM`
-
-Optional: `BUTTON_ICON_SIZES` from `./button-icon` object can be used instead of `Size`.
+Use the `size` prop and the `ButtonIconSize` enum from `./ui/components/component-library/icon` to change the size of `ButtonIcon`. Defaults to `ButtonIconSize.Sm`
 
 Possible sizes include:
 
-- `Size.SM` 24px
-- `Size.LG` 32px
+- `ButtonIconSize.Sm` 24px
+- `ButtonIconSize.Lg` 32px
 
 <Canvas>
   <Story id="components-componentlibrary-buttonicon--size-story" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
+import { ButtonIconSize } from '../../../helpers/constants/design-system';
 import { ButtonIcon } from '../ui/component-library';
 
-<ButtonIcon size={Size.SM} iconName={IconName.Close} ariaLabel="Close"/>
-<ButtonIcon size={Size.LG} iconName={IconName.Close} ariaLabel="Close"/>
+<ButtonIcon size={ButtonIconSize.Sm} iconName={IconName.Close} ariaLabel="Close"/>
+<ButtonIcon size={ButtonIconSize.Lg} iconName={IconName.Close} ariaLabel="Close"/>
 ```
 
 ### Aria Label

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

@@ -1,35 +1,11 @@
 import React from 'react';
-import {
-  AlignItems,
-  Color,
-  DISPLAY,
-  FLEX_DIRECTION,
-  Size,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Color } from '../../../helpers/constants/design-system';
 import { IconName } from '..';
-import { BUTTON_ICON_SIZES } from './button-icon.constants';
+import { ButtonIconSize } from './button-icon.types';
 import { ButtonIcon } from './button-icon';
 import README from './README.mdx';
 
-const marginSizeControlOptions = [
-  undefined,
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
-
 export default {
   title: 'Components/ComponentLibrary/ButtonIcon',
 
@@ -40,58 +16,18 @@ export default {
     },
   },
   argTypes: {
-    ariaLabel: {
-      control: 'text',
-    },
     as: {
       control: 'select',
       options: ['button', 'a'],
     },
-    className: {
-      control: 'text',
-    },
-    color: {
-      control: 'select',
-      options: Object.values(Color),
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    href: {
-      control: 'text',
-    },
-    iconName: {
-      control: 'select',
-      options: Object.values(IconName),
-    },
-    size: {
-      control: 'select',
-      options: Object.values(BUTTON_ICON_SIZES),
-    },
-    marginTop: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginRight: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginBottom: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginLeft: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
   },
-};
+} as ComponentMeta<typeof ButtonIcon>;
 
-export const DefaultStory = (args) => <ButtonIcon {...args} />;
+const Template: ComponentStory<typeof ButtonIcon> = (args) => (
+  <ButtonIcon {...args} />
+);
+
+export const DefaultStory = Template.bind({});
 
 DefaultStory.args = {
   iconName: IconName.Close,
@@ -100,7 +36,9 @@ DefaultStory.args = {
 
 DefaultStory.storyName = 'Default';
 
-export const IconNameStory = (args) => <ButtonIcon {...args} />;
+export const IconNameStory: ComponentStory<typeof ButtonIcon> = (args) => (
+  <ButtonIcon {...args} />
+);
 
 IconNameStory.args = {
   iconName: IconName.Close,
@@ -109,32 +47,27 @@ IconNameStory.args = {
 
 IconNameStory.storyName = 'IconName';
 
-export const SizeStory = (args) => (
-  <Box
-    display={DISPLAY.FLEX}
-    alignItems={AlignItems.baseline}
-    gap={1}
-    marginBottom={2}
-  >
+export const SizeStory: ComponentStory<typeof ButtonIcon> = (args) => (
+  <>
     <ButtonIcon
       {...args}
-      size={Size.SM}
+      size={ButtonIconSize.Sm}
       iconName={IconName.Close}
       ariaLabel="Close"
     />
     <ButtonIcon
       {...args}
-      size={Size.LG}
+      size={ButtonIconSize.Lg}
       color={Color.primaryDefault}
       iconName={IconName.Close}
       ariaLabel="Close"
     />
-  </Box>
+  </>
 );
 
 SizeStory.storyName = 'Size';
 
-export const AriaLabel = (args) => (
+export const AriaLabel: ComponentStory<typeof ButtonIcon> = (args) => (
   <>
     <ButtonIcon
       as="button"
@@ -154,8 +87,8 @@ export const AriaLabel = (args) => (
   </>
 );
 
-export const As = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
+export const As: ComponentStory<typeof ButtonIcon> = (args) => (
+  <>
     <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
     <ButtonIcon
       as="a"
@@ -165,10 +98,10 @@ export const As = (args) => (
       iconName={IconName.Export}
       ariaLabel="demo"
     />
-  </Box>
+  </>
 );
 
-export const Href = (args) => (
+export const Href: ComponentStory<typeof ButtonIcon> = (args) => (
   <ButtonIcon iconName={IconName.Export} {...args} target="_blank" />
 );
 
@@ -178,7 +111,7 @@ Href.args = {
   color: Color.primaryDefault,
 };
 
-export const ColorStory = (args) => (
+export const ColorStory: ComponentStory<typeof ButtonIcon> = (args) => (
   <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
 );
 ColorStory.storyName = 'Color';
@@ -187,7 +120,7 @@ ColorStory.args = {
   color: Color.primaryDefault,
 };
 
-export const Disabled = (args) => (
+export const Disabled: ComponentStory<typeof ButtonIcon> = (args) => (
   <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
 );
 

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

@@ -0,0 +1,147 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { IconColor } from '../../../helpers/constants/design-system';
+import { IconName } from '..';
+import { ButtonIconSize } from './button-icon.types';
+import { ButtonIcon } from './button-icon';
+
+describe('ButtonIcon', () => {
+  it('should render button element correctly', () => {
+    const { getByTestId, container } = render(
+      <ButtonIcon
+        data-testid="button-icon"
+        iconName={IconName.AddSquare}
+        ariaLabel="add"
+      />,
+    );
+    expect(container.querySelector('button')).toBeDefined();
+    expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render anchor element correctly', () => {
+    const { getByTestId, container } = render(
+      <ButtonIcon
+        as="a"
+        data-testid="button-icon"
+        iconName={IconName.AddSquare}
+        ariaLabel="add"
+      />,
+    );
+    expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
+    const anchor = container.getElementsByTagName('a').length;
+    expect(anchor).toBe(1);
+  });
+
+  it('should render anchor element correctly using href', () => {
+    const { getByTestId, getByRole } = render(
+      <ButtonIcon
+        href="/metamask"
+        data-testid="button-icon"
+        iconName={IconName.AddSquare}
+        ariaLabel="add"
+      />,
+    );
+    expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
+    expect(getByRole('link')).toBeDefined();
+  });
+
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <ButtonIcon
+          iconName={IconName.AddSquare}
+          ariaLabel="add"
+          size={ButtonIconSize.Sm}
+          data-testid={ButtonIconSize.Sm}
+        />
+        <ButtonIcon
+          iconName={IconName.AddSquare}
+          ariaLabel="add"
+          size={ButtonIconSize.Lg}
+          data-testid={ButtonIconSize.Lg}
+        />
+      </>,
+    );
+    expect(getByTestId(ButtonIconSize.Sm)).toHaveClass(
+      `mm-button-icon--size-${ButtonIconSize.Sm}`,
+    );
+    expect(getByTestId(ButtonIconSize.Lg)).toHaveClass(
+      `mm-button-icon--size-${ButtonIconSize.Lg}`,
+    );
+  });
+
+  it('should render with different colors', () => {
+    const { getByTestId } = render(
+      <>
+        <ButtonIcon
+          iconName={IconName.AddSquare}
+          ariaLabel="add"
+          color={IconColor.iconDefault}
+          data-testid={IconColor.iconDefault}
+        />
+        <ButtonIcon
+          iconName={IconName.AddSquare}
+          ariaLabel="add"
+          color={IconColor.errorDefault}
+          data-testid={IconColor.errorDefault}
+        />
+      </>,
+    );
+    expect(getByTestId(IconColor.iconDefault)).toHaveClass(
+      `box--color-${IconColor.iconDefault}`,
+    );
+    expect(getByTestId(IconColor.errorDefault)).toHaveClass(
+      `box--color-${IconColor.errorDefault}`,
+    );
+  });
+
+  it('should render with added classname', () => {
+    const { getByTestId } = render(
+      <ButtonIcon
+        data-testid="classname"
+        className="mm-button-icon--test"
+        iconName={IconName.AddSquare}
+        ariaLabel="add"
+      />,
+    );
+    expect(getByTestId('classname')).toHaveClass('mm-button-icon--test');
+  });
+
+  it('should render with different button states', () => {
+    const { getByTestId } = render(
+      <>
+        <ButtonIcon
+          disabled
+          data-testid="disabled"
+          iconName={IconName.AddSquare}
+          ariaLabel="add"
+        />
+      </>,
+    );
+
+    expect(getByTestId('disabled')).toHaveClass(`mm-button-icon--disabled`);
+    expect(getByTestId('disabled')).toBeDisabled();
+  });
+  it('should render with icon', () => {
+    const { getByTestId } = render(
+      <ButtonIcon
+        data-testid="icon"
+        iconName={IconName.AddSquare}
+        ariaLabel="add"
+        iconProps={{ 'data-testid': 'button-icon' }}
+      />,
+    );
+
+    expect(getByTestId('button-icon')).toBeDefined();
+  });
+
+  it('should render with aria-label', () => {
+    const { getByLabelText } = render(
+      <ButtonIcon iconName={IconName.AddSquare} ariaLabel="add" />,
+    );
+
+    expect(getByLabelText('add')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderRadius,
+  DISPLAY,
+  IconColor,
+  JustifyContent,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import { Icon, IconSize } from '../icon';
+
+import { ButtonIconSize, ButtonIconProps } from './button-icon.types';
+
+const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
+  [ButtonIconSize.Sm]: IconSize.Sm,
+  [ButtonIconSize.Lg]: IconSize.Lg,
+};
+
+export const ButtonIcon = React.forwardRef(
+  (
+    {
+      ariaLabel,
+      as = 'button',
+      className = '',
+      color = IconColor.iconDefault,
+      href,
+      size = ButtonIconSize.Lg,
+      iconName,
+      disabled,
+      iconProps,
+      ...props
+    }: ButtonIconProps,
+    ref: React.Ref<HTMLElement>,
+  ) => {
+    const Tag = href ? 'a' : as;
+    const isDisabled = disabled && Tag === 'button';
+    return (
+      <Box
+        aria-label={ariaLabel}
+        as={Tag}
+        className={classnames(
+          'mm-button-icon',
+          `mm-button-icon--size-${String(size)}`,
+          {
+            'mm-button-icon--disabled': Boolean(disabled),
+          },
+          className,
+        )}
+        color={color}
+        {...(isDisabled ? { disabled: true } : {})} // only allow disabled attribute to be passed down to the Box when the as prop is equal to a button element
+        display={DISPLAY.INLINE_FLEX}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
+        borderRadius={BorderRadius.LG}
+        backgroundColor={BackgroundColor.transparent}
+        {...(href ? { href } : {})}
+        ref={ref}
+        {...props}
+      >
+        <Icon
+          name={iconName}
+          size={buttonIconSizeToIconSize[size]}
+          {...iconProps}
+        />
+      </Box>
+    );
+  },
+);

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

@@ -0,0 +1,50 @@
+import type { BoxProps } from '../../ui/box/box.d';
+import { IconName } from '../icon';
+import type { IconProps } from '../icon';
+import { IconColor } from '../../../helpers/constants/design-system';
+
+export enum ButtonIconSize {
+  Sm = 'sm',
+  Lg = 'lg',
+}
+
+export interface ButtonIconProps extends BoxProps {
+  /**
+   * String that adds an accessible name for ButtonIcon
+   */
+  ariaLabel: string;
+  /**
+   * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag
+   */
+  as?: 'button' | 'a';
+  /**
+   * An additional className to apply to the ButtonIcon.
+   */
+  className?: string;
+  /**
+   * The color of the ButtonIcon component should use the IconColor object from
+   * ./ui/helpers/constants/design-system.js
+   */
+  color?: IconColor;
+  /**
+   * Boolean to disable button
+   */
+  disabled?: boolean;
+  /**
+   * When an `href` prop is passed, ButtonIcon will automatically change the root element to be an `a` (anchor) tag
+   */
+  href?: string;
+  /**
+   * The name of the icon to display. Should be one of IconName
+   */
+  iconName: IconName;
+  /**
+   * iconProps accepts all the props from Icon
+   */
+  iconProps?: IconProps;
+  /**
+   * The size of the ButtonIcon.
+   * Possible values could be 'ButtonIconSize.Sm' 24px, 'ButtonIconSize.Lg' 32px,
+   */
+  size?: ButtonIconSize;
+}

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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"
+    data-testid="button-icon"
+  >
+    <span
+      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+      style="mask-image: url('./images/icons/add-square.svg');"
+    />
+  </button>
+</div>
+`;

ui/components/component-library/button-icon/deprecated/button-icon.constants.js

@@ -1,4 +1,4 @@
-import { Size } from '../../../helpers/constants/design-system';
+import { Size } from '../../../../helpers/constants/design-system';
 
 export const BUTTON_ICON_SIZES = {
   SM: Size.SM,

ui/components/component-library/button-icon/deprecated/button-icon.js

@@ -10,10 +10,10 @@ import {
   IconColor,
   JustifyContent,
   Size,
-} from '../../../helpers/constants/design-system';
+} from '../../../../helpers/constants/design-system';
 
-import Box from '../../ui/box';
-import { Icon, IconName } from '../icon';
+import Box from '../../../ui/box';
+import { Icon, ICON_NAMES } from '../../icon/deprecated';
 
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 
@@ -86,7 +86,7 @@ ButtonIcon.propTypes = {
   /**
    * The name of the icon to display. Should be one of IconName
    */
-  iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
+  iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
   /**
    * iconProps accepts all the props from Icon
    */

ui/components/component-library/button-icon/deprecated/button-icon.test.js

@@ -1,8 +1,8 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { IconColor } from '../../../helpers/constants/design-system';
-import { IconName } from '..';
+import { IconColor } from '../../../../helpers/constants/design-system';
+import { ICON_NAMES } from '../../icon/deprecated';
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 import { ButtonIcon } from './button-icon';
 
@@ -11,7 +11,7 @@ describe('ButtonIcon', () => {
     const { getByTestId, container } = render(
       <ButtonIcon
         data-testid="button-icon"
-        iconName={IconName.AddSquare}
+        iconName={ICON_NAMES.ADD_SQUARE}
         ariaLabel="add"
       />,
     );
@@ -25,7 +25,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         as="a"
         data-testid="button-icon"
-        iconName={IconName.AddSquare}
+        iconName={ICON_NAMES.ADD_SQUARE}
         ariaLabel="add"
       />,
     );
@@ -39,7 +39,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         href="/metamask"
         data-testid="button-icon"
-        iconName={IconName.AddSquare}
+        iconName={ICON_NAMES.ADD_SQUARE}
         ariaLabel="add"
       />,
     );
@@ -51,13 +51,13 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <>
         <ButtonIcon
-          iconName={IconName.AddSquare}
+          iconName={ICON_NAMES.ADD_SQUARE}
           ariaLabel="add"
           size={BUTTON_ICON_SIZES.SM}
           data-testid={BUTTON_ICON_SIZES.SM}
         />
         <ButtonIcon
-          iconName={IconName.AddSquare}
+          iconName={ICON_NAMES.ADD_SQUARE}
           ariaLabel="add"
           size={BUTTON_ICON_SIZES.LG}
           data-testid={BUTTON_ICON_SIZES.LG}
@@ -76,13 +76,13 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <>
         <ButtonIcon
-          iconName={IconName.AddSquare}
+          iconName={ICON_NAMES.ADD_SQUARE}
           ariaLabel="add"
           color={IconColor.iconDefault}
           data-testid={IconColor.iconDefault}
         />
         <ButtonIcon
-          iconName={IconName.AddSquare}
+          iconName={ICON_NAMES.ADD_SQUARE}
           ariaLabel="add"
           color={IconColor.errorDefault}
           data-testid={IconColor.errorDefault}
@@ -102,7 +102,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         data-testid="classname"
         className="mm-button-icon--test"
-        iconName={IconName.AddSquare}
+        iconName={ICON_NAMES.ADD_SQUARE}
         ariaLabel="add"
       />,
     );
@@ -115,7 +115,7 @@ describe('ButtonIcon', () => {
         <ButtonIcon
           disabled
           data-testid="disabled"
-          iconName={IconName.AddSquare}
+          iconName={ICON_NAMES.ADD_SQUARE}
           ariaLabel="add"
         />
       </>,
@@ -128,7 +128,7 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <ButtonIcon
         data-testid="icon"
-        iconName={IconName.AddSquare}
+        iconName={ICON_NAMES.ADD_SQUARE}
         ariaLabel="add"
         iconProps={{ 'data-testid': 'button-icon' }}
       />,
@@ -139,7 +139,7 @@ describe('ButtonIcon', () => {
 
   it('should render with aria-label', () => {
     const { getByLabelText } = render(
-      <ButtonIcon iconName={IconName.AddSquare} ariaLabel="add" />,
+      <ButtonIcon iconName={ICON_NAMES.ADD_SQUARE} ariaLabel="add" />,
     );
 
     expect(getByLabelText('add')).toBeDefined();

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

@@ -0,0 +1,3 @@
+export { ButtonIcon } from './button-icon';
+export { ButtonIconSize } from './button-icon.types';
+export type { ButtonIconProps } from './button-icon.types';

ui/components/component-library/header-base/README.mdx

@@ -56,6 +56,7 @@ import {
   HeaderBase,
   Text,
   ButtonIcon,
+  ButtonIconSize,
   IconName,
 } from '../../component-library';
 import {
@@ -66,7 +67,7 @@ import {
 <HeaderBase
   startAccessory={
     <ButtonIcon
-      size={BUTTON_ICON_SIZES.SM}
+      size={ButtonIconSize.Sm}
       iconName={IconName.ArrowLeft}
       ariaLabel="back"
     />
@@ -91,7 +92,7 @@ Use the `endAccessoryWrapperProps` prop to customize the wrapper element around
 ```jsx
 import {
   ButtonIcon,
-  BUTTON_ICON_SIZES,
+  ButtonIconSize,
   HeaderBase,
   IconName,
   Text,
@@ -104,7 +105,7 @@ import {
 <HeaderBase
   endAccessory={
     <ButtonIcon
-      size={BUTTON_ICON_SIZES.SM}
+      size={ButtonIconSize.Sm}
       iconName={IconName.Close}
       ariaLabel="close"
     />

ui/components/component-library/header-base/header-base.stories.tsx

@@ -4,11 +4,12 @@ import Box from '../../ui/box';
 import {
   IconName,
   Button,
-  ButtonIcon,
-  BUTTON_ICON_SIZES,
   BUTTON_SIZES,
+  ButtonIcon,
+  ButtonIconSize,
   Text,
 } from '..';
+
 import {
   AlignItems,
   BackgroundColor,
@@ -42,14 +43,14 @@ DefaultStory.args = {
   ),
   startAccessory: (
     <ButtonIcon
-      size={BUTTON_ICON_SIZES.SM}
+      size={ButtonIconSize.Sm}
       iconName={IconName.ArrowLeft}
       ariaLabel="back"
     />
   ),
   endAccessory: (
     <ButtonIcon
-      size={BUTTON_ICON_SIZES.SM}
+      size={ButtonIconSize.Sm}
       iconName={IconName.Close}
       ariaLabel="close"
     />
@@ -74,7 +75,7 @@ export const StartAccessory = (args) => {
       marginBottom={4}
       startAccessory={
         <ButtonIcon
-          size={BUTTON_ICON_SIZES.SM}
+          size={ButtonIconSize.Sm}
           iconName={IconName.ArrowLeft}
           ariaLabel="back"
         />
@@ -94,7 +95,7 @@ export const EndAccessory = (args) => {
       marginBottom={4}
       endAccessory={
         <ButtonIcon
-          size={BUTTON_ICON_SIZES.SM}
+          size={ButtonIconSize.Sm}
           iconName={IconName.Close}
           ariaLabel="close"
         />
@@ -129,7 +130,7 @@ export const UseCaseDemos = (args) => (
         endAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.Close}
             ariaLabel="close"
           />
@@ -152,7 +153,7 @@ export const UseCaseDemos = (args) => (
         startAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.successAlternative}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.ArrowLeft}
             ariaLabel="back"
           />
@@ -175,7 +176,7 @@ export const UseCaseDemos = (args) => (
         startAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.successAlternative}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.ArrowLeft}
             ariaLabel="back"
           />
@@ -183,7 +184,7 @@ export const UseCaseDemos = (args) => (
         endAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.Close}
             ariaLabel="close"
           />
@@ -215,7 +216,7 @@ export const UseCaseDemos = (args) => (
         endAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.Close}
             ariaLabel="close"
           />
@@ -242,7 +243,7 @@ export const UseCaseDemos = (args) => (
         startAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.successAlternative}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.Close}
             ariaLabel="close"
           />
@@ -281,7 +282,7 @@ export const UseCaseDemos = (args) => (
         endAccessory={
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
-            size={BUTTON_ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             iconName={IconName.Close}
             ariaLabel="close"
           />

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

@@ -26,7 +26,7 @@ import {
   TextField,
   TextFieldSearch,
   TEXT_FIELD_SIZES,
-  BUTTON_ICON_SIZES,
+  ButtonIconSize,
   BUTTON_LINK_SIZES,
 } from '..';
 
@@ -131,7 +131,7 @@ export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
                   endAccessory={
                     <ButtonIcon
                       iconName={IconName.Copy}
-                      size={BUTTON_ICON_SIZES.SM}
+                      size={ButtonIconSize.Sm}
                       color={IconColor.iconAlternative}
                       ariaLabel="Copy to clipboard"
                       title="Copy to clipboard"

ui/components/component-library/index.js

@@ -16,7 +16,7 @@ export {
 export { AvatarBase } from './avatar-base';
 export { Button, BUTTON_TYPES, BUTTON_SIZES } from './button';
 export { ButtonBase, BUTTON_BASE_SIZES } from './button-base';
-export { ButtonIcon, BUTTON_ICON_SIZES } from './button-icon';
+export { ButtonIcon, ButtonIconSize } from './button-icon';
 export { ButtonLink, BUTTON_LINK_SIZES } from './button-link';
 export { ButtonPrimary, BUTTON_PRIMARY_SIZES } from './button-primary';
 export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';

ui/components/component-library/text-field-search/text-field-search.js

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Size } from '../../../helpers/constants/design-system';
-
-import { ButtonIcon, Icon, IconName, IconSize } from '..';
+import { ButtonIcon, ButtonIconSize, Icon, IconName, IconSize } from '..';
 import { TextField, TEXT_FIELD_TYPES } from '../text-field';
 
 export const TextFieldSearch = ({
@@ -30,7 +28,7 @@ export const TextFieldSearch = ({
             className="mm-text-field__button-clear"
             ariaLabel="Clear" // TODO: i18n
             iconName={IconName.Close}
-            size={Size.SM}
+            size={ButtonIconSize.SM}
             onClick={clearButtonOnClick}
             {...clearButtonProps}
           />

ui/components/component-library/text-field/README.mdx

@@ -90,8 +90,8 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
 
 ```jsx
 import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { Icon, IconName } from '../../component-library/deprecated'
-import { ButtonIcon, TextField } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { TextField, Icon, IconName } from '../../component-library';
 
 <TextField
   placeholder="Search"

ui/components/multichain/account-list-item/account-list-item.js

@@ -11,12 +11,12 @@ import { AccountListItemMenu } from '..';
 import Box from '../../ui/box/box';
 import {
   AvatarAccount,
-  ButtonIcon,
   Text,
   AvatarFavicon,
   Tag,
   ButtonLink,
 } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import {
   ICON_NAMES,
   ICON_SIZES,

ui/components/multichain/network-list-item/network-list-item.js

@@ -12,7 +12,8 @@ import {
   TextColor,
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
-import { AvatarNetwork, ButtonIcon, ButtonLink } from '../../component-library';
+import { AvatarNetwork, ButtonLink } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip/tooltip';

ui/components/ui/box/box.d.ts

@@ -130,7 +130,6 @@ export type BackgroundColorArray = [
   BackgroundColor?,
   BackgroundColor?,
 ];
-
 export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The content of the Box component.

ui/components/ui/callout/callout.js

@@ -5,7 +5,7 @@ import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
 import Typography from '../typography';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import {
   ICON_NAMES,
   ICON_SIZES,

ui/components/ui/contract-token-values/contract-token-values.js

@@ -16,7 +16,7 @@ import {
   Color,
 } from '../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../component-library/icon/deprecated';
 
 export default function ContractTokenValues({

ui/components/ui/editable-label/editable-label.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Color } from '../../../helpers/constants/design-system';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 import { ICON_NAMES } from '../../component-library/icon/deprecated';
 
 export default class EditableLabel extends Component {

ui/components/ui/nickname-popover/nickname-popover.component.js

@@ -15,7 +15,7 @@ import {
   ICON_NAMES,
   ICON_SIZES,
 } from '../../component-library/icon/deprecated';
-import { ButtonIcon } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
 
 const NicknamePopover = ({
   address,

ui/components/ui/popover/popover.component.js

@@ -23,7 +23,8 @@ import {
   ICON_NAMES,
   ICON_SIZES,
 } from '../../component-library/icon/deprecated';
-import { ButtonIcon, Text } from '../../component-library';
+import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { Text } from '../../component-library';
 
 const defaultHeaderProps = {
   padding: [6, 4, 4],

ui/pages/add-nft/add-nft.js

@@ -40,7 +40,7 @@ import {
   ICON_NAMES,
   ICON_SIZES,
 } from '../../components/component-library/icon/deprecated';
-import { ButtonIcon } from '../../components/component-library';
+import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
 
 export default function AddNft() {
   const t = useI18nContext();

ui/pages/asset/components/asset-options.js

@@ -8,7 +8,7 @@ import { Menu, MenuItem } from '../../../components/ui/menu';
 import { getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
 import { ICON_NAMES } from '../../../components/component-library/icon/deprecated';
-import { ButtonIcon } from '../../../components/component-library';
+import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
 import { Color } from '../../../helpers/constants/design-system';
 
 const AssetOptions = ({

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -30,7 +30,8 @@ import {
   ICON_NAMES,
   Icon,
 } from '../../../components/component-library/icon/deprecated';
-import { ButtonIcon, Text } from '../../../components/component-library';
+import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
+import { Text } from '../../../components/component-library';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {

ui/pages/home/home.component.js

@@ -35,7 +35,8 @@ import {
   ICON_NAMES,
   ICON_SIZES,
 } from '../../components/component-library/icon/deprecated';
-import { ButtonIcon, Text } from '../../components/component-library';
+import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
+import { Text } from '../../components/component-library';
 
 import {
   ASSET_ROUTE,

ui/pages/institutional/compliance-feature-page/compliance-feature-page.js

@@ -13,7 +13,8 @@ import {
   Color,
   FLEX_DIRECTION,
 } from '../../../helpers/constants/design-system';
-import { ButtonIcon, Text } from '../../../components/component-library';
+import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
+import { Text } from '../../../components/component-library';
 import {
   ICON_NAMES,
   ICON_SIZES,

ui/pages/notifications/notifications.js

@@ -20,7 +20,7 @@ import {
   ICON_SIZES,
   ICON_NAMES,
 } from '../../components/component-library/icon/deprecated';
-import { ButtonIcon } from '../../components/component-library';
+import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
 import { Color } from '../../helpers/constants/design-system';
 
 export function NotificationItem({ notification, snaps, onItemClick }) {

ui/pages/send/send-content/add-recipient/domain-input.component.js

@@ -13,7 +13,7 @@ import {
   ICON_NAMES,
   ICON_SIZES,
 } from '../../../../components/component-library/icon/deprecated';
-import { ButtonIcon } from '../../../../components/component-library';
+import { ButtonIcon } from '../../../../components/component-library/button-icon/deprecated';
 import { IconColor } from '../../../../helpers/constants/design-system';
 
 export default class DomainInput extends Component {

ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js

@@ -9,7 +9,7 @@ import {
   ICON_SIZES,
 } from '../../../../components/component-library/icon/deprecated';
 
-import { ButtonIcon } from '../../../../components/component-library';
+import { ButtonIcon } from '../../../../components/component-library/button-icon/deprecated';
 
 import Tooltip from '../../../../components/ui/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';

ui/pages/settings/settings.component.js

@@ -27,7 +27,7 @@ import {
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
 import AddNetwork from '../../components/app/add-network/add-network';
-import { ButtonIcon } from '../../components/component-library';
+import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
 import {
   Icon,
   ICON_NAMES,

ui/pages/token-details/token-details-page.js

@@ -29,7 +29,7 @@ import {
   ICON_SIZES,
   ICON_NAMES,
 } from '../../components/component-library/icon/deprecated';
-import { ButtonIcon } from '../../components/component-library';
+import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
 
 export default function TokenDetailsPage() {
   const dispatch = useDispatch();