Updating Avatar components to forward refs (#18678)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
MetaMask · Apr 21, 2023 · d2779c9 · d2779c9
1 parent 7617a44
commit d2779c9
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 145 deletions.
diff --git a/ui/components/component-library/avatar-account/avatar-account.js b/ui/components/component-library/avatar-account/avatar-account.js
@@ -13,32 +13,38 @@ import {
   AvatarAccountSize,
 } from './avatar-account.types';
 
-export const AvatarAccount = ({
-  size = AvatarAccountSize.Md,
-  address,
-  className,
-  variant = AvatarAccountVariant.Jazzicon,
-  ...props
-}) => (
-  <AvatarBase
-    size={size}
-    className={classnames('mm-avatar-account', className)}
-    {...props}
-  >
-    {variant === AvatarAccountVariant.Jazzicon ? (
-      <Jazzicon
-        className={classnames('mm-avatar-account__jazzicon')}
-        address={address}
-        diameter={AvatarAccountDiameter[size]}
-      />
-    ) : (
-      <BlockieIdenticon
-        address={address}
-        diameter={AvatarAccountDiameter[size]}
-        borderRadius="50%"
-      />
-    )}
-  </AvatarBase>
+export const AvatarAccount = React.forwardRef(
+  (
+    {
+      size = AvatarAccountSize.Md,
+      address,
+      className,
+      variant = AvatarAccountVariant.Jazzicon,
+      ...props
+    },
+    ref,
+  ) => (
+    <AvatarBase
+      ref={ref}
+      size={size}
+      className={classnames('mm-avatar-account', className)}
+      {...props}
+    >
+      {variant === AvatarAccountVariant.Jazzicon ? (
+        <Jazzicon
+          className={classnames('mm-avatar-account__jazzicon')}
+          address={address}
+          diameter={AvatarAccountDiameter[size]}
+        />
+      ) : (
+        <BlockieIdenticon
+          address={address}
+          diameter={AvatarAccountDiameter[size]}
+          borderRadius="50%"
+        />
+      )}
+    </AvatarBase>
+  ),
 );
 
 AvatarAccount.propTypes = {
@@ -66,3 +72,5 @@ AvatarAccount.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarAccount.displayName = 'AvatarAccount';
diff --git a/ui/components/component-library/avatar-account/avatar-account.test.js b/ui/components/component-library/avatar-account/avatar-account.test.js
@@ -112,4 +112,15 @@ describe('AvatarAccount', () => {
       'mm-avatar-base--size-xl',
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(
+      <AvatarAccount
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        ref={ref}
+      />,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-base/avatar-base.test.js b/ui/components/component-library/avatar-base/avatar-base.test.js
@@ -121,4 +121,10 @@ describe('AvatarBase', () => {
       `box--border-color-${Color.errorDefault}`,
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarBase ref={ref}>A</AvatarBase>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js
@@ -15,43 +15,48 @@ import {
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
 
-export const AvatarFavicon = ({
-  size = Size.MD,
-  src,
-  name = 'avatar-favicon',
-  className,
-  fallbackIconProps,
-  borderColor = BorderColor.transparent,
-  ...props
-}) => {
-  const t = useI18nContext();
-
-  return (
-    <AvatarBase
-      size={size}
-      display={DISPLAY.FLEX}
-      alignItems={AlignItems.center}
-      justifyContent={JustifyContent.center}
-      className={classnames('mm-avatar-favicon', className)}
-      {...{ borderColor, ...props }}
-    >
-      {src ? (
-        <img
-          className="mm-avatar-favicon__image"
-          src={src}
-          alt={t('logo', [name])}
-        />
-      ) : (
-        <Icon
-          name={IconName.Global}
-          color={IconColor.iconDefault}
-          size={size}
-          {...fallbackIconProps}
-        />
-      )}
-    </AvatarBase>
-  );
-};
+export const AvatarFavicon = React.forwardRef(
+  (
+    {
+      size = Size.MD,
+      src,
+      name = 'avatar-favicon',
+      className,
+      fallbackIconProps,
+      borderColor = BorderColor.transparent,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useI18nContext();
+    return (
+      <AvatarBase
+        ref={ref}
+        size={size}
+        display={DISPLAY.FLEX}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        className={classnames('mm-avatar-favicon', className)}
+        {...{ borderColor, ...props }}
+      >
+        {src ? (
+          <img
+            className="mm-avatar-favicon__image"
+            src={src}
+            alt={t('logo', [name])}
+          />
+        ) : (
+          <Icon
+            name={IconName.Global}
+            color={IconColor.iconDefault}
+            size={size}
+            {...fallbackIconProps}
+          />
+        )}
+      </AvatarBase>
+    );
+  },
+);
 
 AvatarFavicon.propTypes = {
   /**
@@ -87,3 +92,5 @@ AvatarFavicon.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarFavicon.displayName = 'AvatarFavicon';
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
@@ -105,4 +105,10 @@ describe('AvatarFavicon', () => {
     );
     expect(getByTestId('classname')).toHaveClass('mm-avatar-favicon--test');
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarFavicon name="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js
@@ -19,33 +19,39 @@ import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
 
-export const AvatarIcon = ({
-  size = Size.MD,
-  color = TextColor.primaryDefault,
-  backgroundColor = BackgroundColor.primaryMuted,
-  className,
-  iconProps,
-  iconName,
-  ...props
-}) => (
-  <AvatarBase
-    size={size}
-    display={DISPLAY.FLEX}
-    alignItems={AlignItems.center}
-    justifyContent={JustifyContent.center}
-    color={color}
-    backgroundColor={backgroundColor}
-    borderColor={BorderColor.transparent}
-    className={classnames('mm-avatar-icon', className)}
-    {...props}
-  >
-    <Icon
-      color={IconColor.inherit}
-      name={iconName}
+export const AvatarIcon = React.forwardRef(
+  (
+    {
+      size = Size.MD,
+      color = TextColor.primaryDefault,
+      backgroundColor = BackgroundColor.primaryMuted,
+      className,
+      iconProps,
+      iconName,
+      ...props
+    },
+    ref,
+  ) => (
+    <AvatarBase
+      ref={ref}
       size={size}
-      {...iconProps}
-    />
-  </AvatarBase>
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      color={color}
+      backgroundColor={backgroundColor}
+      borderColor={BorderColor.transparent}
+      className={classnames('mm-avatar-icon', className)}
+      {...props}
+    >
+      <Icon
+        color={IconColor.inherit}
+        name={iconName}
+        size={size}
+        {...iconProps}
+      />
+    </AvatarBase>
+  ),
 );
 
 AvatarIcon.propTypes = {
@@ -87,3 +93,5 @@ AvatarIcon.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarIcon.displayName = 'AvatarIcon';
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.test.js b/ui/components/component-library/avatar-icon/avatar-icon.test.js
@@ -105,4 +105,10 @@ describe('AvatarIcon', () => {
       'box--background-color-success-muted',
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarIcon iconName={IconName.SwapHorizontal} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-network/avatar-network.test.js b/ui/components/component-library/avatar-network/avatar-network.test.js
@@ -123,4 +123,10 @@ describe('AvatarNetwork', () => {
       `box--border-color-${BorderColor.errorDefault}`,
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarNetwork ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });