feat: migrate BadgeIcon to ADR-0004 shared types (DSYS-479)

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

@@ -1,11 +1,13 @@
+import type { BadgeIconPropsShared } from '@metamask/design-system-shared';
 import type { ViewProps } from 'react-native';
 
 import type { IconName, IconProps } from '../Icon';
 
 /**
- * BadgeIcon component props.
+ * BadgeIcon component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native specific platform concerns
  */
-export type BadgeIconProps = {
+export type BadgeIconProps = Omit<BadgeIconPropsShared, 'iconName'> & {
   /**
    * Required prop to specify an icon to show
    */

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

@@ -1,27 +1,30 @@
+import type { BadgeIconPropsShared } from '@metamask/design-system-shared';
 import type { ComponentProps } from 'react';
 
 import type { IconName, IconProps } from '../Icon';
 
 /**
- * BadgeIcon component props.
+ * BadgeIcon component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
  */
-export type BadgeIconProps = ComponentProps<'div'> & {
-  /**
-   * Required prop to specify an icon to show
-   */
-  iconName: IconName;
-  /**
-   * Optional prop to pass additional properties to the icon
-   */
-  iconProps?: Omit<IconProps, 'name'>;
-  /**
-   * Optional prop for additional CSS classes to be applied to the BadgeIcon component.
-   * These classes will be merged with the component's default classes using twMerge.
-   */
-  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 BadgeIconProps = ComponentProps<'div'> &
+  Omit<BadgeIconPropsShared, 'iconName'> & {
+    /**
+     * Required prop to specify an icon to show
+     */
+    iconName: IconName;
+    /**
+     * Optional prop to pass additional properties to the icon
+     */
+    iconProps?: Omit<IconProps, 'name'>;
+    /**
+     * Optional prop for additional CSS classes to be applied to the BadgeIcon component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    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-shared/src/index.ts

@@ -25,6 +25,9 @@ export { type ButtonFilterPropsShared } from './types/ButtonFilter';
 // AvatarNetwork types (ADR-0004)
 export { type AvatarNetworkPropsShared } from './types/AvatarNetwork';
 
+// BadgeIcon types (ADR-0004)
+export { type BadgeIconPropsShared } from './types/BadgeIcon';
+
 // BannerAlert types (ADR-0003 + ADR-0004)
 export {
   BannerAlertSeverity,

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

@@ -0,0 +1,11 @@
+/**
+ * BadgeIcon component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type BadgeIconPropsShared = {
+  /**
+   * Required prop to specify an icon to show.
+   * Use the platform-specific `IconName` type to provide values.
+   */
+  iconName: string;
+};

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

@@ -0,0 +1 @@
+export { type BadgeIconPropsShared } from './BadgeIcon.types';