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

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

@@ -1,10 +1,10 @@
+import { ButtonIconSize } from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
 import {
   BoxAlignItems,
   BoxBackgroundColor,
-  ButtonIconSize,
   ButtonSize,
   FontWeight,
   BoxFlexDirection,

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

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

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

@@ -1,7 +1,10 @@
+import {
+  ButtonIconSize,
+  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';

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

@@ -1,9 +1,12 @@
+import {
+  ButtonIconSize,
+  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';

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

@@ -1,8 +1,11 @@
+import {
+  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,20 +1,13 @@
+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 { IconName, 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;
+export type ButtonIconProps = Omit<ButtonIconPropsShared, 'iconName'> & {
   /**
    * Optional prop to specify an icon to show
    */
@@ -23,18 +16,6 @@ export type ButtonIconProps = {
    * 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/types/index.ts

@@ -255,33 +255,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 - variant
  */

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

@@ -1,9 +1,9 @@
+import { ButtonIconSize } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
 import {
   BoxAlignItems,
   BoxBackgroundColor,
-  ButtonIconSize,
   ButtonSize,
   FontWeight,
   BoxFlexDirection,

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

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

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

@@ -1,7 +1,10 @@
+import {
+  ButtonIconSize,
+  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';

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

@@ -1,8 +1,12 @@
 import '@testing-library/jest-dom';
+import {
+  ButtonIconSize,
+  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 { IconName } from '../../types';
 
 import { ButtonIcon } from './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,29 @@
+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';
 
-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'> &
+  Omit<ButtonIconPropsShared, 'iconName'> & {
+    /**
+     * Required prop to specify the icon to show
+     */
+    iconName: IconName;
+    /**
+     * 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

@@ -264,33 +264,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 - variant
  */

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

@@ -56,3 +56,10 @@ export {
   type BadgeWrapperCustomPosition,
   type BadgeWrapperPropsShared,
 } from './types/BadgeWrapper';
+
+// ButtonIcon types (ADR-0003 + ADR-0004)
+export {
+  ButtonIconSize,
+  ButtonIconVariant,
+  type ButtonIconPropsShared,
+} from './types/ButtonIcon';

packages/design-system-shared/src/types/ButtonIcon/ButtonIcon.types.ts

@@ -0,0 +1,70 @@
+/**
+ * ButtonIcon - size
+ * Convert from enum to const object (ADR-0003)
+ */
+export const 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',
+} as const;
+export type ButtonIconSize =
+  (typeof ButtonIconSize)[keyof typeof ButtonIconSize];
+
+/**
+ * ButtonIcon - variant
+ * Convert from enum to const object (ADR-0003)
+ */
+export const ButtonIconVariant = {
+  /**
+   * Represents the default button icon variant (transparent background).
+   */
+  Default: 'default',
+  /**
+   * Represents a filled button icon variant (muted background).
+   */
+  Filled: 'filled',
+  /**
+   * Represents a floating button icon variant (icon-default background, full circle).
+   */
+  Floating: 'floating',
+} as const;
+export type ButtonIconVariant =
+  (typeof ButtonIconVariant)[keyof typeof ButtonIconVariant];
+
+/**
+ * ButtonIcon component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type ButtonIconPropsShared = {
+  /**
+   * Required prop to specify the icon to show
+   */
+  iconName: string;
+  /**
+   * Optional prop to control the size of the button
+   *
+   * @default ButtonIconSize.Md
+   */
+  size?: ButtonIconSize;
+  /**
+   * 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;
+};

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

@@ -0,0 +1,5 @@
+export {
+  ButtonIconSize,
+  ButtonIconVariant,
+  type ButtonIconPropsShared,
+} from './ButtonIcon.types';