feat(react-persona): Move Persona to stable

change/@fluentui-react-components-c765b1a1-b30b-439f-abb7-829126cb511a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Moving Persona to stable.",
+  "packageName": "@fluentui/react-components",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-persona-2c76f33b-36e4-49ca-87a5-273f3be919a3.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "none",
   "comment": "chore: Update Griffel to latest version",
   "packageName": "@fluentui/react-persona",
   "email": "olfedias@microsoft.com",

change/@fluentui-react-persona-6d725b4a-927c-4b41-a89f-1f02531bbf32.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Moving Persona to stable.",
+  "packageName": "@fluentui/react-persona",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/stories/Combobox/ComboboxComplexOptions.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui/react-persona';
-import { makeStyles, shorthands, useId } from '@fluentui/react-components';
+import { makeStyles, shorthands, useId, Persona } from '@fluentui/react-components';
 import { Combobox, Option } from '@fluentui/react-combobox';
 import type { ComboboxProps } from '@fluentui/react-combobox';
 

packages/react-components/react-combobox/stories/Dropdown/DropdownComplexOptions.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui/react-persona';
-import { makeStyles, shorthands, useId } from '@fluentui/react-components';
+import { makeStyles, shorthands, useId, Persona } from '@fluentui/react-components';
 import { Dropdown, Option } from '@fluentui/react-combobox';
 import type { DropdownProps } from '@fluentui/react-combobox';
 

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

@@ -284,6 +284,11 @@ 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 { Persona } from '@fluentui/react-persona';
+import { personaClassNames } from '@fluentui/react-persona';
+import { PersonaProps } from '@fluentui/react-persona';
+import { PersonaSlots } from '@fluentui/react-persona';
+import { PersonaState } from '@fluentui/react-persona';
 import { Popover } from '@fluentui/react-popover';
 import { PopoverContextValue } from '@fluentui/react-popover';
 import { PopoverProps } from '@fluentui/react-popover';
@@ -366,6 +371,7 @@ import { renderMenuList_unstable } from '@fluentui/react-menu';
 import { renderMenuPopover_unstable } from '@fluentui/react-menu';
 import { renderMenuSplitGroup_unstable } from '@fluentui/react-menu';
 import { renderMenuTrigger_unstable } from '@fluentui/react-menu';
+import { renderPersona_unstable } from '@fluentui/react-persona';
 import { renderPopover_unstable } from '@fluentui/react-popover';
 import { renderPopoverSurface_unstable } from '@fluentui/react-popover';
 import { renderPopoverTrigger_unstable } from '@fluentui/react-popover';
@@ -589,6 +595,8 @@ import { useMenuTriggerContext_unstable } from '@fluentui/react-menu';
 import { useMergedRefs } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { UseModalAttributesOptions } from '@fluentui/react-tabster';
+import { usePersona_unstable } from '@fluentui/react-persona';
+import { usePersonaStyles_unstable } from '@fluentui/react-persona';
 import { usePopover_unstable } from '@fluentui/react-popover';
 import { usePopoverContext_unstable } from '@fluentui/react-popover';
 import { usePopoverSurface_unstable } from '@fluentui/react-popover';
@@ -1192,6 +1200,16 @@ export { partitionAvatarGroupItems }
 
 export { PartitionAvatarGroupItemsOptions }
 
+export { Persona }
+
+export { personaClassNames }
+
+export { PersonaProps }
+
+export { PersonaSlots }
+
+export { PersonaState }
+
 export { Popover }
 
 export { PopoverContextValue }
@@ -1356,6 +1374,8 @@ export { renderMenuSplitGroup_unstable }
 
 export { renderMenuTrigger_unstable }
 
+export { renderPersona_unstable }
+
 export { renderPopover_unstable }
 
 export { renderPopoverSurface_unstable }
@@ -1802,6 +1822,10 @@ export { useModalAttributes }
 
 export { UseModalAttributesOptions }
 
+export { usePersona_unstable }
+
+export { usePersonaStyles_unstable }
+
 export { usePopover_unstable }
 
 export { usePopoverContext_unstable }

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

@@ -130,11 +130,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 { Persona } from '@fluentui/react-persona';
-import { personaClassNames } from '@fluentui/react-persona';
-import { PersonaProps } from '@fluentui/react-persona';
-import { PersonaSlots } from '@fluentui/react-persona';
-import { PersonaState } from '@fluentui/react-persona';
 import { ProgressBar } from '@fluentui/react-progress';
 import { progressBarClassNames } from '@fluentui/react-progress';
 import { ProgressBarProps } from '@fluentui/react-progress';
