chore(react-skeleton): Release react-skeleton to stable

change/@fluentui-react-components-a75e4422-c023-4ded-b591-b8e9a071ac3e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Release react-skeleton to stable",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-skeleton-50e30320-4803-4403-a4e3-ad463e7134bf.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "none",
   "comment": "chore: move makeStyles() calls to .styles.ts files",
   "packageName": "@fluentui/react-skeleton",
   "email": "[email protected]",

change/@fluentui-react-skeleton-725eba8c-20d0-45a2-b5f9-e2901c493699.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "none",
   "comment": "chore: exclude .swcrc from being published",
   "packageName": "@fluentui/react-skeleton",
   "email": "[email protected]",

change/@fluentui-react-skeleton-9cfea4a1-5247-4590-801d-5581a95e02e7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Release react-skeleton to stable",
+  "packageName": "@fluentui/react-skeleton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json

@@ -1,5 +1,5 @@
 {
-  "type": "prerelease",
+  "type": "none",
   "comment": "fix: Scale pulse animation with percentages and flip wave animation's direction.",
   "packageName": "@fluentui/react-skeleton",
   "email": "[email protected]",

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

@@ -532,6 +532,8 @@ import { renderProgressBar_unstable } from '@fluentui/react-progress';
 import { renderRadio_unstable } from '@fluentui/react-radio';
 import { renderRadioGroup_unstable } from '@fluentui/react-radio';
 import { renderSelect_unstable } from '@fluentui/react-select';
+import { renderSkeleton_unstable } from '@fluentui/react-skeleton';
+import { renderSkeletonItem_unstable } from '@fluentui/react-skeleton';
 import { renderSlider_unstable } from '@fluentui/react-slider';
 import { renderSpinButton_unstable } from '@fluentui/react-spinbutton';
 import { renderSpinner_unstable } from '@fluentui/react-spinner';
@@ -573,6 +575,18 @@ import { SelectTabEventHandler } from '@fluentui/react-tabs';
 import { ShadowBrandTokens } from '@fluentui/react-theme';
 import { ShadowTokens } from '@fluentui/react-theme';
 import { shorthands } from '@griffel/react';
+import { Skeleton } from '@fluentui/react-skeleton';
+import { skeletonClassNames } from '@fluentui/react-skeleton';
+import { SkeletonContextProvider } from '@fluentui/react-skeleton';
+import { SkeletonContextValue } from '@fluentui/react-skeleton';
+import { SkeletonItem } from '@fluentui/react-skeleton';
+import { skeletonItemClassNames } from '@fluentui/react-skeleton';
+import { SkeletonItemProps } from '@fluentui/react-skeleton';
+import { SkeletonItemSlots } from '@fluentui/react-skeleton';
+import { SkeletonItemState } from '@fluentui/react-skeleton';
+import { SkeletonProps } from '@fluentui/react-skeleton';
+import { SkeletonSlots } from '@fluentui/react-skeleton';
+import { SkeletonState } from '@fluentui/react-skeleton';
 import { Slider } from '@fluentui/react-slider';
 import { sliderClassNames } from '@fluentui/react-slider';
 import { sliderCSSVars } from '@fluentui/react-slider';
@@ -933,6 +947,11 @@ import { useRadioStyles_unstable } from '@fluentui/react-radio';
 import { useScrollbarWidth } from '@fluentui/react-utilities';
 import { useSelect_unstable } from '@fluentui/react-select';
 import { useSelectStyles_unstable } from '@fluentui/react-select';
+import { useSkeleton_unstable } from '@fluentui/react-skeleton';
+import { useSkeletonContext } from '@fluentui/react-skeleton';
+import { useSkeletonItem_unstable } from '@fluentui/react-skeleton';
+import { useSkeletonItemStyles_unstable } from '@fluentui/react-skeleton';
+import { useSkeletonStyles_unstable } from '@fluentui/react-skeleton';
 import { useSlider_unstable } from '@fluentui/react-slider';
 import { useSliderState_unstable } from '@fluentui/react-slider';
 import { useSliderStyles_unstable } from '@fluentui/react-slider';
@@ -2060,6 +2079,10 @@ export { renderRadioGroup_unstable }
 
 export { renderSelect_unstable }
 
+export { renderSkeleton_unstable }
+
+export { renderSkeletonItem_unstable }
+
 export { renderSlider_unstable }
 
 export { renderSpinButton_unstable }
@@ -2142,6 +2165,30 @@ export { ShadowTokens }
 
 export { shorthands }
 
+export { Skeleton }
+
+export { skeletonClassNames }
+
+export { SkeletonContextProvider }
+
+export { SkeletonContextValue }
+
+export { SkeletonItem }
+
+export { skeletonItemClassNames }
+
+export { SkeletonItemProps }
+
+export { SkeletonItemSlots }
+
+export { SkeletonItemState }
+
+export { SkeletonProps }
+
+export { SkeletonSlots }
+
+export { SkeletonState }
+
 export { Slider }
 
 export { sliderClassNames }
@@ -2862,6 +2909,16 @@ export { useSelect_unstable }
 
 export { useSelectStyles_unstable }
 
+export { useSkeleton_unstable }
+
+export { useSkeletonContext }
+
+export { useSkeletonItem_unstable }
+
+export { useSkeletonItemStyles_unstable }
+
+export { useSkeletonStyles_unstable }
+
 export { useSlider_unstable }
 
 export { useSliderState_unstable }

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

@@ -28,26 +28,12 @@ import { NestedTreeItem } from '@fluentui/react-tree';
 import { renderAlert_unstable } from '@fluentui/react-alert';
 import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
 import { renderInfoLabel_unstable } from '@fluentui/react-infobutton';
-import { renderSkeleton_unstable } from '@fluentui/react-skeleton';
-import { renderSkeletonItem_unstable } from '@fluentui/react-skeleton';
 import { renderTree_unstable } from '@fluentui/react-tree';
 import { renderTreeItem_unstable } from '@fluentui/react-tree';
 import { renderTreeItemLayout_unstable } from '@fluentui/react-tree';
 import { renderTreeItemPersonaLayout_unstable } from '@fluentui/react-tree';
 import { renderVirtualizer_unstable } from '@fluentui/react-virtualizer';
 import { renderVirtualizerScrollView_unstable } from '@fluentui/react-virtualizer';
-import { Skeleton } from '@fluentui/react-skeleton';
-import { skeletonClassNames } from '@fluentui/react-skeleton';
-import { SkeletonContextProvider } from '@fluentui/react-skeleton';
-import { SkeletonContextValue } from '@fluentui/react-skeleton';
-import { SkeletonItem } from '@fluentui/react-skeleton';
-import { skeletonItemClassNames } from '@fluentui/react-skeleton';
-import { SkeletonItemProps } from '@fluentui/react-skeleton';
-import { SkeletonItemSlots } from '@fluentui/react-skeleton';
-import { SkeletonItemState } from '@fluentui/react-skeleton';
-import { SkeletonProps } from '@fluentui/react-skeleton';
-import { SkeletonSlots } from '@fluentui/react-skeleton';
-import { SkeletonState } from '@fluentui/react-skeleton';
 import { Tree } from '@fluentui/react-tree';
 import { treeClassNames } from '@fluentui/react-tree';
 import { TreeContextValue } from '@fluentui/react-tree';
@@ -84,11 +70,6 @@ import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
 import { useInfoLabel_unstable } from '@fluentui/react-infobutton';
 import { useInfoLabelStyles_unstable } from '@fluentui/react-infobutton';
 import { useIntersectionObserver } from '@fluentui/react-virtualizer';
-import { useSkeleton_unstable } from '@fluentui/react-skeleton';
-import { useSkeletonContext } from '@fluentui/react-skeleton';
-import { useSkeletonItem_unstable } from '@fluentui/react-skeleton';
-import { useSkeletonItemStyles_unstable } from '@fluentui/react-skeleton';
-import { useSkeletonStyles_unstable } from '@fluentui/react-skeleton';
 import { useStaticVirtualizerMeasure } from '@fluentui/react-virtualizer';
 import { useTree_unstable } from '@fluentui/react-tree';
 import { useTreeContext_unstable } from '@fluentui/react-tree';
@@ -164,10 +145,6 @@ export { renderInfoButton_unstable }
 
 export { renderInfoLabel_unstable }
 
-export { renderSkeleton_unstable }
-
-export { renderSkeletonItem_unstable }
-
 export { renderTree_unstable }
 
 export { renderTreeItem_unstable }
@@ -180,30 +157,6 @@ export { renderVirtualizer_unstable }
 
 export { renderVirtualizerScrollView_unstable }
 
-export { Skeleton }
-
-export { skeletonClassNames }
-
-export { SkeletonContextProvider }
-
-export { SkeletonContextValue }
-
-export { SkeletonItem }
-
-export { skeletonItemClassNames }
-
-export { SkeletonItemProps }
-
-export { SkeletonItemSlots }
-
-export { SkeletonItemState }
-
-export { SkeletonProps }
-
-export { SkeletonSlots }
-
-export { SkeletonState }
-
 export { Tree }
 
 export { treeClassNames }
@@ -276,16 +229,6 @@ export { useInfoLabelStyles_unstable }
 
 export { useIntersectionObserver }
 
-export { useSkeleton_unstable }
-
-export { useSkeletonContext }
-
-export { useSkeletonItem_unstable }
-
-export { useSkeletonItemStyles_unstable }
-
-export { useSkeletonStyles_unstable }
-
 export { useStaticVirtualizerMeasure }
 
 export { useTree_unstable }

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

@@ -588,6 +588,29 @@ export {
   useSelect_unstable,
 } from '@fluentui/react-select';
 export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from '@fluentui/react-select';
+export {
+  Skeleton,
+  renderSkeleton_unstable,
+  skeletonClassNames,
+  useSkeletonStyles_unstable,
+  useSkeleton_unstable,
+  SkeletonItem,
+  renderSkeletonItem_unstable,
+  skeletonItemClassNames,
+  useSkeletonItemStyles_unstable,
+  useSkeletonItem_unstable,
+  SkeletonContextProvider,
+  useSkeletonContext,
+} from '@fluentui/react-skeleton';
+export type {
+  SkeletonProps,
+  SkeletonSlots,
+  SkeletonState,
+  SkeletonItemProps,
+  SkeletonItemSlots,
+  SkeletonItemState,
+  SkeletonContextValue,
+} from '@fluentui/react-skeleton';
 export {
   Slider,
   sliderClassNames,

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

@@ -30,30 +30,6 @@ export type {
   InfoLabelState,
 } from '@fluentui/react-infobutton';
 
-export {
-  Skeleton,
-  renderSkeleton_unstable,
-  skeletonClassNames,
-  useSkeletonStyles_unstable,
-  useSkeleton_unstable,
-  SkeletonItem,
-  renderSkeletonItem_unstable,
-  skeletonItemClassNames,
-  useSkeletonItemStyles_unstable,
-  useSkeletonItem_unstable,
-  SkeletonContextProvider,
-  useSkeletonContext,
-} from '@fluentui/react-skeleton';
-export type {
-  SkeletonProps,
-  SkeletonSlots,
-  SkeletonState,
-  SkeletonItemProps,
-  SkeletonItemSlots,
-  SkeletonItemState,
-  SkeletonContextValue,
-} from '@fluentui/react-skeleton';
-
 export {
   Virtualizer,
   virtualizerClassNames,

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

@@ -2,4 +2,10 @@
 
 **React Skeleton components for [Fluent UI React](https://react.fluentui.dev/)**
 
-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 `Skeleton`:
+
+```js
+import { Skeleton, SkeletonItem } from '@fluentui/react-components';
+```

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

@@ -48,8 +48,7 @@
   "beachball": {
     "disallowedChangeTypes": [
       "major",
-      "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "exports": {

packages/react-components/react-skeleton/stories/Skeleton/SkeletonAnimation.stories.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { Field, makeStyles, tokens } from '@fluentui/react-components';
-import type { SkeletonProps } from '@fluentui/react-components/unstable';
-import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
+import { Field, SkeletonProps, Skeleton, SkeletonItem, makeStyles, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   invertedWrapper: {

packages/react-components/react-skeleton/stories/Skeleton/SkeletonAppearance.stories.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { Field, makeStyles, tokens } from '@fluentui/react-components';
-import type { SkeletonProps } from '@fluentui/react-components/unstable';
-import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
+import { Field, SkeletonProps, Skeleton, SkeletonItem, makeStyles, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   invertedWrapper: {

packages/react-components/react-skeleton/stories/Skeleton/SkeletonDefault.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
-import type { SkeletonProps } from '@fluentui/react-components/unstable';
+import { Skeleton, SkeletonItem } from '@fluentui/react-components';
+import type { SkeletonProps } from '@fluentui/react-components';
 
 export const Default = (props: Partial<SkeletonProps>) => (
   <Skeleton {...props}>

packages/react-components/react-skeleton/stories/Skeleton/SkeletonDescription.md

@@ -1,14 +1,10 @@
 <!-- Don't allow prettier to collapse code block into single line -->
 <!-- prettier-ignore -->
-> **⚠️ Preview components are considered unstable:**
 >
 > ```jsx
 >
-> import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
+> import { Skeleton, SkeletonItem } from '@fluentui/react-components';
 >
 > ```
->
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product
 
 The `Skeleton` component is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI.

packages/react-components/react-skeleton/stories/Skeleton/SkeletonRow.stories.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
-import type { SkeletonProps } from '@fluentui/react-components/unstable';
-import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
+import { SkeletonProps, Skeleton, SkeletonItem, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   invertedWrapper: {

packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from '@fluentui/react-components/unstable';
+import { Skeleton } from '@fluentui/react-components';
 
 import descriptionMd from './SkeletonDescription.md';
 import bestPracticesMd from './SkeletonBestPractices.md';