diff --git a/change/@fluentui-react-avatar-c0c79f7a-dde2-4496-ac9a-65c54b51633f.json b/change/@fluentui-react-avatar-c0c79f7a-dde2-4496-ac9a-65c54b51633f.json new file mode 100644 index 00000000000000..24172f4ba1c690 --- /dev/null +++ b/change/@fluentui-react-avatar-c0c79f7a-dde2-4496-ac9a-65c54b51633f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Remove AvatarGroup unstable warnings.", + "packageName": "@fluentui/react-avatar", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-4f287412-156a-49e1-af2a-9d4aa2196c56.json b/change/@fluentui-react-components-4f287412-156a-49e1-af2a-9d4aa2196c56.json new file mode 100644 index 00000000000000..db4eff2ffa98d7 --- /dev/null +++ b/change/@fluentui-react-components-4f287412-156a-49e1-af2a-9d4aa2196c56.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Move AvatarGroup to stable.", + "packageName": "@fluentui/react-components", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/README-AvatarGroup.md b/packages/react-components/react-avatar/README-AvatarGroup.md index ffcedd77407787..ec30506b1bc247 100644 --- a/packages/react-components/react-avatar/README-AvatarGroup.md +++ b/packages/react-components/react-avatar/README-AvatarGroup.md @@ -4,20 +4,10 @@ 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. -## STATUS: WIP 🚧 - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. - ## Usage To import AvatarGroup, AvatarGroupItem, AvatarGroupPopover, and partitionAvatarGroupItems: -```js -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -``` - -Once the AvatarGroup component graduates to a production release, the component will be available at: - ```js import { AvatarGroup, diff --git a/packages/react-components/react-avatar/src/index.ts b/packages/react-components/react-avatar/src/index.ts index 9bf255a845f582..4d6965e19d616d 100644 --- a/packages/react-components/react-avatar/src/index.ts +++ b/packages/react-components/react-avatar/src/index.ts @@ -40,9 +40,9 @@ export { } from './AvatarGroupPopover'; export type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover'; export { - AvatarGroupProvider, - useAvatarGroupContext_unstable, AvatarContextProvider, + AvatarGroupProvider, useAvatarContext, + useAvatarGroupContext_unstable, } from './contexts/index'; export type { AvatarContextValue } from './contexts/index'; diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarActive.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarActive.stories.tsx index db579aab5680d4..22173fd6b13c50 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarActive.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarActive.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const Active = () => (
diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarActiveAppearance.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarActiveAppearance.stories.tsx index 69616d8bd3e0fd..108fe31f9d7843 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarActiveAppearance.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarActiveAppearance.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const ActiveAppearance = () => (
diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx index 441069fe4b0775..b0f48113fbf470 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const Badge = () => ( <> diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarColorBrand.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarColorBrand.stories.tsx index 7a0100e620029e..cb43d38e6706d5 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarColorBrand.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarColorBrand.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const ColorBrand = () => ; diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarColorColorful.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarColorColorful.stories.tsx index 0641c4a4bd51e5..82f470e64920de 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarColorColorful.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarColorColorful.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; import { GuestRegular } from '@fluentui/react-icons'; export const ColorColorful = () => ( diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarColorPalette.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarColorPalette.stories.tsx index 41554791b15f29..e8031cf2025253 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarColorPalette.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarColorPalette.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const ColorPalette = () => ( <> diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarDefault.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarDefault.stories.tsx index cc36159f42d51c..7791967d60bb06 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarDefault.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarDefault.stories.tsx @@ -1,6 +1,7 @@ import { ArgTypes } from '@storybook/api'; import * as React from 'react'; -import { Avatar, AvatarProps } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; +import type { AvatarProps } from '@fluentui/react-components'; export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarIcon.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarIcon.stories.tsx index e975c1c07b91c8..aea20df3b601b1 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarIcon.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarIcon.stories.tsx @@ -9,7 +9,7 @@ import { PersonCallRegular, } from '@fluentui/react-icons'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const Icon = () => ( <> diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarImage.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarImage.stories.tsx index 9162ce1c718370..1e712b4abd8f26 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarImage.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarImage.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const Image = () => ( ; diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarName.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarName.stories.tsx index b347117f836b66..0ac56f889ee9fe 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarName.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarName.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const Name = () => ; diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarSize.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarSize.stories.tsx index e926684c56d976..753c3f69a3bb78 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarSize.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarSize.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; export const Size = () => ( <> diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarSquare.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarSquare.stories.tsx index a41652a2d5aff9..4f2f4b278eb830 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarSquare.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarSquare.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; import { PeopleTeamRegular } from '@fluentui/react-icons'; export const Square = () => } />; diff --git a/packages/react-components/react-avatar/stories/Avatar/index.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/index.stories.tsx index 3bbc9c1061202b..df0f43825ef5a3 100644 --- a/packages/react-components/react-avatar/stories/Avatar/index.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/index.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar } from '@fluentui/react-avatar'; +import { Avatar } from '@fluentui/react-components'; import { Meta } from '@storybook/react'; export { Default } from './AvatarDefault.stories'; diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDefault.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDefault.stories.tsx index 6005c35e96ffdb..c4757cc1502092 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDefault.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDefault.stories.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import type { AvatarGroupProps } from '@fluentui/react-avatar'; +import { + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + partitionAvatarGroupItems, +} from '@fluentui/react-components'; +import type { AvatarGroupProps } from '@fluentui/react-components'; const names = [ 'Johnie McConnell', diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDescription.md b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDescription.md index 38e30edeffaa99..8014a06f48f019 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDescription.md +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupDescription.md @@ -1,15 +1,2 @@ An AvatarGroup is a graphical representation of multiple people associated with a given entity. AvatarGroup leverages the Avatar component, with each Avatar representing a person and containing their image, initials, or an icon. An AvatarGroup can be represented in a spread, stack, or pie layout. - - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover } from '@fluentui/react-components/unstable'; -> -> ``` -> -> - Features and APIs may change before final release -> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx index bca72cc72a5a12..09e98678c1938d 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { makeStyles } from '@fluentui/react-components'; +import { + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + makeStyles, + partitionAvatarGroupItems, +} from '@fluentui/react-components'; const useStyles = makeStyles({ root: { diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupLayout.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupLayout.stories.tsx index ffc79ae266ccc7..1bd8090da7faf3 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupLayout.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupLayout.stories.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { makeStyles } from '@fluentui/react-components'; +import { + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + makeStyles, + partitionAvatarGroupItems, +} from '@fluentui/react-components'; const useStyles = makeStyles({ root: { 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 2fcd3fbe8450a1..3114c8d7bc61a9 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx @@ -1,7 +1,12 @@ import * as React from 'react'; -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { makeStyles } from '@fluentui/react-components'; -import type { AvatarSizes } from '@fluentui/react-avatar'; +import { + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + makeStyles, + partitionAvatarGroupItems, +} from '@fluentui/react-components'; +import type { AvatarSizes } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { 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 f84fe857908fdd..9aa18cddef469b 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx @@ -1,7 +1,12 @@ import * as React from 'react'; -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { makeStyles } from '@fluentui/react-components'; -import type { AvatarSizes } from '@fluentui/react-avatar'; +import { + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + makeStyles, + partitionAvatarGroupItems, +} from '@fluentui/react-components'; +import type { AvatarSizes } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { 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 bd6cd3b12ec41c..adbf2abd84289f 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx @@ -1,7 +1,12 @@ import * as React from 'react'; -import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { makeStyles } from '@fluentui/react-components'; -import type { AvatarSizes } from '@fluentui/react-avatar'; +import { + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + makeStyles, + partitionAvatarGroupItems, +} from '@fluentui/react-components'; +import type { AvatarSizes } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { diff --git a/packages/react-components/react-avatar/stories/AvatarGroup/index.stories.tsx b/packages/react-components/react-avatar/stories/AvatarGroup/index.stories.tsx index 11afee06493add..2e6ef64334327f 100644 --- a/packages/react-components/react-avatar/stories/AvatarGroup/index.stories.tsx +++ b/packages/react-components/react-avatar/stories/AvatarGroup/index.stories.tsx @@ -1,4 +1,4 @@ -import { AvatarGroup } from '@fluentui/react-avatar'; +import { AvatarGroup } from '@fluentui/react-components'; import bestPracticesMd from './AvatarGroupBestPractices.md'; import descriptionMd from './AvatarGroupDescription.md'; @@ -11,7 +11,7 @@ export { SizeStack } from './AvatarGroupSizeStack.stories'; export { SizePie } from './AvatarGroupSizePie.stories'; export default { - title: 'Preview Components/AvatarGroup', + title: 'Components/AvatarGroup', component: AvatarGroup, parameters: { docs: { 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 d1a9fc58e1e1d5..bb89ccad1f4e92 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -44,6 +44,24 @@ import { AccordionToggleEventHandler } from '@fluentui/react-accordion'; import { arrowHeights } from '@fluentui/react-popover'; import { Avatar } from '@fluentui/react-avatar'; import { avatarClassNames } from '@fluentui/react-avatar'; +import { AvatarGroup } from '@fluentui/react-avatar'; +import { avatarGroupClassNames } from '@fluentui/react-avatar'; +import { AvatarGroupContextValue } from '@fluentui/react-avatar'; +import { AvatarGroupContextValues } from '@fluentui/react-avatar'; +import { AvatarGroupItem } from '@fluentui/react-avatar'; +import { avatarGroupItemClassNames } from '@fluentui/react-avatar'; +import { AvatarGroupItemProps } from '@fluentui/react-avatar'; +import { AvatarGroupItemSlots } from '@fluentui/react-avatar'; +import { AvatarGroupItemState } from '@fluentui/react-avatar'; +import { AvatarGroupPopover } from '@fluentui/react-avatar'; +import { avatarGroupPopoverClassNames } from '@fluentui/react-avatar'; +import { AvatarGroupPopoverProps } from '@fluentui/react-avatar'; +import { AvatarGroupPopoverSlots } from '@fluentui/react-avatar'; +import { AvatarGroupPopoverState } from '@fluentui/react-avatar'; +import { AvatarGroupProps } from '@fluentui/react-avatar'; +import { AvatarGroupProvider } from '@fluentui/react-avatar'; +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 { AvatarSizes } from '@fluentui/react-avatar'; @@ -260,6 +278,9 @@ import { OnOpenChangeData } from '@fluentui/react-popover'; import { OnVisibleChangeData } from '@fluentui/react-tooltip'; import { OpenPopoverEvents } from '@fluentui/react-popover'; import { PartialTheme } from '@fluentui/react-theme'; +import { PartitionAvatarGroupItems } from '@fluentui/react-avatar'; +import { partitionAvatarGroupItems } from '@fluentui/react-avatar'; +import { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar'; import { Popover } from '@fluentui/react-popover'; import { PopoverContextValue } from '@fluentui/react-popover'; import { PopoverProps } from '@fluentui/react-popover'; @@ -309,6 +330,9 @@ import { renderAccordionHeader_unstable } from '@fluentui/react-accordion'; import { renderAccordionItem_unstable } from '@fluentui/react-accordion'; import { renderAccordionPanel_unstable } from '@fluentui/react-accordion'; import { renderAvatar_unstable } from '@fluentui/react-avatar'; +import { renderAvatarGroup_unstable } from '@fluentui/react-avatar'; +import { renderAvatarGroupItem_unstable } from '@fluentui/react-avatar'; +import { renderAvatarGroupPopover_unstable } from '@fluentui/react-avatar'; import { renderBadge_unstable } from '@fluentui/react-badge'; import { renderButton_unstable } from '@fluentui/react-button'; import { renderCheckbox_unstable } from '@fluentui/react-checkbox'; @@ -476,6 +500,14 @@ import { useAccordionStyles_unstable } from '@fluentui/react-accordion'; import { useArrowNavigationGroup } from '@fluentui/react-tabster'; import { UseArrowNavigationGroupOptions } from '@fluentui/react-tabster'; import { useAvatar_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroup_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroupContext_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroupContextValues } from '@fluentui/react-avatar'; +import { useAvatarGroupItem_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroupItemStyles_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroupPopover_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroupPopoverStyles_unstable } from '@fluentui/react-avatar'; +import { useAvatarGroupStyles_unstable } from '@fluentui/react-avatar'; import { useAvatarStyles_unstable } from '@fluentui/react-avatar'; import { useBadge_unstable } from '@fluentui/react-badge'; import { useBadgeStyles_unstable } from '@fluentui/react-badge'; @@ -677,6 +709,42 @@ export { Avatar } export { avatarClassNames } +export { AvatarGroup } + +export { avatarGroupClassNames } + +export { AvatarGroupContextValue } + +export { AvatarGroupContextValues } + +export { AvatarGroupItem } + +export { avatarGroupItemClassNames } + +export { AvatarGroupItemProps } + +export { AvatarGroupItemSlots } + +export { AvatarGroupItemState } + +export { AvatarGroupPopover } + +export { avatarGroupPopoverClassNames } + +export { AvatarGroupPopoverProps } + +export { AvatarGroupPopoverSlots } + +export { AvatarGroupPopoverState } + +export { AvatarGroupProps } + +export { AvatarGroupProvider } + +export { AvatarGroupSlots } + +export { AvatarGroupState } + export { AvatarNamedColor } export { AvatarProps } @@ -1109,6 +1177,12 @@ export { OpenPopoverEvents } export { PartialTheme } +export { PartitionAvatarGroupItems } + +export { partitionAvatarGroupItems } + +export { PartitionAvatarGroupItemsOptions } + export { Popover } export { PopoverContextValue } @@ -1207,6 +1281,12 @@ export { renderAccordionPanel_unstable } export { renderAvatar_unstable } +export { renderAvatarGroup_unstable } + +export { renderAvatarGroupItem_unstable } + +export { renderAvatarGroupPopover_unstable } + export { renderBadge_unstable } export { renderButton_unstable } @@ -1541,6 +1621,22 @@ export { UseArrowNavigationGroupOptions } export { useAvatar_unstable } +export { useAvatarGroup_unstable } + +export { useAvatarGroupContext_unstable } + +export { useAvatarGroupContextValues } + +export { useAvatarGroupItem_unstable } + +export { useAvatarGroupItemStyles_unstable } + +export { useAvatarGroupPopover_unstable } + +export { useAvatarGroupPopoverStyles_unstable } + +export { useAvatarGroupStyles_unstable } + export { useAvatarStyles_unstable } export { useBadge_unstable } diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 284fa37ded125e..9af647f0b2ad17 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -9,22 +9,6 @@ import { alertClassNames } from '@fluentui/react-alert'; import { AlertProps } from '@fluentui/react-alert'; import { AlertSlots } from '@fluentui/react-alert'; import { AlertState } from '@fluentui/react-alert'; -import { AvatarGroup } from '@fluentui/react-avatar'; -import { avatarGroupClassNames } from '@fluentui/react-avatar'; -import { AvatarGroupItem } from '@fluentui/react-avatar'; -import { avatarGroupItemClassNames } from '@fluentui/react-avatar'; -import { AvatarGroupItemProps } from '@fluentui/react-avatar'; -import { AvatarGroupItemSlots } from '@fluentui/react-avatar'; -import { AvatarGroupItemState } from '@fluentui/react-avatar'; -import { AvatarGroupPopover } from '@fluentui/react-avatar'; -import { avatarGroupPopoverClassNames } from '@fluentui/react-avatar'; -import { AvatarGroupPopoverProps } from '@fluentui/react-avatar'; -import { AvatarGroupPopoverSlots } from '@fluentui/react-avatar'; -import { AvatarGroupPopoverState } from '@fluentui/react-avatar'; -import { AvatarGroupProps } from '@fluentui/react-avatar'; -import { AvatarGroupProvider } from '@fluentui/react-avatar'; -import { AvatarGroupSlots } from '@fluentui/react-avatar'; -import { AvatarGroupState } from '@fluentui/react-avatar'; import { Card } from '@fluentui/react-card'; import { cardClassNames } from '@fluentui/react-card'; import { cardCSSVars } from '@fluentui/react-card'; @@ -104,9 +88,6 @@ import { Overflow } from '@fluentui/react-overflow'; import { OverflowItem } from '@fluentui/react-overflow'; import { OverflowItemProps } from '@fluentui/react-overflow'; import { OverflowProps } from '@fluentui/react-overflow'; -import { PartitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { partitionAvatarGroupItems } from '@fluentui/react-avatar'; -import { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar'; import { Persona } from '@fluentui/react-persona'; import { personaClassNames } from '@fluentui/react-persona'; import { PersonaProps } from '@fluentui/react-persona'; @@ -124,9 +105,6 @@ import { RadioGroupField } from '@fluentui/react-field'; import { radioGroupFieldClassNames } from '@fluentui/react-field'; import { RadioGroupFieldProps } from '@fluentui/react-field'; import { renderAlert_unstable } from '@fluentui/react-alert'; -import { renderAvatarGroup_unstable } from '@fluentui/react-avatar'; -import { renderAvatarGroupItem_unstable } from '@fluentui/react-avatar'; -import { renderAvatarGroupPopover_unstable } from '@fluentui/react-avatar'; import { renderCard_unstable } from '@fluentui/react-card'; import { renderCardFooter_unstable } from '@fluentui/react-card'; import { renderCardHeader_unstable } from '@fluentui/react-card'; @@ -245,13 +223,6 @@ import { ToolbarToggleButtonProps } from '@fluentui/react-toolbar'; import { ToolbarToggleButtonState } from '@fluentui/react-toolbar'; import { useAlert_unstable } from '@fluentui/react-alert'; import { useAlertStyles_unstable } from '@fluentui/react-alert'; -import { useAvatarGroup_unstable } from '@fluentui/react-avatar'; -import { useAvatarGroupContext_unstable } from '@fluentui/react-avatar'; -import { useAvatarGroupItem_unstable } from '@fluentui/react-avatar'; -import { useAvatarGroupItemStyles_unstable } from '@fluentui/react-avatar'; -import { useAvatarGroupPopover_unstable } from '@fluentui/react-avatar'; -import { useAvatarGroupPopoverStyles_unstable } from '@fluentui/react-avatar'; -import { useAvatarGroupStyles_unstable } from '@fluentui/react-avatar'; import { useCard_unstable } from '@fluentui/react-card'; import { useCardFooter_unstable } from '@fluentui/react-card'; import { useCardFooterStyles_unstable } from '@fluentui/react-card'; @@ -318,38 +289,6 @@ export { AlertSlots } export { AlertState } -export { AvatarGroup } - -export { avatarGroupClassNames } - -export { AvatarGroupItem } - -export { avatarGroupItemClassNames } - -export { AvatarGroupItemProps } - -export { AvatarGroupItemSlots } - -export { AvatarGroupItemState } - -export { AvatarGroupPopover } - -export { avatarGroupPopoverClassNames } - -export { AvatarGroupPopoverProps } - -export { AvatarGroupPopoverSlots } - -export { AvatarGroupPopoverState } - -export { AvatarGroupProps } - -export { AvatarGroupProvider } - -export { AvatarGroupSlots } - -export { AvatarGroupState } - export { Card } export { cardClassNames } @@ -508,12 +447,6 @@ export { OverflowItemProps } export { OverflowProps } -export { PartitionAvatarGroupItems } - -export { partitionAvatarGroupItems } - -export { PartitionAvatarGroupItemsOptions } - export { Persona } export { personaClassNames } @@ -548,12 +481,6 @@ export { RadioGroupFieldProps } export { renderAlert_unstable } -export { renderAvatarGroup_unstable } - -export { renderAvatarGroupItem_unstable } - -export { renderAvatarGroupPopover_unstable } - export { renderCard_unstable } export { renderCardFooter_unstable } @@ -791,20 +718,6 @@ export { useAlert_unstable } export { useAlertStyles_unstable } -export { useAvatarGroup_unstable } - -export { useAvatarGroupContext_unstable } - -export { useAvatarGroupItem_unstable } - -export { useAvatarGroupItemStyles_unstable } - -export { useAvatarGroupPopover_unstable } - -export { useAvatarGroupPopoverStyles_unstable } - -export { useAvatarGroupStyles_unstable } - export { useCard_unstable } export { useCardFooter_unstable } diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index d0a6c3c32f7fcb..d24a8bc7e75825 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -212,8 +212,46 @@ export { renderAvatar_unstable, useAvatar_unstable, useAvatarStyles_unstable, + AvatarGroup, + avatarGroupClassNames, + AvatarGroupItem, + avatarGroupItemClassNames, + AvatarGroupPopover, + avatarGroupPopoverClassNames, + AvatarGroupProvider, + renderAvatarGroup_unstable, + useAvatarGroupContextValues, + useAvatarGroupStyles_unstable, + useAvatarGroup_unstable, + renderAvatarGroupItem_unstable, + useAvatarGroupItemStyles_unstable, + useAvatarGroupItem_unstable, + renderAvatarGroupPopover_unstable, + useAvatarGroupPopoverStyles_unstable, + useAvatarGroupPopover_unstable, + useAvatarGroupContext_unstable, + partitionAvatarGroupItems, +} from '@fluentui/react-avatar'; +export type { + AvatarNamedColor, + AvatarProps, + AvatarSizes, + AvatarSlots, + AvatarState, + AvatarGroupProps, + AvatarGroupSlots, + AvatarGroupState, + AvatarGroupItemProps, + AvatarGroupItemSlots, + AvatarGroupItemState, + AvatarGroupPopoverProps, + AvatarGroupPopoverSlots, + AvatarGroupPopoverState, + AvatarGroupContextValue, + AvatarGroupContextValues, + PartitionAvatarGroupItems, + PartitionAvatarGroupItemsOptions, } from '@fluentui/react-avatar'; -export type { AvatarNamedColor, AvatarProps, AvatarSizes, AvatarSlots, AvatarState } from '@fluentui/react-avatar'; export { Badge, CounterBadge, diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 64f5386ebd9bd3..ed01358d28d92f 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -8,39 +8,6 @@ export { useAlert_unstable, } from '@fluentui/react-alert'; export type { AlertProps, AlertSlots, AlertState } from '@fluentui/react-alert'; -export { - AvatarGroup, - AvatarGroupItem, - AvatarGroupPopover, - AvatarGroupProvider, - avatarGroupClassNames, - avatarGroupItemClassNames, - avatarGroupPopoverClassNames, - partitionAvatarGroupItems, - renderAvatarGroup_unstable, - renderAvatarGroupItem_unstable, - renderAvatarGroupPopover_unstable, - useAvatarGroup_unstable, - useAvatarGroupContext_unstable, - useAvatarGroupItem_unstable, - useAvatarGroupItemStyles_unstable, - useAvatarGroupPopover_unstable, - useAvatarGroupPopoverStyles_unstable, - useAvatarGroupStyles_unstable, -} from '@fluentui/react-avatar'; -export type { - AvatarGroupProps, - AvatarGroupSlots, - AvatarGroupState, - AvatarGroupItemProps, - AvatarGroupItemSlots, - AvatarGroupItemState, - AvatarGroupPopoverProps, - AvatarGroupPopoverSlots, - AvatarGroupPopoverState, - PartitionAvatarGroupItems, - PartitionAvatarGroupItemsOptions, -} from '@fluentui/react-avatar'; export { Card, CardFooter,