chore(react-avatar): Rename AvatarGroupOverflow to AvatarGroupPopover (…

…#24338)
microsoft · Aug 11, 2022 · 84e2b1a · 84e2b1a
1 parent 27a3480
commit 84e2b1a
Show file tree

Hide file tree

Showing 24 changed files with 133 additions and 130 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
@@ -4,8 +4,8 @@ import Screener from 'screener-storybook/src/screener';
 import {
   AvatarGroup,
   AvatarGroupItem,
-  AvatarGroupOverflow,
-  AvatarGroupOverflowProps,
+  AvatarGroupPopover,
+  AvatarGroupPopoverProps,
   AvatarGroupProps,
   partitionAvatarGroupItems,
 } from '@fluentui/react-avatar';
@@ -46,7 +46,7 @@ const names = [
 const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
 
 const AvatarGroupList: React.FC<
-  AvatarGroupProps & { overflowIndicator?: AvatarGroupOverflowProps['indicator'] }
+  AvatarGroupProps & { overflowIndicator?: AvatarGroupPopoverProps['indicator'] }
 > = props => {
   const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout });
 
@@ -57,11 +57,11 @@ const AvatarGroupList: React.FC<
           {inlineItems.map(name => (
             <AvatarGroupItem key={name} name={name} />
           ))}
-          <AvatarGroupOverflow indicator={props.overflowIndicator}>
+          <AvatarGroupPopover indicator={props.overflowIndicator}>
             {overflowItems.map(name => (
               <AvatarGroupItem key={name} name={name} />
             ))}
-          </AvatarGroupOverflow>
+          </AvatarGroupPopover>
         </AvatarGroup>
       ))}
     </div>
@@ -88,9 +88,9 @@ storiesOf('AvatarGroup Converged', module)
       <div style={{ padding: '10px' }}>
         <AvatarGroup layout="pie">
           <AvatarGroupItem name={names[0]} />
-          <AvatarGroupOverflow>
+          <AvatarGroupPopover>
             <AvatarGroupItem name={names[0]} />
-          </AvatarGroupOverflow>
+          </AvatarGroupPopover>
         </AvatarGroup>
       </div>
     ),
@@ -106,10 +106,10 @@ storiesOf('AvatarGroup Converged', module)
         <AvatarGroup layout="pie">
           <AvatarGroupItem name={names[0]} />
           <AvatarGroupItem name={names[1]} />
-          <AvatarGroupOverflow>
+          <AvatarGroupPopover>
             <AvatarGroupItem name={names[0]} />
             <AvatarGroupItem name={names[1]} />
-          </AvatarGroupOverflow>
+          </AvatarGroupPopover>
         </AvatarGroup>
       </div>
     ),
@@ -145,11 +145,11 @@ storiesOf('AvatarGroup Converged', module)
             {inlineItems.map(name => (
               <AvatarGroupItem key={name} name={name} />
             ))}
-            <AvatarGroupOverflow triggerButton={{ id: 'show-overflow' }}>
+            <AvatarGroupPopover triggerButton={{ id: 'show-overflow' }}>
               {overflowItems.map(name => (
                 <AvatarGroupItem key={name} name={name} />
               ))}
-            </AvatarGroupOverflow>
+            </AvatarGroupPopover>
           </AvatarGroup>
         </div>
       );

diff --git a/change/@fluentui-react-avatar-56d4ba21-e41a-42df-b101-f774986c8319.json b/change/@fluentui-react-avatar-56d4ba21-e41a-42df-b101-f774986c8319.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: Renaming AvatarGroupOverflow to AvatarGroupPopover.",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-avatar/etc/react-avatar.api.md b/packages/react-components/react-avatar/etc/react-avatar.api.md
@@ -67,20 +67,20 @@ export type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
 };
 
 // @public
-export const AvatarGroupOverflow: React_2.FC<AvatarGroupOverflowProps>;
+export const AvatarGroupPopover: React_2.FC<AvatarGroupPopoverProps>;
 
 // @public (undocumented)
-export const avatarGroupOverflowClassNames: SlotClassNames<AvatarGroupOverflowSlots>;
+export const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots>;
 
 // @public
