Updating Avatar components to forward refs (#18678)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>

ui/components/component-library/avatar-account/avatar-account.js

@@ -13,14 +13,19 @@ import {
   AvatarAccountSize,
 } from './avatar-account.types';
 
-export const AvatarAccount = ({
+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}
@@ -39,6 +44,7 @@ export const AvatarAccount = ({
         />
       )}
     </AvatarBase>
+  ),
 );
 
 AvatarAccount.propTypes = {
@@ -66,3 +72,5 @@ AvatarAccount.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarAccount.displayName = 'AvatarAccount';

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');
+  });
 });

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');
+  });
 });

ui/components/component-library/avatar-favicon/avatar-favicon.js

@@ -15,7 +15,9 @@ import {
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
 
-export const AvatarFavicon = ({
+export const AvatarFavicon = React.forwardRef(
+  (
+    {
       size = Size.MD,
       src,
       name = 'avatar-favicon',
@@ -23,11 +25,13 @@ export const AvatarFavicon = ({
       fallbackIconProps,
       borderColor = BorderColor.transparent,
       ...props
-}) => {
+    },
+    ref,
+  ) => {
     const t = useI18nContext();
-
     return (
       <AvatarBase
+        ref={ref}
         size={size}
         display={DISPLAY.FLEX}
         alignItems={AlignItems.center}
@@ -51,7 +55,8 @@ export const AvatarFavicon = ({
         )}
       </AvatarBase>
     );
-};
+  },
+);
 
 AvatarFavicon.propTypes = {
   /**
@@ -87,3 +92,5 @@ AvatarFavicon.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarFavicon.displayName = 'AvatarFavicon';

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');
+  });
 });

ui/components/component-library/avatar-icon/avatar-icon.js

@@ -19,7 +19,9 @@ import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
 
-export const AvatarIcon = ({
+export const AvatarIcon = React.forwardRef(
+  (
+    {
       size = Size.MD,
       color = TextColor.primaryDefault,
       backgroundColor = BackgroundColor.primaryMuted,
@@ -27,8 +29,11 @@ export const AvatarIcon = ({
       iconProps,
       iconName,
       ...props
-}) => (
+    },
+    ref,
+  ) => (
     <AvatarBase
+      ref={ref}
       size={size}
       display={DISPLAY.FLEX}
       alignItems={AlignItems.center}
@@ -46,6 +51,7 @@ export const AvatarIcon = ({
         {...iconProps}
       />
     </AvatarBase>
+  ),
 );
 
 AvatarIcon.propTypes = {
@@ -87,3 +93,5 @@ AvatarIcon.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarIcon.displayName = 'AvatarIcon';

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');
+  });
 });

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');
+  });
 });

ui/components/component-library/avatar-token/avatar-token.js

@@ -14,7 +14,9 @@ import {
 } from '../../../helpers/constants/design-system';
 import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
-export const AvatarToken = ({
+export const AvatarToken = React.forwardRef(
+  (
+    {
       size = Size.MD,
       name,
       src,
@@ -24,7 +26,9 @@ export const AvatarToken = ({
       borderColor = BorderColor.transparent,
       className,
       ...props
-}) => {
+    },
+    ref,
+  ) => {
     const [showFallback, setShowFallback] = useState(false);
 
     useEffect(() => {
@@ -39,6 +43,7 @@ export const AvatarToken = ({
 
     return (
       <AvatarBase
+        ref={ref}
         size={size}
         display={DISPLAY.FLEX}
         alignItems={AlignItems.center}
@@ -77,7 +82,8 @@ export const AvatarToken = ({
         )}
       </AvatarBase>
     );
-};
+  },
+);
 
 AvatarToken.propTypes = {
   /**
@@ -123,3 +129,5 @@ AvatarToken.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarToken.displayName = 'AvatarToken';

ui/components/component-library/avatar-token/avatar-token.test.js

@@ -121,4 +121,10 @@ describe('AvatarToken', () => {
       `box--border-color-${BorderColor.errorDefault}`,
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarToken ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });