feat: migrate ButtonIcon to ADR-0003 and ADR-0004 (DSYS-485)

packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx

@@ -2,13 +2,14 @@ import {
   BoxAlignItems,
   BoxBackgroundColor,
   BoxFlexDirection,
+  ButtonIconSize,
   FontWeight,
   TextVariant,
 } from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
-import { ButtonIconSize, ButtonSize, IconName } from '../../types';
+import { ButtonSize, IconName } from '../../types';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { ButtonIcon } from '../ButtonIcon';

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.constants.ts

@@ -1,5 +1,4 @@
-import { ButtonIconSize } from '../../types';
-import { IconSize } from '../Icon';
+import { ButtonIconSize, IconSize } from '@metamask/design-system-shared';
 
 // Mappings
 export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.figma.tsx

@@ -1,10 +1,9 @@
 // import figma needs to remain as figma otherwise it breaks code connect
 // eslint-disable-next-line import-x/no-named-as-default
 import figma from '@figma/code-connect';
+import { IconName } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { IconName } from '../Icon';
-
 import { ButtonIcon } from './ButtonIcon';
 
 import { ButtonIconSize, ButtonIconVariant } from '.';

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.stories.tsx

@@ -1,9 +1,11 @@
+import {
+  ButtonIconSize,
+  IconName,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonIconSize, ButtonIconVariant } from '../../types';
-import { IconName } from '../Icon';
-
 import { ButtonIcon } from './ButtonIcon';
 import type { ButtonIconProps } from './ButtonIcon.types';
 

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.test.tsx

