fix(react-avatar): prevent spreading of custom props on html element (microsoft#36017)

Author: dmytrokirpa

change/@fluentui-react-avatar-ebb2e36e-aca3-468e-94a6-bf690663afcd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent spreading of custom props on html element",
+  "packageName": "@fluentui/react-avatar",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/library/src/components/Avatar/useAvatar.test.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useAvatar_unstable } from './useAvatar';
+
+describe('useAvatar', () => {
+  let ref: React.RefObject<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  it('should return state with default props', () => {
+    const { result } = renderHook(() => useAvatar_unstable({ name: 'John Doe' }, ref));
+
+    expect(result.current).toMatchObject({
+      image: undefined,
+      initials: expect.objectContaining({
+        children: 'JD',
+      }),
+    });
+  });
+
+  it('should return state with custom props', () => {
+    const props = {
+      name: 'John Doe',
+      image: { src: '/avatar.png' },
+    };
+
+    const { result } = renderHook(() => useAvatar_unstable(props, ref));
+
+    expect(result.current).toMatchObject({
+      image: expect.objectContaining({
+        alt: '',
+        src: props.image.src,
+      }),
+      initials: expect.objectContaining({
+        children: 'JD',
+      }),
+    });
+
+    // Custom props should not be spread on the root element
+    expect(result.current.root).not.toHaveProperty('image');
+    expect(result.current.root).not.toHaveProperty('initials');
+  });
+
+  it('should be possible to remove default icon', () => {
+    const props = {
+      name: '',
+      icon: { children: null },
+    };
+
+    const { result } = renderHook(() => useAvatar_unstable(props, ref));
+
+    expect(result.current).toMatchObject({
+      image: undefined,
+      icon: {
+        children: null,
+      },
+    });
+  });
+});

packages/react-components/react-avatar/library/src/components/Avatar/useAvatar.tsx

@@ -46,8 +46,8 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
     });
   }
 
-  if (state.icon) {
-    state.icon.children ??= <PersonRegular />;
+  if (state.icon && !state.icon.hasOwnProperty('children')) {
+    state.icon.children = <PersonRegular />;
   }
 
   const badge: AvatarState['badge'] = slot.optional(props.badge, {
@@ -110,7 +110,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
  */
 export const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {
   const { dir } = useFluent();
-  const { name, ...rest } = props;
+  const { name, image: imageProp, initials: initialsProp, ...rest } = props;
 
   const baseId = useId('avatar-');
 
@@ -126,7 +126,7 @@ export const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<H
 
   const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);
 
-  let image: AvatarBaseState['image'] = slot.optional(props.image, {
+  let image: AvatarBaseState['image'] = slot.optional(imageProp, {
     defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },
     elementType: 'img',
   });
@@ -143,7 +143,7 @@ export const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<H
   }
 
   // Resolve the initials slot, defaulted to getInitials
-  let initials: AvatarBaseState['initials'] = slot.optional(props.initials, {
+  let initials: AvatarBaseState['initials'] = slot.optional(initialsProp, {
     renderByDefault: true,
     defaultProps: {
       children: getInitials(name, dir === 'rtl'),