update AvatarNetwork TS

MetaMask · Jul 20, 2023 · 36f9718 · 36f9718
1 parent 724efad
commit 36f9718
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 70 deletions.
diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js
@@ -14,7 +14,6 @@ import {
   BackgroundColor,
   TextColor,
   IconColor,
-  Size,
 } from '../../../helpers/constants/design-system';
 import Button from '../../ui/button';
 import Tooltip from '../../ui/tooltip';
@@ -40,6 +39,7 @@ import {
   IconName,
   IconSize,
   AvatarNetwork,
+  AvatarNetworkSize,
   Text,
 } from '../../component-library';
 import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics';
@@ -199,7 +199,7 @@ const AddNetwork = () => {
               >
                 <Box display={Display.Flex} alignItems={AlignItems.center}>
                   <AvatarNetwork
-                    size={Size.SM}
+                    size={AvatarNetworkSize.Sm}
                     src={item.rpcPrefs?.imageUrl}
                     name={item.nickname}
                   />

diff --git a/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js b/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js
@@ -18,14 +18,14 @@ import TransactionListItemDetails from '../transaction-list-item-details';
 import { ActivityListItem } from '../../multichain';
 import {
   AvatarNetwork,
+  AvatarNetworkSize,
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
   Box,
 } from '../../component-library';
 import {
   BackgroundColor,
   Display,
-  Size,
 } from '../../../helpers/constants/design-system';
 import { getCurrentNetwork } from '../../../selectors';
 
@@ -77,7 +77,7 @@ export default function SmartTransactionListItem({
               <AvatarNetwork
                 className="activity-tx__network-badge"
                 data-testid="activity-tx-network-badge"
-                size={Size.XS}
+                size={AvatarNetworkSize.Xs}
                 name={currentChain?.nickname}
                 src={currentChain?.rpcPrefs?.imageUrl}
                 borderWidth={1}

diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -18,12 +18,12 @@ import {
   Color,
   Display,
   FontWeight,
-  Size,
   TextAlign,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
+  AvatarNetworkSize,
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
   Box,
@@ -273,7 +273,7 @@ function TransactionListItemInner({
                 <AvatarNetwork
                   className="activity-tx__network-badge"
                   data-testid="activity-tx-network-badge"
-                  size={Size.XS}
+                  size={AvatarNetworkSize.Xs}
                   name={currentChain?.nickname}
                   src={currentChain?.rpcPrefs?.imageUrl}
                   borderWidth={1}

diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx
@@ -15,7 +15,7 @@ import {
 
 import type { PolymorphicRef } from '../box';
 import { Text } from '../text';
-
+import type { TextProps } from '../text';
 import {
   AvatarBaseComponent,
   AvatarBaseProps,
@@ -60,7 +60,7 @@ export const AvatarBase: AvatarBaseComponent = React.forwardRef(
         variant={fallbackTextVariant}
         textTransform={TextTransform.Uppercase}
         {...{ backgroundColor, borderColor, color }}
-        {...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
+        {...(props as TextProps<C>)}
       >
         {children}
       </Text>

diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts
@@ -14,7 +14,7 @@ export enum AvatarBaseSize {
   Xl = 'xl',
 }
 
-export interface Props extends TextStyleUtilityProps {
+export interface AvatarBaseStyleUtilityProps extends TextStyleUtilityProps {
   /**
    * The size of the AvatarBase.
    * Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
@@ -48,7 +48,7 @@ export interface Props extends TextStyleUtilityProps {
 }
 
 export type AvatarBaseProps<C extends React.ElementType> =
-  PolymorphicComponentPropWithRef<C, Props>;
+  PolymorphicComponentPropWithRef<C, AvatarBaseStyleUtilityProps>;
 
 export type AvatarBaseComponent = <C extends React.ElementType = 'span'>(
   props: AvatarBaseProps<C>,

diff --git a/ui/components/component-library/avatar-network/README.mdx b/ui/components/component-library/avatar-network/README.mdx
@@ -37,13 +37,13 @@ The fallback display of the `AvatarNetwork` is a circle with the initial letter
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { AvatarNetwork } from '../../component-library';
-<AvatarNetwork size={Size.XS} />
-<AvatarNetwork size={Size.SM} />
-<AvatarNetwork size={Size.MD} />
-<AvatarNetwork size={Size.LG} />
-<AvatarNetwork size={Size.XL} />
+import { AvatarNetwork, AvatarNetworkSize } from '../../component-library';
+
+<AvatarNetwork size={AvatarNetworkSize.Xs} />
+<AvatarNetwork size={AvatarNetworkSize.Sm} />
+<AvatarNetwork size={AvatarNetworkSize.Md} />
+<AvatarNetwork size={AvatarNetworkSize.Lg} />
+<AvatarNetwork size={AvatarNetworkSize.Xl} />
 ```
 
 ### Name

diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
@@ -6,7 +6,11 @@ exports[`AvatarNetwork should render correctly 1`] = `
     class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-network"
   >
-    ?
+    <img
+      alt="ethereum logo"
+      class="mm-avatar-network__network-image"
+      src="./images/eth_logo.png"
+    />
   </div>
 </div>
 `;
diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Ref } from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import {
   Display,
@@ -8,12 +8,12 @@ import {
   BackgroundColor,
   BorderColor,
 } from '../../../helpers/constants/design-system';
-import { AvatarBase } from '../avatar-base';
-
+import type { PolymorphicRef } from '../box';
+import { AvatarBase, AvatarBaseProps } from '../avatar-base';
 import { AvatarNetworkProps, AvatarNetworkSize } from './avatar-network.types';
 
 export const AvatarNetwork = React.forwardRef(
-  (
+  <C extends React.ElementType = 'div'>(
     {
       size = AvatarNetworkSize.Md,
       name,
@@ -24,8 +24,8 @@ export const AvatarNetwork = React.forwardRef(
       borderColor = BorderColor.transparent,
       className = '',
       ...props
-    }: AvatarNetworkProps,
-    ref: Ref<HTMLElement>,
+    }: AvatarNetworkProps<C>,
+    ref?: PolymorphicRef<C>,
   ) => {
     const [showFallback, setShowFallback] = useState(false);
 
@@ -51,7 +51,12 @@ export const AvatarNetwork = React.forwardRef(
           showHalo ? 'mm-avatar-network--with-halo' : '',
           className,
         )}
-        {...{ backgroundColor, borderColor, color, ...props }}
+        {...{
+          backgroundColor,
+          borderColor,
+          color,
+          ...(props as AvatarBaseProps<C>),
+        }}
       >
         {showFallback ? (
           fallbackString

diff --git a/ui/components/component-library/avatar-network/avatar-network.types.ts b/ui/components/component-library/avatar-network/avatar-network.types.ts
@@ -1,17 +1,20 @@
-import { AvatarBaseProps } from '../avatar-base/avatar-base.types';
+import type { PolymorphicComponentPropWithRef } from '../box';
+import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
+import { AvatarBaseSize } from '../avatar-base/avatar-base.types';
 
 export enum AvatarNetworkSize {
-  Xs = 'xs',
-  Sm = 'sm',
-  Md = 'md',
-  Lg = 'lg',
-  Xl = 'xl',
+  Xs = AvatarBaseSize.Xs,
+  Sm = AvatarBaseSize.Sm,
+  Md = AvatarBaseSize.Md,
+  Lg = AvatarBaseSize.Lg,
+  Xl = AvatarBaseSize.Xl,
 }
 
 /**
  * Props for the AvatarNetwork component
  */
-export interface AvatarNetworkProps extends Omit<AvatarBaseProps, 'children'> {
+export interface AvatarNetworkStyleUtilityProps
+  extends Omit<AvatarBaseStyleUtilityProps, 'size'> {
   /**
    * The name accepts the string to render the first alphabet of the Avatar Name
    */
@@ -31,3 +34,10 @@ export interface AvatarNetworkProps extends Omit<AvatarBaseProps, 'children'> {
    */
   size?: AvatarNetworkSize;
 }
+
+export type AvatarNetworkProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, AvatarNetworkStyleUtilityProps>;
+
+export type AvatarNetworkComponent = <C extends React.ElementType = 'span'>(
+  props: AvatarNetworkProps<C>,
+) => React.ReactElement | null;
diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.js
@@ -12,6 +12,7 @@ import Box from '../../ui/box/box';
 
 import {
   AvatarNetwork,
+  AvatarNetworkSize,
   BUTTON_LINK_SIZES,
   BadgeWrapper,
   ButtonLink,
@@ -128,7 +129,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             src="./images/eth_logo.png"
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -141,7 +142,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             src="./images/eth_logo.png"
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -154,7 +155,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             src="./images/eth_logo.png"
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -167,7 +168,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             src="./images/eth_logo.png"
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -180,7 +181,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             src="./images/eth_logo.png"
             name="ETH"
-            size={Size.SM}
+            size={AvatarNetworkSize.Sm}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -194,7 +195,7 @@ export const SizeStory = (args) => (
         badge={
           <AvatarNetwork
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -213,7 +214,7 @@ export const SizeStory = (args) => (
         badge={
           <AvatarNetwork
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -232,7 +233,7 @@ export const SizeStory = (args) => (
         badge={
           <AvatarNetwork
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -251,7 +252,7 @@ export const SizeStory = (args) => (
         badge={
           <AvatarNetwork
             name="ETH"
-            size={Size.XS}
+            size={AvatarNetworkSize.Xs}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />
@@ -270,7 +271,7 @@ export const SizeStory = (args) => (
         badge={
           <AvatarNetwork
             name="ETH"
-            size={Size.SM}
+            size={AvatarNetworkSize.Sm}
             borderColor={BackgroundColor.backgroundDefault}
             borderWidth={2}
           />