-export type AvatarGroupOverflowProps = Omit<ComponentProps<Partial<AvatarGroupOverflowSlots>>, 'children'> & {
+export type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {
     indicator?: 'count' | 'icon';
     count?: number;
     children: React_2.ReactNode;
 };
 
 // @public (undocumented)
-export type AvatarGroupOverflowSlots = {
+export type AvatarGroupPopoverSlots = {
     root: NonNullable<Slot<PopoverProps>>;
     triggerButton: NonNullable<Slot<'button'>>;
     content: NonNullable<Slot<'div'>>;
@@ -89,7 +89,7 @@ export type AvatarGroupOverflowSlots = {
 };
 
 // @public
-export type AvatarGroupOverflowState = ComponentState<AvatarGroupOverflowSlots> & Required<Pick<AvatarGroupOverflowProps, 'indicator'>> & {
+export type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'indicator'>> & {
     popoverOpen: boolean;
     layout: AvatarGroupProps['layout'];
     size: AvatarSizes;
@@ -174,7 +174,7 @@ export const renderAvatarGroup_unstable: (state: AvatarGroupState, contextValues
 export const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
 
 // @public
-export const renderAvatarGroupOverflow_unstable: (state: AvatarGroupOverflowState, contextValues: AvatarGroupContextValues) => JSX.Element;
+export const renderAvatarGroupPopover_unstable: (state: AvatarGroupPopoverState, contextValues: AvatarGroupContextValues) => JSX.Element;
 
 // @public (undocumented)
 export const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
@@ -195,10 +195,10 @@ export const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps, ref: Rea
 export const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
 
 // @public
-export const useAvatarGroupOverflow_unstable: (props: AvatarGroupOverflowProps) => AvatarGroupOverflowState;
+export const useAvatarGroupPopover_unstable: (props: AvatarGroupPopoverProps) => AvatarGroupPopoverState;
 
 // @public
-export const useAvatarGroupOverflowStyles_unstable: (state: AvatarGroupOverflowState) => AvatarGroupOverflowState;
+export const useAvatarGroupPopoverStyles_unstable: (state: AvatarGroupPopoverState) => AvatarGroupPopoverState;
 
 // @public
 export const useAvatarGroupStyles_unstable: (state: AvatarGroupState) => AvatarGroupState;

diff --git a/packages/react-components/react-avatar/src/AvatarGroupOverflow.ts b/packages/react-components/react-avatar/src/AvatarGroupOverflow.ts
diff --git a/packages/react-components/react-avatar/src/AvatarGroupPopover.ts b/packages/react-components/react-avatar/src/AvatarGroupPopover.ts
@@ -0,0 +1 @@
+export * from './components/AvatarGroupPopover/index';
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.test.tsx
@@ -3,7 +3,7 @@ import { AvatarGroup } from './AvatarGroup';
 import { AvatarGroupItem } from '../AvatarGroupItem';
 import { isConformant } from '../../common/isConformant';
 import { render, screen } from '@testing-library/react';
-import { AvatarGroupOverflow } from '../AvatarGroupOverflow/AvatarGroupOverflow';
+import { AvatarGroupPopover } from '../AvatarGroupPopover/AvatarGroupPopover';
 
 describe('AvatarGroup', () => {
   isConformant({
@@ -18,12 +18,12 @@ describe('AvatarGroup', () => {
           <AvatarGroupItem name="Daisy Phillips" />
           <AvatarGroupItem name="Robert Tolbert" />
           <AvatarGroupItem name="Kevin Sturgis" />
-          <AvatarGroupOverflow>
+          <AvatarGroupPopover>
             <AvatarGroupItem name="Allan Munger" />
             <AvatarGroupItem name="Daisy Phillips" />
             <AvatarGroupItem name="Robert Tolbert" />
             <AvatarGroupItem name="Kevin Sturgis" />
-          </AvatarGroupOverflow>
+          </AvatarGroupPopover>
         </>
       ),
     },
@@ -37,12 +37,12 @@ describe('AvatarGroup', () => {
         <AvatarGroupItem name="Daisy Phillips" />
         <AvatarGroupItem name="Robert Tolbert" />
         <AvatarGroupItem name="Kevin Sturgis" />
-        <AvatarGroupOverflow>
+        <AvatarGroupPopover>
           <AvatarGroupItem name="Allan Munger" />
           <AvatarGroupItem name="Daisy Phillips" />
           <AvatarGroupItem name="Robert Tolbert" />
           <AvatarGroupItem name="Kevin Sturgis" />
-        </AvatarGroupOverflow>
+        </AvatarGroupPopover>
       </AvatarGroup>,
     );
 

diff --git a/.../react-components/react-avatar/src/components/AvatarGroupOverflow/AvatarGroupOverflow.tsx b/.../react-components/react-avatar/src/components/AvatarGroupOverflow/AvatarGroupOverflow.tsx
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupOverflow/index.ts b/packages/react-components/react-avatar/src/components/AvatarGroupOverflow/index.ts
diff --git a/...roupOverflow/AvatarGroupOverflow.test.tsx → ...rGroupPopover/AvatarGroupPopover.test.tsx b/...roupOverflow/AvatarGroupOverflow.test.tsx → ...rGroupPopover/AvatarGroupPopover.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';
-import { AvatarGroupOverflow } from './AvatarGroupOverflow';
-import { avatarGroupOverflowClassNames } from './useAvatarGroupOverflowStyles';
+import { AvatarGroupPopover } from './AvatarGroupPopover';
+import { avatarGroupPopoverClassNames } from './useAvatarGroupPopoverStyles';
 import { isConformant } from '../../common/isConformant';
 import { RenderResult } from '@testing-library/react';
 
@@ -16,18 +16,18 @@ function queryByRoleDialog(result: RenderResult) {
   }
 }
 
-const getOverflowSurfaceElement = (result: RenderResult) => {
-  // Overflow button needs to be clicked otherwise overflowContent won't be rendered.
+const getPopoverSurfaceElement = (result: RenderResult) => {
+  // triggerButton needs to be clicked otherwise content won't be rendered.
   result.getByRole('button').click();
   const dialog = queryByRoleDialog(result);
   expect(dialog).not.toBeNull();
   return dialog!;
 };
 
-describe('AvatarGroupOverflow', () => {
+describe('AvatarGroupPopover', () => {
   isConformant({
-    Component: AvatarGroupOverflow,
-    displayName: 'AvatarGroupOverflow',
+    Component: AvatarGroupPopover,
+    displayName: 'AvatarGroupPopover',
     disabledTests: [
       'component-handles-ref',
       'component-has-root-ref',
@@ -40,11 +40,11 @@ describe('AvatarGroupOverflow', () => {
           props: {},
           expectedClassNames: {
             // root shouldn't be expected since the root is a Popover
-            overflowButton: avatarGroupOverflowClassNames.triggerButton,
-            overflowContent: avatarGroupOverflowClassNames.content,
-            overflowSurface: avatarGroupOverflowClassNames.popoverSurface,
+            popoverButton: avatarGroupPopoverClassNames.triggerButton,
+            popoverContent: avatarGroupPopoverClassNames.content,
+            popoverSurface: avatarGroupPopoverClassNames.popoverSurface,
           },
-          getPortalElement: getOverflowSurfaceElement,
+          getPortalElement: getPopoverSurfaceElement,
         },
       ],
     },

diff --git a/...es/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx b/...es/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover';
+import { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues';
+import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover';
+import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles';
+import type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types';
+
+/**
+ * The AvatarGroupPopover component provides a button with a Popover containing the children provided.
+ */
+export const AvatarGroupPopover: React.FC<AvatarGroupPopoverProps> = props => {
+  const state = useAvatarGroupPopover_unstable(props);
+  const contextValues = useAvatarGroupPopoverContextValues(state);
+
+  useAvatarGroupPopoverStyles_unstable(state);
+  return renderAvatarGroupPopover_unstable(state, contextValues);
+};
+
+AvatarGroupPopover.displayName = 'AvatarGroupPopover';
diff --git a/...roupOverflow/AvatarGroupOverflow.types.ts → ...rGroupPopover/AvatarGroupPopover.types.ts b/...roupOverflow/AvatarGroupOverflow.types.ts → ...rGroupPopover/AvatarGroupPopover.types.ts
@@ -5,7 +5,7 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 import type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';
 import type { TooltipProps } from '@fluentui/react-tooltip';
 
-export type AvatarGroupOverflowSlots = {
+export type AvatarGroupPopoverSlots = {
   root: NonNullable<Slot<PopoverProps>>;
 
   /**
@@ -30,9 +30,9 @@ export type AvatarGroupOverflowSlots = {
 };
 
 /**
- * AvatarGroupOverflow Props
+ * AvatarGroupPopover Props
  */
-export type AvatarGroupOverflowProps = Omit<ComponentProps<Partial<AvatarGroupOverflowSlots>>, 'children'> & {
+export type AvatarGroupPopoverProps = Omit<ComponentProps<Partial<AvatarGroupPopoverSlots>>, 'children'> & {
   /**
    * Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.
    * Note: The indicator will default to `icon` when the size is less than 24.
@@ -43,7 +43,7 @@ export type AvatarGroupOverflowProps = Omit<ComponentProps<Partial<AvatarGroupOv
   /**
    * Number of AvatarGroupItems that will be rendered.
    *
-   * Note: AvatarGroupOverflow handles counting the number of children, but when using a react fragment to wrap the
+   * Note: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the
    * children, this is not possible and therefore it has do be added manually.
    */
   count?: number;
@@ -52,10 +52,10 @@ export type AvatarGroupOverflowProps = Omit<ComponentProps<Partial<AvatarGroupOv
 };
 
 /**
- * State used in rendering AvatarGroupOverflow
+ * State used in rendering AvatarGroupPopover
  */
-export type AvatarGroupOverflowState = ComponentState<AvatarGroupOverflowSlots> &
-  Required<Pick<AvatarGroupOverflowProps, 'indicator'>> & {
+export type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &
+  Required<Pick<AvatarGroupPopoverProps, 'indicator'>> & {
     popoverOpen: boolean;
     layout: AvatarGroupProps['layout'];
     size: AvatarSizes;

diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts
@@ -0,0 +1,5 @@
+export * from './AvatarGroupPopover';
+export * from './AvatarGroupPopover.types';
+export * from './renderAvatarGroupPopover';
+export * from './useAvatarGroupPopover';
+export * from './useAvatarGroupPopoverStyles';
diff --git a/...oupOverflow/renderAvatarGroupOverflow.tsx → ...GroupPopover/renderAvatarGroupPopover.tsx b/...oupOverflow/renderAvatarGroupOverflow.tsx → ...GroupPopover/renderAvatarGroupPopover.tsx
@@ -4,16 +4,16 @@ import { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
 import { getSlots } from '@fluentui/react-utilities';
 import { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';
 import { TooltipProps } from '@fluentui/react-tooltip';
-import type { AvatarGroupOverflowState, AvatarGroupOverflowSlots } from './AvatarGroupOverflow.types';
+import type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';
 
 /**
- * Render the final JSX of AvatarGroupOverflow
+ * Render the final JSX of AvatarGroupPopover
  */
-export const renderAvatarGroupOverflow_unstable = (
-  state: AvatarGroupOverflowState,
+export const renderAvatarGroupPopover_unstable = (
+  state: AvatarGroupPopoverState,
   contextValues: AvatarGroupContextValues,
 ) => {
-  const { slots, slotProps } = getSlots<AvatarGroupOverflowSlots>(state);
+  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);
 
   return (
     <slots.root {...(slotProps.root as PopoverProps)}>

diff --git a/...rGroupOverflow/useAvatarGroupOverflow.tsx → ...tarGroupPopover/useAvatarGroupPopover.tsx b/...rGroupOverflow/useAvatarGroupOverflow.tsx → ...tarGroupPopover/useAvatarGroupPopover.tsx
@@ -5,18 +5,18 @@ import { resolveShorthand, useControllableState } from '@fluentui/react-utilitie
 import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';
 import { useContextSelector } from '@fluentui/react-context-selector';
-import type { AvatarGroupOverflowProps, AvatarGroupOverflowState } from './AvatarGroupOverflow.types';
+import type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';
 import { Tooltip } from '@fluentui/react-tooltip';
 
 /**
- * Create the state required to render AvatarGroupOverflow.
+ * Create the state required to render AvatarGroupPopover.
  *
- * The returned state can be modified with hooks such as useAvatarGroupOverflowStyles_unstable,
- * before being passed to renderAvatarGroupOverflow_unstable.
+ * The returned state can be modified with hooks such as useAvatarGroupPopoverStyles_unstable,
+ * before being passed to renderAvatarGroupPopover_unstable.
  *
- * @param props - props from this instance of AvatarGroupOverflow
+ * @param props - props from this instance of AvatarGroupPopover
  */
-export const useAvatarGroupOverflow_unstable = (props: AvatarGroupOverflowProps): AvatarGroupOverflowState => {
+export const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {
   const size = useContextSelector(AvatarGroupContext, ctx => ctx.size) ?? defaultAvatarGroupSize;
   const layout = useContextSelector(AvatarGroupContext, ctx => ctx.layout);
   const {
@@ -60,7 +60,7 @@ export const useAvatarGroupOverflow_unstable = (props: AvatarGroupOverflowProps)
       tooltip: Tooltip,
     },
     root: {
-      // Popover expects a child for its children. The children are added in the renderAvatarGroupOverflow.
+      // Popover expects a child for its children. The children are added in the renderAvatarGroupPopover.
       children: <></>,
       size: 'small',
       trapFocus: true,

diff --git a/...ow/useAvatarGroupOverflowContextValues.ts → ...ver/useAvatarGroupPopoverContextValues.ts b/...ow/useAvatarGroupOverflowContextValues.ts → ...ver/useAvatarGroupPopoverContextValues.ts
@@ -1,7 +1,7 @@
 import { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
-import { AvatarGroupOverflowState } from './AvatarGroupOverflow.types';
+import { AvatarGroupPopoverState } from './AvatarGroupPopover.types';
 
-export const useAvatarGroupOverflowContextValues = (state: AvatarGroupOverflowState): AvatarGroupContextValues => {
+export const useAvatarGroupPopoverContextValues = (state: AvatarGroupPopoverState): AvatarGroupContextValues => {
   const avatarGroup: AvatarGroupContextValue = {
     isOverflow: true,
     size: 24,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './components/AvatarGroupPopover/index';