diff --git a/change/@fluentui-react-avatar-29e5243e-cd62-4acb-8605-0b2f5b2d2de8.json b/change/@fluentui-react-avatar-29e5243e-cd62-4acb-8605-0b2f5b2d2de8.json new file mode 100644 index 0000000000000..96434efb8138e --- /dev/null +++ b/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": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-cf661b97-d1aa-4af8-a344-231de7d0a8cb.json b/change/@fluentui-react-components-cf661b97-d1aa-4af8-a344-231de7d0a8cb.json new file mode 100644 index 0000000000000..98f0adb9dee5e --- /dev/null +++ b/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": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-c53b834d-420e-4807-95cf-e9d6becd73a0.json b/change/@fluentui-react-table-c53b834d-420e-4807-95cf-e9d6becd73a0.json new file mode 100644 index 0000000000000..5238983490cd7 --- /dev/null +++ b/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": "bernardo.sunderhus@gmail.com", + "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 index 6807ec3426c70..a0a6b609aa9e8 100644 --- a/packages/react-components/react-avatar/etc/react-avatar.api.md +++ b/packages/react-components/react-avatar/etc/react-avatar.api.md @@ -33,7 +33,7 @@ export const AvatarContextProvider: React_2.Provider & { isOverflowItem?: boolean; layout: AvatarGroupProps['layout']; - size: AvatarSizes; + size: AvatarSize; }; // @public @@ -101,13 +101,13 @@ export type AvatarGroupPopoverSlots = { export type AvatarGroupPopoverState = ComponentState & Required> & { popoverOpen: boolean; layout: AvatarGroupProps['layout']; - size: AvatarSizes; + size: AvatarSize; }; // @public export type AvatarGroupProps = ComponentProps & { layout?: 'spread' | 'stack' | 'pie'; - size?: AvatarSizes; + size?: AvatarSize; }; // @public (undocumented) @@ -132,11 +132,14 @@ export type AvatarProps = Omit, '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 = { diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts b/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts index 1474b46dda127..50759ff500e7c 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts +++ b/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, 'color'> & { * * @default 32 */ - size?: AvatarSizes; + size?: AvatarSize; }; /** diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts index 9ac1e5d40b4df..bfa8e6265132d 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.types.ts +++ b/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 & { * Size of the AvatarGroupItems. * @default 32 */ - size?: AvatarSizes; + size?: AvatarSize; }; /** diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts index 57f428dded535..0bff2966c53b2 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.types.ts +++ b/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 & { isOverflowItem?: boolean; layout: AvatarGroupProps['layout']; - size: AvatarSizes; + size: AvatarSize; }; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index 4411a1c80d66e..1a23571e87f90 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/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 = { @@ -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 = []; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts index df5b413b1c876..9b8a03da601c2 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts +++ b/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 & Required> & { popoverOpen: boolean; layout: AvatarGroupProps['layout']; - size: AvatarSizes; + size: AvatarSize; }; diff --git a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts index 39bb4d84c93f8..8ce68e20285f3 100644 --- a/packages/react-components/react-avatar/src/contexts/AvatarContext.ts +++ b/packages/react-components/react-avatar/src/contexts/AvatarContext.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { AvatarSizes } from '../components/Avatar/Avatar.types'; +import { AvatarSize } from '../components/Avatar/Avatar.types'; const avatarContext = React.createContext(undefined); @@ -7,7 +7,7 @@ const avatarContext = React.createContext(undefi * @internal */ export interface AvatarContextValue { - size?: AvatarSizes; + size?: AvatarSize; } const avatarContextDefaultValue: AvatarContextValue = {}; diff --git a/packages/react-components/react-avatar/src/index.ts b/packages/react-components/react-avatar/src/index.ts index 4d6965e19d616..3093b679be158 100644 --- a/packages/react-components/react-avatar/src/index.ts +++ b/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 { diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx index 3114c8d7bc61a..28da4250419d5 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx +++ b/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(); diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx index 9aa18cddef469..6af901f1973f2 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx +++ b/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(); diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx index adbf2abd84289..2758ceb8ee852 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx +++ b/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(); diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index 2676ba4b88570..88a3c69e92568 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/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 } diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index ef64ed125d191..08e8efb99928e 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/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, diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index 3867e3db98e5e..5b491d75e0f72 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -7,7 +7,7 @@ /// 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 & Pick & { - avatarSize: AvatarSizes | undefined; + avatarSize: AvatarSize | undefined; } & Pick; // @public diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts index 2ccc64ee276f8..31c69d4ac6817 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts +++ b/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> * State used in rendering TableCellLayout */ export type TableCellLayoutState = ComponentState & - Pick & { avatarSize: AvatarSizes | undefined } & Pick; + Pick & { avatarSize: AvatarSize | undefined } & Pick; diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md index cd39b6db4037d..65d63023a682a 100644 --- a/packages/react-components/react-tree/etc/react-tree.api.md +++ b/packages/react-components/react-tree/etc/react-tree.api.md @@ -7,7 +7,7 @@ /// 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 & TreeItemContextValue & { - avatarSize: AvatarSizes; + avatarSize: AvatarSize; }; // @public diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts index 0524dae9cde43..bbcf990367f48 100644 --- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts +++ b/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 & TreeItemContextValue & { - avatarSize: AvatarSizes; + avatarSize: AvatarSize; };