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

[cursor]

Description

Migrates the AvatarIcon component to follow ADR-0003 (String Unions) and ADR-0004 (Centralized Types Architecture).

Changes:

• Converts AvatarIconSeverity from a duplicated enum in both platform packages to a shared const object in @metamask/design-system-shared
• Adds AvatarIconSize alias (of AvatarBaseSize) to the shared package
• Creates AvatarIconPropsShared (ADR-0004) with iconName: string, size?, and severity?
• Updates both React and React Native platform packages to:
  • Import AvatarIconSeverity and AvatarIconSize from @metamask/design-system-shared
  • Extend AvatarIconPropsShared with platform-specific props (iconProps, className, twClassName)
  • Narrow iconName from string to platform-specific IconName type
• Removes AvatarIconSeverity enum from both platform types/index.ts, adds re-export from shared for backwards compatibility
• Updates all component files (.tsx, .constants.ts, .test.tsx, .stories.tsx) in both platforms to import from @metamask/design-system-shared

No breaking changes — all public exports remain available at the same import paths.

Related issues

Fixes: DSYS-476

Manual testing steps

1. Run yarn build — all packages should build successfully
2. Run yarn test — all tests should pass with 100% coverage
3. Verify AvatarIcon component renders correctly in Storybook with all severity/size combinations

Screenshots/Recordings

Before

// packages/design-system-react/src/types/index.ts
export enum AvatarIconSeverity {
  Neutral = 'neutral',
  Info = 'info',
  Success = 'success',
  Error = 'error',
  Warning = 'warning',
}
// (duplicated identically in React Native types/index.ts)

After

// packages/design-system-shared/src/types/AvatarIcon/AvatarIcon.types.ts
export const AvatarIconSeverity = {
  Neutral: 'neutral',
  Info: 'info',
  Success: 'success',
  Error: 'error',
  Warning: 'warning',
} as const;
export type AvatarIconSeverity = (typeof AvatarIconSeverity)[keyof typeof AvatarIconSeverity];

export type AvatarIconPropsShared = {
  iconName: string;
  size?: AvatarIconSize;
  severity?: AvatarIconSeverity;
};

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

  

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

Duplicate