microsoft · sopranopillow · Nov 10, 2022 · Sep 29, 2022 · Sep 29, 2022 · Sep 29, 2022
diff --git a/change/@fluentui-react-avatar-c0c79f7a-dde2-4496-ac9a-65c54b51633f.json 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": "[email protected]",
+  "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
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Move AvatarGroup to stable.",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -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,

@@ -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';
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const Active = () => (
   <div style={{ display: 'flex', gap: '20px' }}>

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const ActiveAppearance = () => (
   <div style={{ display: 'flex', gap: '20px' }}>

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const Badge = () => (
   <>

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const ColorBrand = () => <Avatar color="brand" initials="BR" name="brand color avatar" />;
 

@@ -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 = () => (

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const ColorPalette = () => (
   <>

@@ -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<AvatarProps>) => <Avatar aria-label="Guest" {...props} />;
 

@@ -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 = () => (
   <>

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const Image = () => (
   <Avatar

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const Initials = () => <Avatar name="Cecil Robin Folk" initials="CRF" />;
 

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const Name = () => <Avatar name="Ashley McCarthy" />;
 

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@fluentui/react-avatar';
+import { Avatar } from '@fluentui/react-components';
 
 export const Size = () => (
   <>

@@ -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 = () => <Avatar shape="square" aria-label="square avatar" icon={<PeopleTeamRegular />} />;

@@ -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';

@@ -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',

@@ -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.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ 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
@@ -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: {

@@ -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: {

@@ -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: {

@@ -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: {

@@ -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: {

@@ -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: {