Refactor Avatar to remove mergeProps

apps/vr-tests/src/stories/AvatarConverged.stories.tsx

@@ -21,7 +21,7 @@ const AvatarList: React.FC<
           key={size}
           size={size}
           name={names && names[i % names.length]}
-          image={images && images[i % images.length]}
+          image={images ? { src: images[i % images.length] } : undefined}
           {...restOfProps}
         />
       ))}
@@ -55,7 +55,7 @@ const AvatarCustomSizeList: React.FC<
           size={baseSize}
           style={{ width: customSize, height: customSize }}
           name={names && names[names.length - (i % names.length) - 1]}
-          image={images && images[images.length - (i % images.length) - 1]}
+          image={images ? { src: images[images.length - (i % images.length) - 1] } : undefined}
           {...restOfProps}
         />
       ))}
@@ -91,20 +91,28 @@ storiesOf('Avatar Converged', module)
         <Avatar name="(111)-555-1234" icon={<PersonCall20Regular />} />
         <Avatar icon={<People20Regular />} shape="square" />
         <Avatar name="Group" icon={<People20Regular />} shape="square" />
-        <Avatar image={examples.image[14]} badge="away" />
-        <Avatar name={examples.name[7]} image={examples.image[7]} badge="available" />
+        <Avatar image={{ src: examples.image[14] }} badge={{ status: 'away' }} />
+        <Avatar
+          name={examples.name[7]}
+          image={{ src: examples.image[7] }}
+          badge={{ status: 'available' }}
+        />
       </>
     ),
     { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
   )
   .addStory('size+name', () => <AvatarList names={examples.name} />)
