Migrate AvatarToken

fix lint fixing error replace BoxTextAlign with TextAlign using AvatarTokenSize fix avatar-base-type Added union AvatarTokenSize TokenProps extends BaseProps remove children prop from BaseProps replace deprecated lint fix
MetaMask · Jul 24, 2023 · b0468e8 · b0468e8
1 parent d468e2f
commit b0468e8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 51 deletions.
diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.tsx b/ui/components/component-library/avatar-token/avatar-token.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  DISPLAY,
+  Display,
   AlignItems,
   TextColor,
   BackgroundColor,
@@ -65,19 +65,19 @@ export default {
     size: AvatarTokenSize.Md,
     showHalo: false,
   },
-} as ComponentMeta<typeof AvatarToken>;
+} as Meta<typeof AvatarToken>;
 
-const Template: ComponentStory<typeof AvatarToken> = (args) => {
+const Template: StoryFn<typeof AvatarToken> = (args) => {
   return <AvatarToken {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory: ComponentStory<typeof AvatarToken> = (args) => (
+export const SizeStory: StoryFn<typeof AvatarToken> = (args) => (
   <>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.baseline}
       gap={2}
       marginBottom={4}
@@ -89,7 +89,7 @@ export const SizeStory: ComponentStory<typeof AvatarToken> = (args) => (
       <AvatarToken {...args} size={AvatarTokenSize.Xl} />
     </Box>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={2}
       marginBottom={4}
@@ -118,7 +118,7 @@ export const SizeStory: ComponentStory<typeof AvatarToken> = (args) => (
       components
     </Text>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={2}
       marginBottom={4}
@@ -189,7 +189,7 @@ export const SizeStory: ComponentStory<typeof AvatarToken> = (args) => (
         <AvatarToken {...args} name="ETH" size={AvatarTokenSize.Xl} />
       </BadgeWrapper>
     </Box>
-    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={2}>
+    <Box display={Display.Flex} alignItems={AlignItems.flexEnd} gap={2}>
       <BadgeWrapper
         badge={
           <AvatarNetwork
@@ -295,8 +295,8 @@ Name.args = {
   src: '',
 };
 
-export const Src: ComponentStory<typeof AvatarToken> = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const Src: StoryFn<typeof AvatarToken> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarToken {...args} src="./images/eth_logo.png" />
     <AvatarToken {...args} src="./images/arbitrum.svg" />
     <AvatarToken {...args} src="./images/bnb.png" />
@@ -324,10 +324,10 @@ ShowHalo.args = {
   showHalo: true,
 };
 
-export const ColorBackgroundColorAndBorderColor: ComponentStory<
-  typeof AvatarToken
-> = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const ColorBackgroundColorAndBorderColor: StoryFn<typeof AvatarToken> = (
+  args,
+) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarToken
       {...args}
       backgroundColor={BackgroundColor.goerli}

diff --git a/ui/components/component-library/avatar-token/avatar-token.tsx b/ui/components/component-library/avatar-token/avatar-token.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, Ref } from 'react';
 import classnames from 'classnames';
-import { AvatarBase, AvatarBaseSize } from '../avatar-base';
+import { AvatarBase } from '../avatar-base';
 import {
-  DISPLAY,
+  Display,
   AlignItems,
   JustifyContent,
   TextColor,
@@ -41,8 +41,8 @@ export const AvatarToken = React.forwardRef(
     return (
       <AvatarBase
         ref={ref}
-        size={size as unknown as AvatarBaseSize}
-        display={DISPLAY.FLEX}
+        size={size}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
         className={classnames(

diff --git a/ui/components/component-library/avatar-token/avatar-token.types.ts b/ui/components/component-library/avatar-token/avatar-token.types.ts
@@ -1,10 +1,4 @@
-import { ValidTag } from '../text';
-import type { BoxProps } from '../../ui/box/box.d';
-import {
-  BackgroundColor,
-  BorderColor,
-  TextColor,
-} from 'ui/helpers/constants/design-system';
+import { AvatarBaseProps } from '../avatar-base';
 
 export enum AvatarTokenSize {
   Xs = 'xs',
@@ -17,7 +11,7 @@ export enum AvatarTokenSize {
 /**
  * Props for the AvatarToken component
  */
-export interface AvatarTokenProps extends BoxProps {
+export interface AvatarTokenProps extends Omit<AvatarBaseProps, 'children'> {
   /**
    * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src
    */
@@ -36,27 +30,4 @@ export interface AvatarTokenProps extends BoxProps {
    * Defaults to AvatarTokenSize.Md
    */
   size?: AvatarTokenSize;
-  /**
-   * The background color of the AvatarToken
-   * Defaults to Color.backgroundAlternative
-   */
-  backgroundColor?: BackgroundColor;
-  /**
-   * The background color of the AvatarToken
-   * Defaults to Color.borderDefault
-   */
-  borderColor?: BorderColor;
-  /**
-   * The color of the text inside the AvatarToken
-   * Defaults to Color.textDefault
-   */
-  color?: TextColor;
-  /**
-   * Additional classNames to be added to the AvatarToken
-   */
-  className?: string;
-  /**
-   * Changes the root html element tag of the Text component.
-   */
-  as?: ValidTag;
 }
diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts
@@ -407,4 +407,4 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
  * {@link https://github.com/MetaMask/metamask-extension/issues/19526}
  */
 declare const Box: React.FC<BoxProps>;
-export default Box;
+export default Box;