From bc1684b9715ce94bfa701e52101ab485863de327 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 28 Sep 2022 22:46:54 -0600 Subject: [PATCH 01/10] feat: Move AvatarGroup to stable. --- .../react-avatar/README-AvatarGroup.md | 10 ----- .../AvatarGroup/AvatarGroupDescription.md | 13 ------- .../react-components/src/index.ts | 39 ++++++++++++++++++- .../react-components/src/unstable/index.ts | 30 -------------- 4 files changed, 38 insertions(+), 54 deletions(-) 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/stories/AvatarGroup/AvatarGroupDescription.md b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupDescription.md index 38e30edeffaa99..8014a06f48f019 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupDescription.md +++ b/packages/react-components/react-avatar/src/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-components/src/index.ts b/packages/react-components/react-components/src/index.ts index b6119bea1b5a40..56d6ddeca3a7e4 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -212,8 +212,45 @@ export { renderAvatar_unstable, useAvatar_unstable, useAvatarStyles_unstable, + AvatarGroup, + AvatarGroupItem, + AvatarGroupPopover, + AvatarGroupProvider, + avatarGroupClassNames, + avatarGroupItemClassNames, + avatarGroupPopoverClassNames, + partitionAvatarGroupItems, + renderAvatarGroup_unstable, + renderAvatarGroupItem_unstable, + renderAvatarGroupPopover_unstable, + useAvatarGroup_unstable, + useAvatarGroupContextValues, + useAvatarGroupContext_unstable, + useAvatarGroupItem_unstable, + useAvatarGroupItemStyles_unstable, + useAvatarGroupPopover_unstable, + useAvatarGroupPopoverStyles_unstable, + useAvatarGroupStyles_unstable, +} from '@fluentui/react-avatar'; +export type { + AvatarNamedColor, + AvatarProps, + AvatarSizes, + AvatarSlots, + AvatarState, + AvatarGroupContextValue, + AvatarGroupContextValues, + AvatarGroupProps, + AvatarGroupSlots, + AvatarGroupState, + AvatarGroupItemProps, + AvatarGroupItemSlots, + AvatarGroupItemState, + AvatarGroupPopoverProps, + AvatarGroupPopoverSlots, + AvatarGroupPopoverState, + 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 25549fa0ba925f..c1722fb5b023a5 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -8,36 +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, - 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, -} from '@fluentui/react-avatar'; export { Card, CardFooter, From b73d36904e505380b6fc38a9cf754ab465ff510f Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 28 Sep 2022 22:48:53 -0600 Subject: [PATCH 02/10] change files --- ...-react-avatar-c0c79f7a-dde2-4496-ac9a-65c54b51633f.json | 7 +++++++ ...ct-components-4f287412-156a-49e1-af2a-9d4aa2196c56.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-avatar-c0c79f7a-dde2-4496-ac9a-65c54b51633f.json create mode 100644 change/@fluentui-react-components-4f287412-156a-49e1-af2a-9d4aa2196c56.json 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" +} From 7814a5487f297cfb4cd9b04af6465802b35d601b Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 28 Sep 2022 22:55:28 -0600 Subject: [PATCH 03/10] updating api files --- .../etc/react-components.api.md | 93 +++++++++++++++++++ .../etc/react-components.unstable.api.md | 78 ---------------- 2 files changed, 93 insertions(+), 78 deletions(-) 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 9b1728c01f3f61..13375794fb7344 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'; @@ -223,6 +241,8 @@ 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 { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar'; import { Popover } from '@fluentui/react-popover'; import { PopoverContextValue } from '@fluentui/react-popover'; import { PopoverProps } from '@fluentui/react-popover'; @@ -268,6 +288,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'; @@ -427,6 +450,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'; @@ -615,6 +646,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 } @@ -973,6 +1040,10 @@ export { OpenPopoverEvents } export { PartialTheme } +export { partitionAvatarGroupItems } + +export { PartitionAvatarGroupItemsOptions } + export { Popover } export { PopoverContextValue } @@ -1063,6 +1134,12 @@ export { renderAccordionPanel_unstable } export { renderAvatar_unstable } +export { renderAvatarGroup_unstable } + +export { renderAvatarGroupItem_unstable } + +export { renderAvatarGroupPopover_unstable } + export { renderBadge_unstable } export { renderButton_unstable } @@ -1381,6 +1458,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 b77fe0a9349923..c13ac46befcb67 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'; @@ -141,9 +125,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'; @@ -262,13 +243,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'; @@ -339,38 +313,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 } @@ -603,12 +545,6 @@ export { RadioGroupFieldProps } export { renderAlert_unstable } -export { renderAvatarGroup_unstable } - -export { renderAvatarGroupItem_unstable } - -export { renderAvatarGroupPopover_unstable } - export { renderCard_unstable } export { renderCardFooter_unstable } @@ -845,20 +781,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 } From dcaca553df2c497a2ac7b38bf00836cce41744e8 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 01:08:08 -0600 Subject: [PATCH 04/10] replacing react-avatar exports for react-components in stories --- .../src/stories/Avatar/AvatarActive.stories.tsx | 2 +- .../stories/Avatar/AvatarActiveAppearance.stories.tsx | 2 +- .../src/stories/Avatar/AvatarBadge.stories.tsx | 2 +- .../src/stories/Avatar/AvatarColorBrand.stories.tsx | 2 +- .../stories/Avatar/AvatarColorColorful.stories.tsx | 2 +- .../src/stories/Avatar/AvatarColorPalette.stories.tsx | 2 +- .../src/stories/Avatar/AvatarDefault.stories.tsx | 2 +- .../src/stories/Avatar/AvatarIcon.stories.tsx | 2 +- .../src/stories/Avatar/AvatarImage.stories.tsx | 2 +- .../src/stories/Avatar/AvatarInitials.stories.tsx | 2 +- .../src/stories/Avatar/AvatarName.stories.tsx | 2 +- .../src/stories/Avatar/AvatarSize.stories.tsx | 2 +- .../src/stories/Avatar/AvatarSquare.stories.tsx | 2 +- .../react-avatar/src/stories/Avatar/index.stories.tsx | 2 +- .../AvatarGroup/AvatarGroupDefault.stories.tsx | 9 +++++++-- .../AvatarGroup/AvatarGroupIndicator.stories.tsx | 9 +++++++-- .../stories/AvatarGroup/AvatarGroupLayout.stories.tsx | 9 +++++++-- .../AvatarGroup/AvatarGroupSizePie.stories.tsx | 11 ++++++++--- .../AvatarGroup/AvatarGroupSizeSpread.stories.tsx | 11 ++++++++--- .../AvatarGroup/AvatarGroupSizeStack.stories.tsx | 11 ++++++++--- 20 files changed, 59 insertions(+), 29 deletions(-) diff --git a/packages/react-components/react-avatar/src/stories/Avatar/AvatarActive.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarActive.stories.tsx index db579aab5680d4..22173fd6b13c50 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarActive.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarActiveAppearance.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarActiveAppearance.stories.tsx index 69616d8bd3e0fd..108fe31f9d7843 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarActiveAppearance.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarBadge.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarBadge.stories.tsx index 441069fe4b0775..b0f48113fbf470 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarBadge.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarColorBrand.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarColorBrand.stories.tsx index 7a0100e620029e..cb43d38e6706d5 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarColorBrand.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarColorColorful.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarColorColorful.stories.tsx index 0641c4a4bd51e5..82f470e64920de 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarColorColorful.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarColorPalette.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarColorPalette.stories.tsx index 41554791b15f29..e8031cf2025253 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarColorPalette.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarDefault.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarDefault.stories.tsx index cc36159f42d51c..a4e1904440c31d 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarDefault.stories.tsx +++ b/packages/react-components/react-avatar/src/stories/Avatar/AvatarDefault.stories.tsx @@ -1,6 +1,6 @@ import { ArgTypes } from '@storybook/api'; import * as React from 'react'; -import { Avatar, AvatarProps } from '@fluentui/react-avatar'; +import { Avatar, AvatarProps } from '@fluentui/react-components'; export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-avatar/src/stories/Avatar/AvatarIcon.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarIcon.stories.tsx index e975c1c07b91c8..aea20df3b601b1 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarIcon.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarImage.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarImage.stories.tsx index 9162ce1c718370..1e712b4abd8f26 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarImage.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarName.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarName.stories.tsx index b347117f836b66..0ac56f889ee9fe 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarName.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarSize.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarSize.stories.tsx index e926684c56d976..753c3f69a3bb78 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarSize.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/AvatarSquare.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/AvatarSquare.stories.tsx index a41652a2d5aff9..4f2f4b278eb830 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/AvatarSquare.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/Avatar/index.stories.tsx b/packages/react-components/react-avatar/src/stories/Avatar/index.stories.tsx index 3bbc9c1061202b..df0f43825ef5a3 100644 --- a/packages/react-components/react-avatar/src/stories/Avatar/index.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/AvatarGroup/AvatarGroupDefault.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupDefault.stories.tsx index 32424d0a925758..764f888f1baedf 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupDefault.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx index 875a55ba534e2f..bb13b3d7c02559 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx index 223a7a692ec643..89ebe835772762 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx index c3346b9dad6ede..75d4bb69aebbdf 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx index 926e8332c15f66..12f9683e9dcfcf 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx +++ b/packages/react-components/react-avatar/src/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/src/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx index 9d3d7a96e4ea43..2c9d34557c5bd0 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx +++ b/packages/react-components/react-avatar/src/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: { From 10a7be2dc782aec15fcf278159f846b8737f43ae Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 01:55:40 -0600 Subject: [PATCH 05/10] replacing react-avatar import for react-component --- .../react-avatar/src/stories/AvatarGroup/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx index 841bf9580cabb5..e9db1aae5e46ca 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx +++ b/packages/react-components/react-avatar/src/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'; From 30fc1c9e2672abaa516d57140623f2f1cca1fc8c Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 29 Sep 2022 02:19:54 -0600 Subject: [PATCH 06/10] removing preview from docs --- .../react-avatar/src/stories/AvatarGroup/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx index e9db1aae5e46ca..1336166350ba25 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.tsx @@ -11,7 +11,7 @@ export { SizePie } from './AvatarGroupSizePie.stories'; export { Indicator } from './AvatarGroupIndicator.stories'; export default { - title: 'Preview Components/AvatarGroup', + title: 'Components/AvatarGroup', component: AvatarGroup, parameters: { docs: { From a65416462dad5737f9fd620177c3216e7e2b67c9 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 9 Nov 2022 10:33:57 -0700 Subject: [PATCH 07/10] adding missing exports --- .../react-avatar/src/index.ts | 4 +- .../etc/react-components.unstable.api.md | 78 +++++++++++++++++++ .../react-components/src/index.ts | 28 +++---- .../react-components/src/unstable/index.ts | 33 -------- 4 files changed, 95 insertions(+), 48 deletions(-) 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-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 618011b23ac494..284fa37ded125e 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,6 +9,22 @@ 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'; @@ -108,6 +124,9 @@ 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'; @@ -226,6 +245,13 @@ 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'; @@ -292,6 +318,38 @@ 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 } @@ -490,6 +548,12 @@ export { RadioGroupFieldProps } export { renderAlert_unstable } +export { renderAvatarGroup_unstable } + +export { renderAvatarGroupItem_unstable } + +export { renderAvatarGroupPopover_unstable } + export { renderCard_unstable } export { renderCardFooter_unstable } @@ -727,6 +791,20 @@ 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 a0b301784491fe..2a70165619e4b8 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -213,24 +213,25 @@ export { useAvatar_unstable, useAvatarStyles_unstable, AvatarGroup, - AvatarGroupItem, - AvatarGroupPopover, - AvatarGroupProvider, avatarGroupClassNames, + AvatarGroupItem, avatarGroupItemClassNames, + AvatarGroupPopover, avatarGroupPopoverClassNames, - partitionAvatarGroupItems, + AvatarGroupProvider, renderAvatarGroup_unstable, - renderAvatarGroupItem_unstable, - renderAvatarGroupPopover_unstable, - useAvatarGroup_unstable, useAvatarGroupContextValues, - useAvatarGroupContext_unstable, - useAvatarGroupItem_unstable, + useAvatarGroupStyles_unstable, + useAvatarGroup_unstable, + renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, - useAvatarGroupPopover_unstable, + useAvatarGroupItem_unstable, + renderAvatarGroupPopover_unstable, useAvatarGroupPopoverStyles_unstable, - useAvatarGroupStyles_unstable, + useAvatarGroupPopover_unstable, + useAvatarContext, + useAvatarGroupContext_unstable, + partitionAvatarGroupItems, } from '@fluentui/react-avatar'; export type { AvatarNamedColor, @@ -238,8 +239,6 @@ export type { AvatarSizes, AvatarSlots, AvatarState, - AvatarGroupContextValue, - AvatarGroupContextValues, AvatarGroupProps, AvatarGroupSlots, AvatarGroupState, @@ -249,6 +248,9 @@ export type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState, + AvatarGroupContextValue, + AvatarGroupContextValues, + PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions, } from '@fluentui/react-avatar'; export { 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, From ceefa67461a5201275af14d6091afef5376af30a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 9 Nov 2022 10:43:01 -0700 Subject: [PATCH 08/10] restoring migration guide --- packages/react-components/react-persona/MIGRATION.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 57e145ba51c7a2..697c575bbd7365 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -13,7 +13,6 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - ``` ``` - - `imageShouldFadeIn` => NOT SUPPORTED - `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}` - `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}` From 102257e4dcb92bc648b610aef33118073ea0929e Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 9 Nov 2022 11:08:24 -0700 Subject: [PATCH 09/10] updating apis --- .../etc/react-components.api.md | 3 + .../etc/react-components.unstable.api.md | 87 ------------------- .../react-components/src/index.ts | 1 - 3 files changed, 3 insertions(+), 88 deletions(-) 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 c453c0093eeef3..bb89ccad1f4e92 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -278,6 +278,7 @@ 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'; @@ -1176,6 +1177,8 @@ export { OpenPopoverEvents } export { PartialTheme } +export { PartitionAvatarGroupItems } + export { partitionAvatarGroupItems } export { PartitionAvatarGroupItemsOptions } 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 2a70165619e4b8..d24a8bc7e75825 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -229,7 +229,6 @@ export { renderAvatarGroupPopover_unstable, useAvatarGroupPopoverStyles_unstable, useAvatarGroupPopover_unstable, - useAvatarContext, useAvatarGroupContext_unstable, partitionAvatarGroupItems, } from '@fluentui/react-avatar'; From 0a8776e8f9cab35ff13ab66a1436f1df6a12f10b Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 9 Nov 2022 16:32:51 -0700 Subject: [PATCH 10/10] add requested changes --- .../react-avatar/stories/Avatar/AvatarDefault.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 a4e1904440c31d..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-components'; +import { Avatar } from '@fluentui/react-components'; +import type { AvatarProps } from '@fluentui/react-components'; export const Default = (props: Partial) => ;