-  .addStory('size+icon+badge+square', () => <AvatarList badge="outOfOffice" shape="square" />)
-  .addStory('size+image+badge', () => <AvatarList images={examples.image} badge="doNotDisturb" />)
+  .addStory('size+icon+badge+square', () => (
+    <AvatarList badge={{ status: 'outOfOffice' }} shape="square" />
+  ))
+  .addStory('size+image+badge', () => (
+    <AvatarList images={examples.image} badge={{ status: 'doNotDisturb' }} />
+  ))
   .addStory('size+inactive+badge', () => (
-    <AvatarList images={examples.image} active="inactive" badge="offline" />
+    <AvatarList images={examples.image} active="inactive" badge={{ status: 'offline' }} />
   ))
   .addStory('size+active+badge', () => (
-    <AvatarList images={examples.image} active="active" badge="available" />
+    <AvatarList images={examples.image} active="active" badge={{ status: 'available' }} />
   ))
   .addStory('size+active+shadow', () => (
     <AvatarList images={examples.image} active="active" activeAppearance="shadow" />
@@ -120,7 +128,7 @@ storiesOf('Avatar Converged', module)
   ))
   .addStory('customSize+image', () => <AvatarCustomSizeList images={examples.image} />)
   .addStory('customSize+name+badge', () => (
-    <AvatarCustomSizeList names={examples.name} badge="available" />
+    <AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />
   ))
   .addStory('customSize+icon+active', () => <AvatarCustomSizeList active="active" />)
   .addStory(

change/@fluentui-example-data-ed2095fb-1e18-497f-85d3-96f9b1c42943.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix badge examples to use shorthand props",
+  "packageName": "@fluentui/example-data",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-3c230cf0-3ca5-41f4-987b-51e4792c5940.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Refactor Avatar to remove mergeProps",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-badge-56116117-ca13-4abe-8b34-1cadabb4046f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Revert to ObjectShorthandProps for slots to allow correct typing in Avatar",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/example-data/etc/example-data.api.md

@@ -13,7 +13,19 @@ export const AvatarExamples: {
     }[];
     readonly name: string[];
     readonly image: string[];
-    readonly badge: readonly ["available", "away", "busy", "doNotDisturb", "offline", "outOfOffice", {
+    readonly badge: readonly [{
+        readonly status: "available";
+    }, {
+        readonly status: "away";
+    }, {
+        readonly status: "busy";
+    }, {
+        readonly status: "doNotDisturb";
+    }, {
+        readonly status: "offline";
+    }, {
+        readonly status: "outOfOffice";
+    }, {
         readonly status: "available";
         readonly outOfOffice: true;
     }, {
@@ -172,5 +184,4 @@ export const TestImages: {
     personaMale: string;
 };
 
-
 ```

packages/example-data/src/AvatarExamples.tsx

@@ -40,12 +40,12 @@ export const AvatarExamples = {
   name: nameAndImage.map(p => p.name),
   image: nameAndImage.map(p => p.image),
   badge: [
-    'available',
-    'away',
-    'busy',
-    'doNotDisturb',
-    'offline',
-    'outOfOffice',
+    { status: 'available' },
+    { status: 'away' },
+    { status: 'busy' },
+    { status: 'doNotDisturb' },
+    { status: 'offline' },
+    { status: 'outOfOffice' },
     { status: 'available', outOfOffice: true },
     { status: 'away', outOfOffice: true },
     { status: 'busy', outOfOffice: true },

packages/react-avatar/src/Avatar.stories.tsx

@@ -40,7 +40,7 @@ export const Basic = () => {
         <Avatar />
         <Avatar name={examples.name[0]} />
         <Avatar size={40} icon={<Guest20Regular />} />
-        <Avatar size={72} name={examples.name[0]} image={examples.image[0]} />
+        <Avatar size={72} name={examples.name[0]} image={{ src: examples.image[0] }} />
       </StoryExample>
       <StoryExample title="Shape">
         <Avatar name="Group" />
@@ -51,12 +51,12 @@ export const Basic = () => {
       <StoryExample title="Badges">
         <Avatar name={examples.name[1]} badge="available" />
         <Avatar name={examples.name[2]} badge={{ status: 'available', outOfOffice: true }} />
-        <Avatar name={examples.name[3]} image={examples.image[3]} badge="offline" />
+        <Avatar name={examples.name[3]} image={{ src: examples.image[3] }} badge="offline" />
       </StoryExample>
       <StoryExample title="Size">
-        <Avatar size={20} name={examples.name[4]} image={examples.image[4]} badge="offline" />
-        <Avatar size={48} name={examples.name[5]} image={examples.image[5]} badge="available" />
-        <Avatar size={96} name={examples.name[6]} image={examples.image[6]} badge="away" />
+        <Avatar size={20} name={examples.name[4]} image={{ src: examples.image[4] }} badge="offline" />
+        <Avatar size={48} name={examples.name[5]} image={{ src: examples.image[5] }} badge="available" />
+        <Avatar size={96} name={examples.name[6]} image={{ src: examples.image[6] }} badge="away" />
       </StoryExample>
       <StoryExample title="Brand color">
         <Avatar color="brand" name={examples.name[4]} badge="doNotDisturb" />
@@ -77,11 +77,11 @@ export const Basic = () => {
       <StoryExample title="Active/inactive">
         <div className={styles.flex}>
           <Avatar name={examples.name[7]} active="active" />
-          <Avatar image={examples.image[8]} active="active" activeAppearance="shadow" />
-          <Avatar image={examples.image[9]} active="active" activeAppearance="glow" />
-          <Avatar image={examples.image[10]} active="active" activeAppearance="ring-shadow" />
-          <Avatar image={examples.image[11]} active="active" activeAppearance="ring-glow" />
-          <Avatar image={examples.image[12]} active="inactive" />
+          <Avatar image={{ src: examples.image[8] }} active="active" activeAppearance="shadow" />
+          <Avatar image={{ src: examples.image[9] }} active="active" activeAppearance="glow" />
+          <Avatar image={{ src: examples.image[10] }} active="active" activeAppearance="ring-shadow" />
+          <Avatar image={{ src: examples.image[11] }} active="active" activeAppearance="ring-glow" />
+          <Avatar image={{ src: examples.image[12] }} active="inactive" />
         </div>
       </StoryExample>
     </>
@@ -179,7 +179,7 @@ export const ActiveAnimation = () => {
           active={active ? 'active' : 'inactive'}
           activeAppearance={activeAppearance}
           name={display === 'label' ? examples.name[10] : undefined}
-          image={display === 'image' ? examples.image[10] : undefined}
+          image={display === 'image' ? { src: examples.image[10] } : undefined}
         />
       </div>
       <div className={flexStyles.stack}>
@@ -222,11 +222,21 @@ export const ActiveAnimation = () => {
 export const CustomSizes = () => (
   <StoryExample title="Custom size">
     <Avatar name={examples.name[11]} badge="available" size={20} style={{ width: '13px', height: '13px' }} />
-    <Avatar image={examples.image[12]} badge="away" size={20} style={{ width: '21px', height: '21px' }} />
+    <Avatar image={{ src: examples.image[12] }} badge="away" size={20} style={{ width: '21px', height: '21px' }} />
     <Avatar name={examples.name[13]} badge="busy" size={32} style={{ width: '34px', height: '34px' }} />
-    <Avatar image={examples.image[14]} badge="doNotDisturb" size={48} style={{ width: '55px', height: '55px' }} />
+    <Avatar
+      image={{ src: examples.image[14] }}
+      badge="doNotDisturb"
+      size={48}
+      style={{ width: '55px', height: '55px' }}
+    />
     <Avatar name={examples.name[15]} badge="offline" size={72} style={{ width: '89px', height: '89px' }} />
-    <Avatar image={examples.image[16]} badge="outOfOffice" size={128} style={{ width: '144px', height: '144px' }} />
+    <Avatar
+      image={{ src: examples.image[16] }}
+      badge="outOfOffice"
+      size={128}
+      style={{ width: '144px', height: '144px' }}
+    />
   </StoryExample>
 );
 
@@ -255,7 +265,7 @@ const RobotAvatar = React.forwardRef((props: AvatarProps, ref: React.Ref<HTMLEle
 
   const icon = size <= 40 ? <Bot20Regular /> : <Bot24Regular />;
 
-  const state = useAvatar(props, ref, { icon });
+  const state = useAvatar({ icon, ...props }, ref);
   const styles = useRobotAvatarStyles();
 
   state.className = mergeClasses(styles.root, styles[state.size], state.className);
@@ -288,7 +298,7 @@ export const AvatarPlayground = () => {
     useValueSelector('name', [nameAndImage.name, nextNameAndImage, prevNameAndImage], true),
     useValueSelector(
       'image',
-      [nameAndImage.image, nextNameAndImage, prevNameAndImage],
+      [{ src: nameAndImage.image }, nextNameAndImage, prevNameAndImage],
       true,
       getFilenameFromUrl as () => string,
     ),
@@ -343,7 +353,7 @@ const AvatarExampleList: React.FC<
           key={size}
           size={size}
           name={names && names[(i + offset) % names.length]}
-          image={images && images[(i + offset) % images.length]}
+          image={images && { src: images[(i + offset) % images.length] }}
           badge={examples.badge[(i + offset) % examples.badge.length]}
           {...restOfProps}
         />

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

@@ -35,7 +35,7 @@ describe('Avatar', () => {
   });
 
   it('renders an image', () => {
-    const component = renderer.create(<Avatar image="i.png" />);
+    const component = renderer.create(<Avatar image={{ src: 'i.png' }} />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -79,25 +79,27 @@ describe('Avatar', () => {
   });
 
   it('prioritizes image over initials', () => {
-    const component = renderer.create(<Avatar name="First Last" image="i.png" />);
+    const component = renderer.create(<Avatar name="First Last" image={{ src: 'i.png' }} />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('prioritizes image over icon', () => {
-    const component = renderer.create(<Avatar icon={<span className="icon" />} image="i.png" />);
+    const component = renderer.create(<Avatar icon={<span className="icon" />} image={{ src: 'i.png' }} />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('prioritizes image over initials and icon', () => {
-    const component = renderer.create(<Avatar name="First Last" icon={<span className="icon" />} image="i.png" />);
+    const component = renderer.create(
+      <Avatar name="First Last" icon={<span className="icon" />} image={{ src: 'i.png' }} />,
+    );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('displays a badge', () => {
-    const component = renderer.create(<Avatar name="First Last" badge="available" />);
+    const component = renderer.create(<Avatar name="First Last" badge={{ status: 'available' }} />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });