chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize

change/@fluentui-react-avatar-29e5243e-cd62-4acb-8605-0b2f5b2d2de8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: deprecates AvatarSizes in favor of AvatarSize",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-cf661b97-d1aa-4af8-a344-231de7d0a8cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-c53b834d-420e-4807-95cf-e9d6becd73a0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore(react-table): switch AvatarSizes in favor of AvatarSize",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -33,7 +33,7 @@ export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefi
 // @internal (undocumented)
 export interface AvatarContextValue {
     // (undocumented)
-    size?: AvatarSizes;
+    size?: AvatarSize;
 }
 
 // @public
@@ -72,7 +72,7 @@ export type AvatarGroupItemSlots = {
 export type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
     isOverflowItem?: boolean;
     layout: AvatarGroupProps['layout'];
-    size: AvatarSizes;
+    size: AvatarSize;
 };
 
 // @public
@@ -101,13 +101,13 @@ export type AvatarGroupPopoverSlots = {
 export type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> & Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {
     popoverOpen: boolean;
     layout: AvatarGroupProps['layout'];
-    size: AvatarSizes;
+    size: AvatarSize;
 };
 
 // @public
 export type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
     layout?: 'spread' | 'stack' | 'pie';
-    size?: AvatarSizes;
+    size?: AvatarSize;
 };
 
 // @public (undocumented)
@@ -132,11 +132,14 @@ export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
     idForColor?: string | undefined;
     name?: string;
     shape?: 'circular' | 'square';
-    size?: AvatarSizes;
+    size?: AvatarSize;
 };
 
 // @public
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
+// @public @deprecated
+export type AvatarSizes = AvatarSize;
 
 // @public (undocumented)
 export type AvatarSlots = {

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

@@ -3,8 +3,13 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 
 /**
  * Sizes for the avatar
+ * @deprecated use AvatarSize instead
  */
-export type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+export type AvatarSizes = AvatarSize;
+/**
+ * Sizes for the avatar
+ */
+export type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
 export type AvatarSlots = {
   root: Slot<'span'>;
@@ -142,7 +147,7 @@ export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
    *
    * @default 32
    */
-  size?: AvatarSizes;
+  size?: AvatarSize;
 };
 
 /**

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

@@ -1,4 +1,4 @@
-import type { AvatarSizes } from '../Avatar/Avatar.types';
+import type { AvatarSize } from '../Avatar/Avatar.types';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type AvatarGroupSlots = {
@@ -19,7 +19,7 @@ export type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
    * Size of the AvatarGroupItems.
    * @default 32
    */
-  size?: AvatarSizes;
+  size?: AvatarSize;
 };
 
 /**

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

@@ -1,5 +1,5 @@
 import { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';
-import type { Avatar, AvatarSizes } from '../../Avatar';
+import type { Avatar, AvatarSize } from '../../Avatar';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 export type AvatarGroupItemSlots = {
@@ -34,5 +34,5 @@ export type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
   isOverflowItem?: boolean;
 
   layout: AvatarGroupProps['layout'];
-  size: AvatarSizes;
+  size: AvatarSize;
 };

packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts

@@ -4,7 +4,7 @@ import { useSizeStyles } from '../../Avatar';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';
 import type { AvatarGroupProps } from '../../AvatarGroup';
-import type { AvatarSizes } from '../../Avatar';
+import type { AvatarSize } from '../../Avatar';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {
@@ -228,7 +228,7 @@ export const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState):
  * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
  * needed for each layout.
  */
-export const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {
+export const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSize): string => {
   const stackStyles = useStackStyles();
   const spreadStyles = useSpreadStyles();
   const layoutClasses = [];

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AvatarSizes } from '../Avatar/Avatar.types';
+import type { AvatarSize } from '../Avatar/Avatar.types';
 import type { AvatarGroupProps } from '../AvatarGroup/AvatarGroup.types';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';
@@ -58,5 +58,5 @@ export type AvatarGroupPopoverState = ComponentState<AvatarGroupPopoverSlots> &
   Required<Pick<AvatarGroupPopoverProps, 'count' | 'indicator'>> & {
     popoverOpen: boolean;
     layout: AvatarGroupProps['layout'];
-    size: AvatarSizes;
+    size: AvatarSize;
   };

packages/react-components/react-avatar/src/contexts/AvatarContext.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { AvatarSizes } from '../components/Avatar/Avatar.types';
+import { AvatarSize } from '../components/Avatar/Avatar.types';
 
 const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
 
 /**
  * @internal
  */
 export interface AvatarContextValue {
-  size?: AvatarSizes;
+  size?: AvatarSize;
 }
 
 const avatarContextDefaultValue: AvatarContextValue = {};

packages/react-components/react-avatar/src/index.ts

@@ -5,7 +5,8 @@ export {
   useAvatarStyles_unstable,
   useAvatar_unstable,
 } from './Avatar';
