react-avatar: Adding initial implementation of AvatarGroup.

change/@fluentui-react-avatar-32be9545-3830-48b3-bca7-aa6f556ad333.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Adding initial implementation of AvatarGroup",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-avatar/etc/react-avatar.api.md

@@ -4,7 +4,6 @@
 
 ```ts
 
-import { Button } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -52,20 +51,21 @@ export type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
 export type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
     layout?: 'spread' | 'stack' | 'pie';
     maxAvatars?: number;
-    overflowIndicator?: 'number-overflowed' | 'icon';
+    overflowIndicator?: 'count' | 'icon';
     size?: AvatarSizes;
-    strings?: AvatarGroupStrings;
 };
 
 // @public (undocumented)
 export type AvatarGroupSlots = {
-    root: Slot<'div'>;
-    popoverTrigger?: Slot<typeof Button>;
-    popoverSurface?: Slot<typeof PopoverSurface>;
+    root: NonNullable<Slot<'div'>>;
+    overflowButton?: NonNullable<Slot<'button'>>;
+    overflowList?: NonNullable<Slot<'ul'>>;
+    overflowSurface?: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 // @public
-export type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'maxAvatars' | 'size' | 'overflowIndicator'>> & {
+export type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size' | 'overflowIndicator'>> & {
+    hasOverflow: boolean;
     tooltipContent: TooltipProps['content'];
 };
 

packages/react-components/react-avatar/package.json

@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@fluentui/react-badge": "9.0.0-rc.12",
-    "@fluentui/react-button": "9.0.0-rc.13",
     "@fluentui/react-context-selector": "9.0.0-rc.10",
     "@fluentui/react-icons": "^2.0.166-rc.3",
     "@fluentui/react-popover": "9.0.0-rc.13",

packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts

@@ -212,7 +212,7 @@ const useStyles = makeStyles({
   icon48: { fontSize: '48px' },
 });
 
-const useSizeStyles = makeStyles({
+export const useSizeStyles = makeStyles({
   16: { width: '16px', height: '16px' },
   20: { width: '20px', height: '20px' },
   24: { width: '24px', height: '24px' },

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
 import { AvatarGroup } from './AvatarGroup';
+import { AvatarGroupItem } from '../AvatarGroupItem';
 import { isConformant } from '../../common/isConformant';
+import { render } from '@testing-library/react';
 
 describe('AvatarGroup', () => {
   // TODO: Remove component-has-static-classnames-object from disabled tests.
@@ -18,7 +19,19 @@ describe('AvatarGroup', () => {
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
 
   it('renders a default state', () => {
-    const result = render(<AvatarGroup>Default AvatarGroup</AvatarGroup>);
+    const result = render(
+      <AvatarGroup>
+        <AvatarGroupItem name="Katri Athokas" />
+        <AvatarGroupItem name="Elvia Atkins" />
+        <AvatarGroupItem name="Cameron Evans" />
+        <AvatarGroupItem name="Wanda Howard" />
+        <AvatarGroupItem name="Mona Kane" />
+        <AvatarGroupItem name="Allan Munger" />
+        <AvatarGroupItem name="Daisy Phillips" />
+        <AvatarGroupItem name="Robert Tolbert" />
+        <AvatarGroupItem name="Kevin Sturgis" />
+      </AvatarGroup>,
+    );
     expect(result.container).toMatchSnapshot();
   });
 });

packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx

@@ -6,7 +6,8 @@ import type { AvatarGroupProps } from './AvatarGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * AvatarGroup component - TODO: add more docs
+ * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
+ * of individual Avatars in a spread, stack, or pie layout.
  */
 export const AvatarGroup: ForwardRefComponent<AvatarGroupProps> = React.forwardRef((props, ref) => {
   const state = useAvatarGroup_unstable(props, ref);

packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts

@@ -1,21 +1,25 @@
-import { Button } from '@fluentui/react-button';
 import { PopoverSurface } from '@fluentui/react-popover';
 import { TooltipProps } from '@fluentui/react-tooltip';
 import type { AvatarSizes } from '../Avatar/Avatar.types';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type AvatarGroupSlots = {
-  root: Slot<'div'>;
+  root: NonNullable<Slot<'div'>>;
 
   /**
    * Popover trigger slot that can be used to change the overflow indicator.
    */
-  popoverTrigger?: Slot<typeof Button>;
+  overflowButton?: NonNullable<Slot<'button'>>;
+
+  /**
+   * Unordered list that contains the overflow AvatarGroupItems.
+   */
+  overflowList?: NonNullable<Slot<'ul'>>;
 
   /**
    * Popover surface that will be displayed when the popover is triggered.
    */
-  popoverSurface?: Slot<typeof PopoverSurface>;
+  overflowSurface?: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
@@ -30,42 +34,38 @@ export type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
 
   /**
    * Maximum number of Avatars to be displayed before overflowing.
-   * NOTE: if pie layout is used, `maxAvatars` will be ignored.
+   * Note: if pie layout is used, `maxAvatars` will be ignored.
    * @default 5
    */
   maxAvatars?: number;
 
   /**
    * Whether the overflow indicator should render an icon instead of the number of overflowed avatars.
-   * @default false
+   * Note: The overflowIndicator will default to `icon` when the size is less than 24.
+   * @default count
    */
-  overflowIndicator?: 'number-overflowed' | 'icon';
+  overflowIndicator?: 'count' | 'icon';
 
   /**
    * Size of the avatars.
    * @default 32
    */
   size?: AvatarSizes;
-
-  /**
-   * Strings for localizing text in the tooltip.
-   */
-  strings?: AvatarGroupStrings;
 };
 
 /**
  * State used in rendering AvatarGroup
  */
 export type AvatarGroupState = ComponentState<AvatarGroupSlots> &
-  Required<Pick<AvatarGroupProps, 'layout' | 'maxAvatars' | 'size' | 'overflowIndicator'>> & {
+  Required<Pick<AvatarGroupProps, 'layout' | 'size' | 'overflowIndicator'>> & {
+    /**
+     * Whether there are more Avatars than `maxAvatars`.
+     * @default false
+     */
+    hasOverflow: boolean;
+
+    /**
+     * Tooltip content for the overflow indicator.
+     */
     tooltipContent: TooltipProps['content'];
   };
-
-// TODO: Remove strings from AvatarGroup.
-export type AvatarGroupStrings = {
-  /**
-   * Text applied to the overflow indicator's tooltip.
-   * Can include the token "\{numOverflowedAvatars\}" which will be replaced with the number of overflowed avatars.
-   */
-  tooltipContent: string;
-};

packages/react-components/react-avatar/src/components/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -4,8 +4,84 @@ exports[`AvatarGroup renders a default state 1`] = `
 <div>
   <div
     class="fui-AvatarGroup"
