Migrate AvatarIcon

fixing lint fixing size issue IconProps extends BaseProps instead of BoxProps Omit children from IconProps fixing lint issues mapping avatarIconSize to Iconsize replace deprecated
MetaMask · Jul 26, 2023 · 89696c3 · 89696c3
1 parent 265a209
commit 89696c3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 40 deletions.
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.tsx b/ui/components/component-library/avatar-icon/avatar-icon.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
   Size,
   AlignItems,
@@ -86,9 +86,9 @@ export default {
   args: {
     size: AvatarIconSize.Md,
   },
-} as ComponentMeta<typeof AvatarIcon>;
+} as Meta<typeof AvatarIcon>;
 
-const Template: ComponentStory<typeof AvatarIcon> = (args) => {
+const Template: StoryFn<typeof AvatarIcon> = (args) => {
   return <AvatarIcon {...args} iconName={IconName.SwapHorizontal} />;
 };
 

diff --git a/ui/components/component-library/avatar-icon/avatar-icon.tsx b/ui/components/component-library/avatar-icon/avatar-icon.tsx
@@ -2,23 +2,27 @@ import React, { Ref } from 'react';
 import classnames from 'classnames';
 import {
   BorderColor,
-  DISPLAY,
+  Display,
   AlignItems,
   JustifyContent,
   BackgroundColor,
   IconColor,
   TextColor,
 } from '../../../helpers/constants/design-system';
 
-import { Icon, IconSize } from '../icon';
-import { AvatarBase, AvatarBaseSize } from '../avatar-base';
+import { Icon } from '../icon';
+import { AvatarBase } from '../avatar-base';
 
-import { AvatarIconProps } from './avatar-icon.types';
+import {
+  AvatarIconProps,
+  AvatarIconSize,
+  avatarIconSizeToIconSize,
+} from './avatar-icon.types';
 
 export const AvatarIcon = React.forwardRef(
   (
     {
-      size = AvatarBaseSize.Md,
+      size = AvatarIconSize.Md,
       color = TextColor.primaryDefault,
       backgroundColor = BackgroundColor.primaryMuted,
       className = '',
@@ -28,11 +32,12 @@ export const AvatarIcon = React.forwardRef(
     }: AvatarIconProps,
     ref: Ref<HTMLElement>,
   ) => {
+    const iconSize = avatarIconSizeToIconSize[size];
     return (
       <AvatarBase
         ref={ref}
         size={size}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
         color={color as TextColor}
@@ -44,7 +49,7 @@ export const AvatarIcon = React.forwardRef(
         <Icon
           color={IconColor.inherit}
           name={iconName}
-          size={IconSize[size as unknown as keyof typeof IconSize]}
+          size={iconSize}
           {...iconProps}
         />
       </AvatarBase>

diff --git a/ui/components/component-library/avatar-icon/avatar-icon.types.ts b/ui/components/component-library/avatar-icon/avatar-icon.types.ts
@@ -1,13 +1,6 @@
-import {
-  BackgroundColor,
-  BorderColor,
-  IconColor,
-  TextColor,
-} from '../../../helpers/constants/design-system';
-import { IconName, IconProps } from '../icon';
-import { AvatarBaseSize } from '../avatar-base/avatar-base.types';
-import { ValidTag } from '../text/text.types';
-import type { BoxProps } from '../../ui/box/box.d';
+import { IconColor, TextColor } from '../../../helpers/constants/design-system';
+import { IconName, IconProps, IconSize } from '../icon';
+import { AvatarBaseProps } from '../avatar-base/avatar-base.types';
 
 export enum AvatarIconSize {
   Xs = 'xs',
@@ -17,7 +10,16 @@ export enum AvatarIconSize {
   Xl = 'xl',
 }
 
-export interface AvatarIconProps extends BoxProps {
+export const avatarIconSizeToIconSize: Record<AvatarIconSize, IconSize> = {
+  [AvatarIconSize.Xs]: IconSize.Xs,
+  [AvatarIconSize.Sm]: IconSize.Sm,
+  [AvatarIconSize.Md]: IconSize.Md,
+  [AvatarIconSize.Lg]: IconSize.Lg,
+  [AvatarIconSize.Xl]: IconSize.Xl,
+};
+
+export interface AvatarIconProps
+  extends Omit<AvatarBaseProps, 'color' | 'children'> {
   /**
    * The name of the icon to display. Should be one of IconName
    */
@@ -33,28 +35,10 @@ export interface AvatarIconProps extends BoxProps {
    * Possible values could be 'AvatarIconSize.Xs' 16px, 'AvatarIconSize.Sm' 24px, 'AvatarIconSize.Md' 32px, 'AvatarIconSize.Lg' 40px, 'AvatarIconSize.Xl' 48px
    * Defaults to AvatarIconSize.Md
    */
-  size?: AvatarIconSize | AvatarBaseSize;
-  /**
-   * The background color of the AvatarIcon
-   * Defaults to BackgroundColor.primaryMuted
-   */
-  backgroundColor?: BackgroundColor;
+  size?: AvatarIconSize;
   /**
    * The color of the text inside the AvatarIcon
    * Defaults to TextColor.primaryDefault
    */
   color?: TextColor | IconColor;
-  /**
-   * Additional classNames to be added to the AvatarIcon
-   */
-  className?: string;
-  /**
-   * The background color of the AvatarBase
-   * Defaults to Color.borderDefault
-   */
-  borderColor?: BorderColor;
-  /**
-   * Changes the root html element tag of the Text component.
-   */
-  as?: ValidTag;
 }