-export type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';
+// eslint-disable-next-line deprecation/deprecation
+export type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes, AvatarSize } from './Avatar';
 export { getInitials, partitionAvatarGroupItems } from './utils/index';
 export type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';
 export {

packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx

@@ -6,7 +6,7 @@ import {
   makeStyles,
   partitionAvatarGroupItems,
 } from '@fluentui/react-components';
-import type { AvatarSizes } from '@fluentui/react-components';
+import type { AvatarSize } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
@@ -30,7 +30,7 @@ const names = [
   'Elliot Woodward',
 ];
 
-const sizes: AvatarSizes[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
+const sizes: AvatarSize[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
 
 export const SizePie = () => {
   const styles = useStyles();

packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx

@@ -6,7 +6,7 @@ import {
   makeStyles,
   partitionAvatarGroupItems,
 } from '@fluentui/react-components';
-import type { AvatarSizes } from '@fluentui/react-components';
+import type { AvatarSize } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
@@ -30,7 +30,7 @@ const names = [
   'Elliot Woodward',
 ];
 
-const sizes: AvatarSizes[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
+const sizes: AvatarSize[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
 
 export const SizeSpread = () => {
   const styles = useStyles();

packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx

@@ -6,7 +6,7 @@ import {
   makeStyles,
   partitionAvatarGroupItems,
 } from '@fluentui/react-components';
-import type { AvatarSizes } from '@fluentui/react-components';
+import type { AvatarSize } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
@@ -30,7 +30,7 @@ const names = [
   'Elliot Woodward',
 ];
 
-const sizes: AvatarSizes[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
+const sizes: AvatarSize[] = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
 
 export const SizeStack = () => {
   const styles = useStyles();

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

@@ -66,6 +66,7 @@ import { AvatarGroupSlots } from '@fluentui/react-avatar';
 import { AvatarGroupState } from '@fluentui/react-avatar';
 import { AvatarNamedColor } from '@fluentui/react-avatar';
 import { AvatarProps } from '@fluentui/react-avatar';
+import { AvatarSize } from '@fluentui/react-avatar';
 import { AvatarSizes } from '@fluentui/react-avatar';
 import { AvatarSlots } from '@fluentui/react-avatar';
 import { AvatarState } from '@fluentui/react-avatar';
@@ -817,6 +818,8 @@ export { AvatarNamedColor }
 
 export { AvatarProps }
 
+export { AvatarSize }
+
 export { AvatarSizes }
 
 export { AvatarSlots }

packages/react-components/react-components/src/index.ts

@@ -196,7 +196,10 @@ export {
 export type {
   AvatarNamedColor,
   AvatarProps,
+  // AvatarSizes is deprecated but removing it would be a breaking change
+  // eslint-disable-next-line deprecation/deprecation
   AvatarSizes,
+  AvatarSize,
   AvatarSlots,
   AvatarState,
   AvatarGroupProps,

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

@@ -7,7 +7,7 @@
 /// <reference types="react" />
 
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import type { AvatarSizes } from '@fluentui/react-avatar';
+import type { AvatarSize } from '@fluentui/react-avatar';
 import type { Checkbox } from '@fluentui/react-checkbox';
 import type { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
@@ -302,7 +302,7 @@ export type TableCellLayoutSlots = {
 
 // @public
 export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'> & {
-    avatarSize: AvatarSizes | undefined;
+    avatarSize: AvatarSize | undefined;
 } & Pick<TableContextValue, 'size'>;
 
 // @public

packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts

@@ -1,10 +1,10 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarSizes } from '@fluentui/react-avatar';
+import type { AvatarSize } from '@fluentui/react-avatar';
 import { TableContextValue } from '../Table/Table.types';
 
 export type TableCellLayoutContextValues = {
   avatar: {
-    size?: AvatarSizes;
+    size?: AvatarSize;
   };
 };
 
@@ -47,4 +47,4 @@ export type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>>
  * State used in rendering TableCellLayout
  */
 export type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &
-  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSizes | undefined } & Pick<TableContextValue, 'size'>;
+  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSize | undefined } & Pick<TableContextValue, 'size'>;

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

@@ -7,7 +7,7 @@
 /// <reference types="react" />
 
 import type { AvatarContextValue } from '@fluentui/react-avatar';
-import type { AvatarSizes } from '@fluentui/react-avatar';
+import type { AvatarSize } from '@fluentui/react-avatar';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -94,7 +94,7 @@ export type TreeItemPersonaLayoutSlots = {
 
 // @public
 export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & TreeItemContextValue & {
-    avatarSize: AvatarSizes;
+    avatarSize: AvatarSize;
 };
 
 // @public

packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { AvatarContextValue, AvatarSizes } from '@fluentui/react-avatar';
+import type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';
 import type { TreeItemContextValue } from '../../contexts/treeItemContext';
 
 export type TreeItemPersonaLayoutContextValues = {
@@ -40,5 +40,5 @@ export type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaL
  */
 export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> &
   TreeItemContextValue & {
-    avatarSize: AvatarSizes;
+    avatarSize: AvatarSize;
   };