@@ -1,11 +1,13 @@
+import {
+  ButtonIconSize,
+  IconName,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
 
-import { ButtonIconSize, ButtonIconVariant } from '../../types';
-import { IconName } from '../Icon';
-
 import { ButtonIcon } from './ButtonIcon';
 import { TWCLASSMAP_BUTTONICON_SIZE_DIMENSION } from './ButtonIcon.constants';
 

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.tsx

@@ -1,9 +1,12 @@
+import {
+  IconColor,
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React, { useState } from 'react';
 import type { GestureResponderEvent } from 'react-native';
 
-import { ButtonIconSize, ButtonIconVariant } from '../../types';
-import type { IconColor } from '../Icon';
 import { Icon } from '../Icon';
 import { ButtonAnimated } from '../temp-components/ButtonAnimated';
 

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.types.ts

@@ -1,40 +1,17 @@
+import type { ButtonIconPropsShared } from '@metamask/design-system-shared';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import type { ButtonIconSize, ButtonIconVariant } from '../../types';
-import type { IconProps, IconName } from '../Icon';
+import type { IconProps } from '../Icon';
 import type { ButtonAnimatedProps } from '../temp-components/ButtonAnimated';
 
 /**
  * ButtonIcon component props.
  */
-export type ButtonIconProps = {
-  /**
-   * Optional prop to control the size of the icon
-   * Different sizes map to specific pixel dimensions
-   *
-   * @default IconSize.Md
-   */
-  size?: ButtonIconSize;
-  /**
-   * Optional prop to specify an icon to show
-   */
-  iconName: IconName;
+export type ButtonIconProps = ButtonIconPropsShared & {
   /**
    * Optional prop to pass additional properties to the icon
    */
   iconProps?: Partial<IconProps>;
-  /**
-   * Optional prop that when true, disables the button
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional prop to control the visual variant of the button.
-   *
-   * @default ButtonIconVariant.Default
-   */
-  variant?: ButtonIconVariant;
   /**
    * Optional prop to add twrnc overriding classNames.
    */

packages/design-system-react-native/src/components/ButtonIcon/index.ts

@@ -1,3 +1,6 @@
-export { ButtonIconSize, ButtonIconVariant } from '../../types';
+export {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 export { ButtonIcon } from './ButtonIcon';
 export type { ButtonIconProps } from './ButtonIcon.types';

packages/design-system-react-native/src/components/KeyValueColumn/KeyValueColumn.tsx

@@ -1,11 +1,12 @@
 import {
+  ButtonIconSize,
   FontWeight,
   TextColor,
   TextVariant,
 } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { ButtonIconSize, IconColor } from '../../types';
+import { IconColor } from '../../types';
 import { BoxColumn } from '../BoxColumn';
 import { BoxRow } from '../BoxRow';
 import { ButtonIcon } from '../ButtonIcon';

packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.tsx

@@ -1,4 +1,5 @@
 import {
+  ButtonIconSize,
   FontWeight,
   KeyValueRowVariant,
   TextColor,
@@ -7,7 +8,7 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React from 'react';
 
-import { ButtonIconSize, IconColor } from '../../types';
+import { IconColor } from '../../types';
 import { Box } from '../Box';
 import { BoxRow } from '../BoxRow';
 import { ButtonIcon } from '../ButtonIcon';

packages/design-system-react-native/src/types/index.ts

@@ -51,30 +51,3 @@ export enum ButtonVariant {
   Secondary = 'secondary',
   Tertiary = 'tertiary',
 }
-
-/**
- * ButtonIcon - size
- */
-export enum ButtonIconSize {
-  /**
-   * Represents a small button size (24px).
-   */
-  Sm = 'sm',
-  /**
-   * Represents a medium button size (32px).
-   */
-  Md = 'md',
-  /**
-   * Represents a large button size (40px).
-   */
-  Lg = 'lg',
-}
-
-/**
- * ButtonIcon - variant
- */
-export enum ButtonIconVariant {
-  Default = 'default',
-  Filled = 'filled',
-  Floating = 'floating',
-}

packages/design-system-react/src/components/BannerBase/BannerBase.tsx

@@ -2,12 +2,13 @@ import {
   BoxAlignItems,
   BoxBackgroundColor,
   BoxFlexDirection,
+  ButtonIconSize,
   FontWeight,
   TextVariant,
 } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { ButtonIconSize, ButtonSize, IconName } from '../../types';
+import { ButtonSize, IconName } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 import { Box } from '../Box';
 import { Button } from '../Button';

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.constants.ts

@@ -1,5 +1,4 @@
-import { ButtonIconSize } from '../../types';
-import { IconSize } from '../Icon';
+import { ButtonIconSize, IconSize } from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
   [ButtonIconSize.Sm]: 'h-6 w-6',

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.figma.tsx

@@ -1,10 +1,9 @@
 // import figma needs to remain as figma otherwise it breaks code connect
 // eslint-disable-next-line import-x/no-named-as-default
 import figma from '@figma/code-connect';
+import { IconName } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { IconName } from '../Icon';
-
 import { ButtonIcon } from './ButtonIcon';
 
 import { ButtonIconSize, ButtonIconVariant } from '.';

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.stories.tsx

@@ -1,9 +1,11 @@
+import {
+  ButtonIconSize,
+  IconName,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonIconSize, ButtonIconVariant } from '../../types';
-import { IconName } from '../Icon';
-
 import { ButtonIcon } from './ButtonIcon';
 import README from './README.mdx';
 

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.test.tsx

@@ -1,9 +1,12 @@
 import '@testing-library/jest-dom';
+import {
+  ButtonIconSize,
+  IconName,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonIconSize, ButtonIconVariant, IconName } from '../../types';
-
 import { ButtonIcon } from './ButtonIcon';
 
 describe('ButtonIcon', () => {

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.tsx

@@ -1,6 +1,9 @@
+import {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { ButtonIconSize, ButtonIconVariant } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 import { Icon } from '../Icon';
 

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.types.ts

@@ -1,46 +1,25 @@
+import type { ButtonIconPropsShared } from '@metamask/design-system-shared';
 import type { ComponentProps } from 'react';
 
-import type { ButtonIconSize, ButtonIconVariant } from '../../types';
-import type { IconName, IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
 
-export type ButtonIconProps = ComponentProps<'button'> & {
-  /**
-   * Required prop to specify the icon to show
-   */
-  iconName: IconName;
-  /**
-   * Required prop to provide an accessible label for the button
-   */
-  ariaLabel: string;
-  /**
-   * Optional prop to pass additional properties to the icon
-   */
-  iconProps?: Partial<IconProps>;
-  /**
-   * Optional prop that when true, disables the button
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional prop to control the visual variant of the button.
-   *
-   * @default ButtonIconVariant.Default
-   */
-  variant?: ButtonIconVariant;
-  /**
-   * Optional prop to control the size of the button
-   *
-   * @default ButtonIconSize.Md
-   */
-  size?: ButtonIconSize;
-  /**
-   * Optional prop for additional CSS classes to be applied to the ButtonIcon component
-   */
-  className?: string;
-  /**
-   * Optional CSS styles to be applied to the component.
-   * Should be used sparingly and only for dynamic styles that can't be achieved with className.
-   */
-  style?: React.CSSProperties;
-};
+export type ButtonIconProps = ComponentProps<'button'> &
+  ButtonIconPropsShared & {
+    /**
+     * Optional prop to pass additional properties to the icon
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Required prop to provide an accessible label for the button
+     */
+    ariaLabel: string;
+    /**
+     * Optional prop for additional CSS classes to be applied to the ButtonIcon component
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+  };

packages/design-system-react/src/components/ButtonIcon/index.ts

@@ -1,3 +1,6 @@
-export { ButtonIconSize, ButtonIconVariant } from '../../types';
+export {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '@metamask/design-system-shared';
 export { ButtonIcon } from './ButtonIcon';
 export type { ButtonIconProps } from './ButtonIcon.types';

packages/design-system-react/src/types/index.ts

@@ -61,33 +61,6 @@ export enum ButtonVariant {
   Tertiary = 'tertiary',
 }
 
-/**
- * ButtonIcon - size
- */
-export enum ButtonIconSize {
-  /**
-   * Represents a small button size (24px).
-   */
-  Sm = 'sm',
-  /**
-   * Represents a medium button size (32px).
-   */
-  Md = 'md',
-  /**
-   * Represents a large button size (40px).
-   */
-  Lg = 'lg',
-}
-
-/**
- * ButtonIcon - variant
- */
-export enum ButtonIconVariant {
-  Default = 'default',
-  Filled = 'filled',
-  Floating = 'floating',
-}
-
 /**
  * Text - textAlign
  */

packages/design-system-shared/src/index.ts

@@ -105,6 +105,12 @@ export {
   type BadgeWrapperCustomPosition,
   type BadgeWrapperPropsShared,
 } from './types/BadgeWrapper';
+// ButtonIcon types (ADR-0003 + ADR-0004)
+export {
+  ButtonIconSize,
+  ButtonIconVariant,
+  type ButtonIconPropsShared,
+} from './types/ButtonIcon';
 
 export {
   AvatarAccountSize,