feat(DSYS-476): Migrate AvatarIcon to ADR-0003 and ADR-0004

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

@@ -1,4 +1,8 @@
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
+
 import { IconSize, IconColor } from '../Icon';
 
 // Mappings

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

@@ -1,7 +1,10 @@
+import {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
 import { IconName } from '../Icon';
 
 import { AvatarIcon } from './AvatarIcon';

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

@@ -1,9 +1,12 @@
+import {
+  AvatarIconSeverity,
+  AvatarIconSize,
+} from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { AvatarIconSeverity, AvatarIconSize } from '../../types';
 import { IconName } from '../Icon';
 import { TWCLASSMAP_ICON_SIZE_DIMENSION } from '../Icon/Icon.constants';
 

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

@@ -1,11 +1,11 @@
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import React from 'react';
-
 import {
   AvatarIconSize,
-  AvatarBaseShape,
   AvatarIconSeverity,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import React from 'react';
+
+import { AvatarBaseShape } from '../../types';
 import { AvatarBase } from '../AvatarBase';
 import { Icon } from '../Icon';
 

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

@@ -1,23 +1,24 @@
-import type { AvatarIconSeverity } from '../../types';
+import type { AvatarIconPropsShared } from '@metamask/design-system-shared';
+
 import type { AvatarBaseProps } from '../AvatarBase';
 import type { IconName, IconProps } from '../Icon';
 
 /**
- * AvatarIcon component props.
+ * AvatarIcon component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native-specific platform concerns
  */
-export type AvatarIconProps = {
-  /**
-   * Optional prop to control the severity of the avatar
-   *
-   * @default AvatarIconSeverity.Neutral
-   */
-  severity?: AvatarIconSeverity;
-  /**
-   * Optional prop to specify an icon to show
-   */
-  iconName: IconName;
-  /**
-   * Optional prop to pass additional properties to the icon
-   */
-  iconProps?: Omit<IconProps, 'name'>;
-} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;
+export type AvatarIconProps = AvatarIconPropsShared &
+  Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'> & {
+    /**
+     * Required icon name from the icon set - narrowed to platform-specific IconName
+     */
+    iconName: IconName;
+    /**
+     * Optional prop to pass additional properties to the icon
+     */
+    iconProps?: Omit<IconProps, 'name'>;
+    /**
+     * Optional Tailwind class name for styling
+     */
+    twClassName?: string;
+  };

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

@@ -1,3 +1,6 @@
-export { AvatarIconSize, AvatarIconSeverity } from '../../types';
+export {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 export { AvatarIcon } from './AvatarIcon';
 export type { AvatarIconProps } from './AvatarIcon.types';

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

@@ -3,7 +3,10 @@ export {
   AvatarBaseShape,
 } from '@metamask/design-system-shared';
 export { AvatarBaseSize as AvatarGroupSize } from '@metamask/design-system-shared';
-export { AvatarBaseSize as AvatarIconSize } from '@metamask/design-system-shared';
+export {
+  AvatarBaseSize as AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 export { AvatarBaseSize as AvatarNetworkSize } from '@metamask/design-system-shared';
 export { AvatarBaseSize as AvatarSize } from '@metamask/design-system-shared';
 
@@ -17,18 +20,6 @@ export enum AvatarGroupVariant {
   Token = 'token',
 }
 
-/**
- * AvatarIcon - severity
- */
-export enum AvatarIconSeverity {
-  Neutral = 'neutral',
-  Info = 'info',
-  Success = 'success',
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  Error = 'error',
-  Warning = 'warning',
-}
-
 /**
  * Box - all spacing-related props
  */

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

@@ -1,4 +1,8 @@
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
+
 import { IconSize, IconColor } from '../Icon';
 
 export const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {

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

@@ -1,7 +1,10 @@
+import {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
 import { IconName } from '../Icon';
 
 import { AvatarIcon } from './AvatarIcon';
@@ -111,7 +114,7 @@
 
 export const HasBorder: Story = {
   render: () => (
-    <div className="flex gap-2 bg-primary-muted p-2">
+    <div className="bg-primary-muted flex gap-2 p-2">
       <AvatarIcon
         iconName={IconName.User}
         severity={AvatarIconSeverity.Neutral}

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

@@ -1,7 +1,10 @@
+import {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React, { createRef } from 'react';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
 import { IconName } from '../Icon';
 import { TWCLASSMAP_ICON_SIZE_DIMENSION } from '../Icon/Icon.constants';
 

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

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

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

@@ -1,26 +1,27 @@
-import type { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import type { AvatarIconPropsShared } from '@metamask/design-system-shared';
+
 import type { AvatarBaseProps } from '../AvatarBase';
 import type { IconName, IconProps } from '../Icon';
 
-export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & {
-  /**
-   * Required icon name from the icon set
-   */
-  iconName: IconName;
-  /**
-   * Optional props to be passed to the Icon component
-   */
-  iconProps?: Omit<IconProps, 'name'>;
-  /**
-   * Optional prop to control the size of the avatar
-   *
-   * @default AvatarIconSize.Md
-   */
-  size?: AvatarIconSize;
-  /**
-   * Optional prop to control the severity of the avatar
-   *
-   * @default AvatarIconSeverity.Neutral
-   */
-  severity?: AvatarIconSeverity;
-};
+/**
+ * AvatarIcon component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
+ */
+export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> &
+  Omit<AvatarIconPropsShared, 'iconName'> & {
+    /**
+     * Required icon name from the icon set
+     */
+    iconName: IconName;
+    /**
+     * Optional props to be passed to the Icon component
+     */
+    iconProps?: Omit<IconProps, 'name'>;
+    /**
+     * Optional prop to control the size of the avatar
+     *
+     * @default AvatarIconSize.Md
+     */
+    size?: AvatarIconPropsShared['size'];
+    className?: string;
+  };

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

@@ -1,3 +1,6 @@
-export { AvatarIconSize, AvatarIconSeverity } from '../../types';
+export {
+  AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 export { AvatarIcon } from './AvatarIcon';
 export type { AvatarIconProps } from './AvatarIcon.types';

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

@@ -3,22 +3,13 @@ export {
   AvatarBaseShape,
 } from '@metamask/design-system-shared';
 export { AvatarBaseSize as AvatarGroupSize } from '@metamask/design-system-shared';
-export { AvatarBaseSize as AvatarIconSize } from '@metamask/design-system-shared';
+export {
+  AvatarBaseSize as AvatarIconSize,
+  AvatarIconSeverity,
+} from '@metamask/design-system-shared';
 export { AvatarBaseSize as AvatarNetworkSize } from '@metamask/design-system-shared';
 export { AvatarBaseSize as AvatarSize } from '@metamask/design-system-shared';
 
-/**
- * AvatarIcon - severity
- */
-export enum AvatarIconSeverity {
-  Neutral = 'neutral',
-  Info = 'info',
-  Success = 'success',
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  Error = 'error',
-  Warning = 'warning',
-}
-
 /**
  * AvatarGroup - variant
  */

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

@@ -110,3 +110,10 @@ export {
   AvatarFaviconSize,
   type AvatarFaviconPropsShared,
 } from './types/AvatarFavicon';
+
+// AvatarIcon types (ADR-0003 + ADR-0004)
+export {
+  AvatarIconSize,
+  AvatarIconSeverity,
+  type AvatarIconPropsShared,
+} from './types/AvatarIcon';

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

@@ -0,0 +1,57 @@
+import { AvatarBaseSize } from '../AvatarBase/AvatarBase.types';
+
+export const AvatarIconSize = AvatarBaseSize;
+export type AvatarIconSize = AvatarBaseSize;
+
+/**
+ * AvatarIcon - severity
+ * Convert from enum to const object (ADR-0003)
+ */
+export const AvatarIconSeverity = {
+  /**
+   * Represents neutral severity
+   */
+  Neutral: 'neutral',
+  /**
+   * Represents info severity
+   */
+  Info: 'info',
+  /**
+   * Represents success severity
+   */
+  Success: 'success',
+  /**
+   * Represents error severity
+   */
+  Error: 'error',
+  /**
+   * Represents warning severity
+   */
+  Warning: 'warning',
+} as const;
+export type AvatarIconSeverity =
+  (typeof AvatarIconSeverity)[keyof typeof AvatarIconSeverity];
+
+/**
+ * AvatarIcon component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native.
+ */
+export type AvatarIconPropsShared = {
+  /**
+   * Required icon name from the icon set.
+   * Typed as string to allow each platform to use its specific IconName type.
+   */
+  iconName: string;
+  /**
+   * Optional prop to control the size of the avatar icon.
+   *
+   * @default AvatarIconSize.Md
+   */
+  size?: AvatarIconSize;
+  /**
+   * Optional prop to control the severity of the avatar icon.
+   *
+   * @default AvatarIconSeverity.Neutral
+   */
+  severity?: AvatarIconSeverity;
+};

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

@@ -0,0 +1,5 @@
+export {
+  AvatarIconSize,
+  AvatarIconSeverity,
+  type AvatarIconPropsShared,
+} from './AvatarIcon.types';