+    role="group"
   >
-    Default AvatarGroup
+    <div
+      class="fui-AvatarGroupItem"
+    >
+      <span
+        aria-label="Allan Munger"
+        class="fui-Avatar fui-AvatarGroupItem__avatar"
+        id="avatar-1"
+        role="img"
+      >
+        <span
+          class="fui-Avatar__initials"
+          id="avatar-1__initials"
+        >
+          AM
+        </span>
+      </span>
+    </div>
+    <div
+      class="fui-AvatarGroupItem"
+    >
+      <span
+        aria-label="Daisy Phillips"
+        class="fui-Avatar fui-AvatarGroupItem__avatar"
+        id="avatar-2"
+        role="img"
+      >
+        <span
+          class="fui-Avatar__initials"
+          id="avatar-2__initials"
+        >
+          DP
+        </span>
+      </span>
+    </div>
+    <div
+      class="fui-AvatarGroupItem"
+    >
+      <span
+        aria-label="Robert Tolbert"
+        class="fui-Avatar fui-AvatarGroupItem__avatar"
+        id="avatar-3"
+        role="img"
+      >
+        <span
+          class="fui-Avatar__initials"
+          id="avatar-3__initials"
+        >
+          RT
+        </span>
+      </span>
+    </div>
+    <div
+      class="fui-AvatarGroupItem"
+    >
+      <span
+        aria-label="Kevin Sturgis"
+        class="fui-Avatar fui-AvatarGroupItem__avatar"
+        id="avatar-4"
+        role="img"
+      >
+        <span
+          class="fui-Avatar__initials"
+          id="avatar-4__initials"
+        >
+          KS
+        </span>
+      </span>
+    </div>
+    <button
+      aria-expanded="false"
+      aria-label="View more people."
+      class="fui-AvatarGroup__overflowButton"
+      data-tabster="{\\"deloser\\":{}}"
+    >
+      +5
+    </button>
   </div>
 </div>
 `;

packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx

@@ -1,13 +1,36 @@
 import * as React from 'react';
+import { Popover, PopoverTrigger } from '@fluentui/react-popover';
+import { Tooltip } from '@fluentui/react-tooltip';
 import { getSlots } from '@fluentui/react-utilities';
+import { AvatarGroupContext } from '../../contexts/AvatarGroupContext';
 import type { AvatarGroupState, AvatarGroupSlots } from './AvatarGroup.types';
 
 /**
  * Render the final JSX of AvatarGroup
  */
 export const renderAvatarGroup_unstable = (state: AvatarGroupState) => {
   const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);
+  const { layout, size } = state;
 
-  // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  return (
+    <AvatarGroupContext.Provider value={{ layout, size }}>
+      <slots.root {...slotProps.root}>
+        {state.root.children}
+        {state.hasOverflow && slots.overflowButton && slots.overflowSurface && slots.overflowList && (
+          <Popover trapFocus size="small">
+            <PopoverTrigger>
+              <Tooltip content={state.tooltipContent} relationship="label">
+                <slots.overflowButton {...slotProps.overflowButton} />
+              </Tooltip>
+            </PopoverTrigger>
+            <slots.overflowSurface {...slotProps.overflowSurface}>
+              <AvatarGroupContext.Provider value={{ isOverflow: true, layout, size: 24 }}>
+                <slots.overflowList {...slotProps.overflowList} />
+              </AvatarGroupContext.Provider>
+            </slots.overflowSurface>
+          </Popover>
+        )}
+      </slots.root>
+    </AvatarGroupContext.Provider>
+  );
 };