@@ -165,7 +160,6 @@ import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderListbox_unstable } from '@fluentui/react-combobox';
 import { renderOption_unstable } from '@fluentui/react-combobox';
 import { renderOptionGroup_unstable } from '@fluentui/react-combobox';
-import { renderPersona_unstable } from '@fluentui/react-persona';
 import { renderProgressBar_unstable } from '@fluentui/react-progress';
 import { renderSelect_unstable } from '@fluentui/react-select';
 import { renderTable_unstable } from '@fluentui/react-table';
@@ -323,8 +317,6 @@ import { useOptionGroup_unstable } from '@fluentui/react-combobox';
 import { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';
 import { useOptionStyles_unstable } from '@fluentui/react-combobox';
 import { useOverflowMenu } from '@fluentui/react-overflow';
-import { usePersona_unstable } from '@fluentui/react-persona';
-import { usePersonaStyles_unstable } from '@fluentui/react-persona';
 import { useProgressBar_unstable } from '@fluentui/react-progress';
 import { useProgressBarStyles_unstable } from '@fluentui/react-progress';
 import { useSelect_unstable } from '@fluentui/react-select';
@@ -617,16 +609,6 @@ export { OverflowItemProps }
 
 export { OverflowProps }
 
-export { Persona }
-
-export { personaClassNames }
-
-export { PersonaProps }
-
-export { PersonaSlots }
-
-export { PersonaState }
-
 export { ProgressBar }
 
 export { progressBarClassNames }
@@ -687,8 +669,6 @@ export { renderOption_unstable }
 
 export { renderOptionGroup_unstable }
 
-export { renderPersona_unstable }
-
 export { renderProgressBar_unstable }
 
 export { renderSelect_unstable }
@@ -1004,10 +984,6 @@ export { useOptionStyles_unstable }
 
 export { useOverflowMenu }
 
-export { usePersona_unstable }
-
-export { usePersonaStyles_unstable }
-
 export { useProgressBar_unstable }
 
 export { useProgressBarStyles_unstable }

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

@@ -27,49 +27,6 @@ export type {
   FluentProviderSlots,
   FluentProviderState,
 } from '@fluentui/react-provider';
-export {
-  Radio,
-  radioClassNames,
-  RadioGroup,
-  RadioGroupProvider,
-  radioGroupClassNames,
-  renderRadio_unstable,
-  renderRadioGroup_unstable,
-  useRadio_unstable,
-  useRadioGroupContext_unstable,
-  useRadioGroupContextValues,
-  useRadioGroup_unstable,
-  useRadioGroupStyles_unstable,
-  useRadioStyles_unstable,
-} from '@fluentui/react-radio';
-export type {
-  RadioGroupContextValue,
-  RadioGroupContextValues,
-  RadioGroupOnChangeData,
-  RadioGroupProps,
-  RadioGroupSlots,
-  RadioGroupState,
-  RadioOnChangeData,
-  RadioProps,
-  RadioSlots,
-  RadioState,
-} from '@fluentui/react-radio';
-export {
-  SpinButton,
-  renderSpinButton_unstable,
-  spinButtonClassNames,
-  useSpinButtonStyles_unstable,
-  useSpinButton_unstable,
-} from '@fluentui/react-spinbutton';
-export type {
-  SpinButtonOnChangeData,
-  SpinButtonChangeEvent,
-  SpinButtonProps,
-  SpinButtonSlots,
-  SpinButtonState,
-  SpinButtonSpinState,
-  SpinButtonBounds,
-} from '@fluentui/react-spinbutton';
 export {
   createCustomFocusIndicatorStyle,
   createFocusOutlineStyle,
@@ -488,6 +445,14 @@ export type {
   // eslint-disable-next-line deprecation/deprecation
   UninitializedMenuListState,
 } from '@fluentui/react-menu';
+export {
+  Persona,
+  personaClassNames,
+  renderPersona_unstable,
+  usePersonaStyles_unstable,
+  usePersona_unstable,
+} from '@fluentui/react-persona';
+export type { PersonaProps, PersonaState, PersonaSlots } from '@fluentui/react-persona';
 export {
   Popover,
   PopoverSurface,
@@ -520,6 +485,33 @@ export type {
 } from '@fluentui/react-popover';
 export { Portal, usePortal_unstable, renderPortal_unstable } from '@fluentui/react-portal';
 export type { PortalProps, PortalState } from '@fluentui/react-portal';
+export {
+  Radio,
+  radioClassNames,
+  RadioGroup,
+  RadioGroupProvider,
+  radioGroupClassNames,
+  renderRadio_unstable,
+  renderRadioGroup_unstable,
+  useRadio_unstable,
+  useRadioGroupContext_unstable,
+  useRadioGroupContextValues,
+  useRadioGroup_unstable,
+  useRadioGroupStyles_unstable,
+  useRadioStyles_unstable,
+} from '@fluentui/react-radio';
+export type {
+  RadioGroupContextValue,
+  RadioGroupContextValues,
+  RadioGroupOnChangeData,
+  RadioGroupProps,
+  RadioGroupSlots,
+  RadioGroupState,
+  RadioOnChangeData,
+  RadioProps,
+  RadioSlots,
+  RadioState,
+} from '@fluentui/react-radio';
 export {
   Slider,
   sliderClassNames,
@@ -530,6 +522,22 @@ export {
   renderSlider_unstable,
 } from '@fluentui/react-slider';
 export type { SliderProps, SliderSlots, SliderOnChangeData, SliderState } from '@fluentui/react-slider';
+export {
+  SpinButton,
+  renderSpinButton_unstable,
+  spinButtonClassNames,
+  useSpinButtonStyles_unstable,
+  useSpinButton_unstable,
+} from '@fluentui/react-spinbutton';
+export type {
+  SpinButtonOnChangeData,
+  SpinButtonChangeEvent,
+  SpinButtonProps,
+  SpinButtonSlots,
+  SpinButtonState,
+  SpinButtonSpinState,
+  SpinButtonBounds,
+} from '@fluentui/react-spinbutton';
 export {
   Spinner,
   spinnerClassNames,

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

@@ -370,15 +370,6 @@ export {
 } from '@fluentui/react-field';
 export type { FieldConfig, FieldProps, FieldSlots, FieldState } from '@fluentui/react-field';
 
-export {
-  Persona,
-  personaClassNames,
-  renderPersona_unstable,
-  usePersonaStyles_unstable,
-  usePersona_unstable,
-} from '@fluentui/react-persona';
-export type { PersonaProps, PersonaState, PersonaSlots } from '@fluentui/react-persona';
-
 export {
   ProgressBar,
   progressBarClassNames,

packages/react-components/react-persona/README.md

@@ -2,20 +2,10 @@
 
 **React Persona components for [Fluent UI React](https://react.fluentui.dev/)**
 
-## 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 Persona:
 
-```js
-import { Persona } from '@fluentui/react-persona';
-```
-
-Once the Persona component graduates to a production release, the component will be available at:
-
 ```js
 import { Persona } from '@fluentui/react-components';
 ```

packages/react-components/react-persona/package.json

@@ -45,11 +45,9 @@
     "react-dom": ">=16.8.0 <19.0.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
-      "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "exports": {

packages/react-components/react-persona/stories/Persona/PersonaAvatarSize.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui/react-persona';
-import { makeStyles } from '@fluentui/react-components';
+import { makeStyles, Persona } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

packages/react-components/react-persona/stories/Persona/PersonaDefault.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Persona, PersonaProps } from '@fluentui/react-persona';
+import { Persona } from '@fluentui/react-components';
+import type { PersonaProps } from '@fluentui/react-components';
 
 export const Default = (props: Partial<PersonaProps>) => {
   return (

packages/react-components/react-persona/stories/Persona/PersonaDescription.md

@@ -1,14 +1 @@
 A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
->
-> ```jsx
->
-> import { Persona } 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

packages/react-components/react-persona/stories/Persona/PersonaPresenceSize.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui/react-persona';
-import { makeStyles } from '@fluentui/react-components';
+import { makeStyles, Persona } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

packages/react-components/react-persona/stories/Persona/PersonaTextAlignment.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui/react-persona';
-import { makeStyles } from '@fluentui/react-components';
+import { makeStyles, Persona } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {

packages/react-components/react-persona/stories/Persona/PersonaTextPosition.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui/react-persona';
-import { makeStyles } from '@fluentui/react-components';
+import { makeStyles, Persona } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {