Skip to content

Commit c02b44a

Browse files
tomi-msftkhmakoto
tomi-msft
and
khmakoto
authored
chore(react-skeleton): Release react-skeleton to stable (#27767)
* chore(react-skeleton): release react-skeleton to stable * change changetype to none to be able to merge * change files * api update * change changefile type * Apply suggestions from code review Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> --------- Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
1 parent 347e2f6 commit c02b44a

17 files changed

+115
-104
lines changed

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "chore: Releasing react-skeleton to stable.",
4+
"packageName": "@fluentui/react-components",
5+
"email": "ololubek@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"type": "prerelease",
2+
"type": "none",
33
"comment": "chore: move makeStyles() calls to .styles.ts files",
44
"packageName": "@fluentui/react-skeleton",
55
"email": "olfedias@microsoft.com",

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"type": "prerelease",
2+
"type": "none",
33
"comment": "chore: exclude .swcrc from being published",
44
"packageName": "@fluentui/react-skeleton",
55
"email": "olfedias@microsoft.com",

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "chore: Releasing react-skeleton to stable.",
4+
"packageName": "@fluentui/react-skeleton",
5+
"email": "ololubek@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"type": "prerelease",
2+
"type": "none",
33
"comment": "fix: Scale pulse animation with percentages and flip wave animation's direction.",
44
"packageName": "@fluentui/react-skeleton",
55
"email": "ololubek@microsoft.com",

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

+57
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,8 @@ import { renderProgressBar_unstable } from '@fluentui/react-progress';
532532
import { renderRadio_unstable } from '@fluentui/react-radio';
533533
import { renderRadioGroup_unstable } from '@fluentui/react-radio';
534534
import { renderSelect_unstable } from '@fluentui/react-select';
535+
import { renderSkeleton_unstable } from '@fluentui/react-skeleton';
536+
import { renderSkeletonItem_unstable } from '@fluentui/react-skeleton';
535537
import { renderSlider_unstable } from '@fluentui/react-slider';
536538
import { renderSpinButton_unstable } from '@fluentui/react-spinbutton';
537539
import { renderSpinner_unstable } from '@fluentui/react-spinner';
@@ -573,6 +575,18 @@ import { SelectTabEventHandler } from '@fluentui/react-tabs';
573575
import { ShadowBrandTokens } from '@fluentui/react-theme';
574576
import { ShadowTokens } from '@fluentui/react-theme';
575577
import { shorthands } from '@griffel/react';
578+
import { Skeleton } from '@fluentui/react-skeleton';
579+
import { skeletonClassNames } from '@fluentui/react-skeleton';
580+
import { SkeletonContextProvider } from '@fluentui/react-skeleton';
581+
import { SkeletonContextValue } from '@fluentui/react-skeleton';
582+
import { SkeletonItem } from '@fluentui/react-skeleton';
583+
import { skeletonItemClassNames } from '@fluentui/react-skeleton';
584+
import { SkeletonItemProps } from '@fluentui/react-skeleton';
585+
import { SkeletonItemSlots } from '@fluentui/react-skeleton';
586+
import { SkeletonItemState } from '@fluentui/react-skeleton';
587+
import { SkeletonProps } from '@fluentui/react-skeleton';
588+
import { SkeletonSlots } from '@fluentui/react-skeleton';
589+
import { SkeletonState } from '@fluentui/react-skeleton';
576590
import { Slider } from '@fluentui/react-slider';
577591
import { sliderClassNames } from '@fluentui/react-slider';
578592
import { sliderCSSVars } from '@fluentui/react-slider';
@@ -933,6 +947,11 @@ import { useRadioStyles_unstable } from '@fluentui/react-radio';
933947
import { useScrollbarWidth } from '@fluentui/react-utilities';
934948
import { useSelect_unstable } from '@fluentui/react-select';
935949
import { useSelectStyles_unstable } from '@fluentui/react-select';
950+
import { useSkeleton_unstable } from '@fluentui/react-skeleton';
951+
import { useSkeletonContext } from '@fluentui/react-skeleton';
952+
import { useSkeletonItem_unstable } from '@fluentui/react-skeleton';
953+
import { useSkeletonItemStyles_unstable } from '@fluentui/react-skeleton';
954+
import { useSkeletonStyles_unstable } from '@fluentui/react-skeleton';
936955
import { useSlider_unstable } from '@fluentui/react-slider';
937956
import { useSliderState_unstable } from '@fluentui/react-slider';
938957
import { useSliderStyles_unstable } from '@fluentui/react-slider';
@@ -2060,6 +2079,10 @@ export { renderRadioGroup_unstable }
20602079

20612080
export { renderSelect_unstable }
20622081

2082+
export { renderSkeleton_unstable }
2083+
2084+
export { renderSkeletonItem_unstable }
2085+
20632086
export { renderSlider_unstable }
20642087

20652088
export { renderSpinButton_unstable }
@@ -2142,6 +2165,30 @@ export { ShadowTokens }
21422165

21432166
export { shorthands }
21442167

2168+
export { Skeleton }
2169+
2170+
export { skeletonClassNames }
2171+
2172+
export { SkeletonContextProvider }
2173+
2174+
export { SkeletonContextValue }
2175+
2176+
export { SkeletonItem }
2177+
2178+
export { skeletonItemClassNames }
2179+
2180+
export { SkeletonItemProps }
2181+
2182+
export { SkeletonItemSlots }
2183+
2184+
export { SkeletonItemState }
2185+
2186+
export { SkeletonProps }
2187+
2188+
export { SkeletonSlots }
2189+
2190+
export { SkeletonState }
2191+
21452192
export { Slider }
21462193

21472194
export { sliderClassNames }
@@ -2862,6 +2909,16 @@ export { useSelect_unstable }
28622909

28632910
export { useSelectStyles_unstable }
28642911

2912+
export { useSkeleton_unstable }
2913+
2914+
export { useSkeletonContext }
2915+
2916+
export { useSkeletonItem_unstable }
2917+
2918+
export { useSkeletonItemStyles_unstable }
2919+
2920+
export { useSkeletonStyles_unstable }
2921+
28652922
export { useSlider_unstable }
28662923

28672924
export { useSliderState_unstable }

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

-57
Original file line numberDiff line numberDiff line change
@@ -28,26 +28,12 @@ import { NestedTreeItem } from '@fluentui/react-tree';
2828
import { renderAlert_unstable } from '@fluentui/react-alert';
2929
import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
3030
import { renderInfoLabel_unstable } from '@fluentui/react-infobutton';
31-
import { renderSkeleton_unstable } from '@fluentui/react-skeleton';
32-
import { renderSkeletonItem_unstable } from '@fluentui/react-skeleton';
3331
import { renderTree_unstable } from '@fluentui/react-tree';
3432
import { renderTreeItem_unstable } from '@fluentui/react-tree';
3533
import { renderTreeItemLayout_unstable } from '@fluentui/react-tree';
3634
import { renderTreeItemPersonaLayout_unstable } from '@fluentui/react-tree';
3735
import { renderVirtualizer_unstable } from '@fluentui/react-virtualizer';
3836
import { renderVirtualizerScrollView_unstable } from '@fluentui/react-virtualizer';
39-
import { Skeleton } from '@fluentui/react-skeleton';
40-
import { skeletonClassNames } from '@fluentui/react-skeleton';
41-
import { SkeletonContextProvider } from '@fluentui/react-skeleton';
42-
import { SkeletonContextValue } from '@fluentui/react-skeleton';
43-
import { SkeletonItem } from '@fluentui/react-skeleton';
44-
import { skeletonItemClassNames } from '@fluentui/react-skeleton';
45-
import { SkeletonItemProps } from '@fluentui/react-skeleton';
46-
import { SkeletonItemSlots } from '@fluentui/react-skeleton';
47-
import { SkeletonItemState } from '@fluentui/react-skeleton';
48-
import { SkeletonProps } from '@fluentui/react-skeleton';
49-
import { SkeletonSlots } from '@fluentui/react-skeleton';
50-
import { SkeletonState } from '@fluentui/react-skeleton';
5137
import { Tree } from '@fluentui/react-tree';
5238
import { treeClassNames } from '@fluentui/react-tree';
5339
import { TreeContextValue } from '@fluentui/react-tree';
@@ -84,11 +70,6 @@ import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton';
8470
import { useInfoLabel_unstable } from '@fluentui/react-infobutton';
8571
import { useInfoLabelStyles_unstable } from '@fluentui/react-infobutton';
8672
import { useIntersectionObserver } from '@fluentui/react-virtualizer';
87-
import { useSkeleton_unstable } from '@fluentui/react-skeleton';
88-
import { useSkeletonContext } from '@fluentui/react-skeleton';
89-
import { useSkeletonItem_unstable } from '@fluentui/react-skeleton';
90-
import { useSkeletonItemStyles_unstable } from '@fluentui/react-skeleton';
91-
import { useSkeletonStyles_unstable } from '@fluentui/react-skeleton';
9273
import { useStaticVirtualizerMeasure } from '@fluentui/react-virtualizer';
9374
import { useTree_unstable } from '@fluentui/react-tree';
9475
import { useTreeContext_unstable } from '@fluentui/react-tree';
@@ -164,10 +145,6 @@ export { renderInfoButton_unstable }
164145

165146
export { renderInfoLabel_unstable }
166147

167-
export { renderSkeleton_unstable }
168-
169-
export { renderSkeletonItem_unstable }
170-
171148
export { renderTree_unstable }
172149

173150
export { renderTreeItem_unstable }
@@ -180,30 +157,6 @@ export { renderVirtualizer_unstable }
180157

181158
export { renderVirtualizerScrollView_unstable }
182159

183-
export { Skeleton }
184-
185-
export { skeletonClassNames }
186-
187-
export { SkeletonContextProvider }
188-
189-
export { SkeletonContextValue }
190-
191-
export { SkeletonItem }
192-
193-
export { skeletonItemClassNames }
194-
195-
export { SkeletonItemProps }
196-
197-
export { SkeletonItemSlots }
198-
199-
export { SkeletonItemState }
200-
201-
export { SkeletonProps }
202-
203-
export { SkeletonSlots }
204-
205-
export { SkeletonState }
206-
207160
export { Tree }
208161

209162
export { treeClassNames }
@@ -276,16 +229,6 @@ export { useInfoLabelStyles_unstable }
276229

277230
export { useIntersectionObserver }
278231

279-
export { useSkeleton_unstable }
280-
281-
export { useSkeletonContext }
282-
283-
export { useSkeletonItem_unstable }
284-
285-
export { useSkeletonItemStyles_unstable }
286-
287-
export { useSkeletonStyles_unstable }
288-
289232
export { useStaticVirtualizerMeasure }
290233

291234
export { useTree_unstable }

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

+23
Original file line numberDiff line numberDiff line change
@@ -588,6 +588,29 @@ export {
588588
useSelect_unstable,
589589
} from '@fluentui/react-select';
590590
export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from '@fluentui/react-select';
591+
export {
592+
Skeleton,
593+
renderSkeleton_unstable,
594+
skeletonClassNames,
595+
useSkeletonStyles_unstable,
596+
useSkeleton_unstable,
597+
SkeletonItem,
598+
renderSkeletonItem_unstable,
599+
skeletonItemClassNames,
600+
useSkeletonItemStyles_unstable,
601+
useSkeletonItem_unstable,
602+
SkeletonContextProvider,
603+
useSkeletonContext,
604+
} from '@fluentui/react-skeleton';
605+
export type {
606+
SkeletonProps,
607+
SkeletonSlots,
608+
SkeletonState,
609+
SkeletonItemProps,
610+
SkeletonItemSlots,
611+
SkeletonItemState,
612+
SkeletonContextValue,
613+
} from '@fluentui/react-skeleton';
591614
export {
592615
Slider,
593616
sliderClassNames,

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

-24
Original file line numberDiff line numberDiff line change
@@ -30,30 +30,6 @@ export type {
3030
InfoLabelState,
3131
} from '@fluentui/react-infobutton';
3232

33-
export {
34-
Skeleton,
35-
renderSkeleton_unstable,
36-
skeletonClassNames,
37-
useSkeletonStyles_unstable,
38-
useSkeleton_unstable,
39-
SkeletonItem,
40-
renderSkeletonItem_unstable,
41-
skeletonItemClassNames,
42-
useSkeletonItemStyles_unstable,
43-
useSkeletonItem_unstable,
44-
SkeletonContextProvider,
45-
useSkeletonContext,
46-
} from '@fluentui/react-skeleton';
47-
export type {
48-
SkeletonProps,
49-
SkeletonSlots,
50-
SkeletonState,
51-
SkeletonItemProps,
52-
SkeletonItemSlots,
53-
SkeletonItemState,
54-
SkeletonContextValue,
55-
} from '@fluentui/react-skeleton';
56-
5733
export {
5834
Virtualizer,
5935
virtualizerClassNames,

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22

33
**React Skeleton components for [Fluent UI React](https://react.fluentui.dev/)**
44

5-
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.
5+
## Usage
6+
7+
To import `Skeleton`:
8+
9+
```js
10+
import { Skeleton, SkeletonItem } from '@fluentui/react-components';
11+
```

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@
4848
"beachball": {
4949
"disallowedChangeTypes": [
5050
"major",
51-
"minor",
52-
"patch"
51+
"prerelease"
5352
]
5453
},
5554
"exports": {

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
2-
import { Field, makeStyles, tokens } from '@fluentui/react-components';
3-
import type { SkeletonProps } from '@fluentui/react-components/unstable';
4-
import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
2+
import { Field, Skeleton, SkeletonItem, makeStyles, tokens } from '@fluentui/react-components';
3+
import type { SkeletonProps } from '@fluentui/react-components';
54

65
const useStyles = makeStyles({
76
invertedWrapper: {

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
2-
import { Field, makeStyles, tokens } from '@fluentui/react-components';
3-
import type { SkeletonProps } from '@fluentui/react-components/unstable';
4-
import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
2+
import { Field, Skeleton, SkeletonItem, makeStyles, tokens } from '@fluentui/react-components';
3+
import type { SkeletonProps } from '@fluentui/react-components';
54

65
const useStyles = makeStyles({
76
invertedWrapper: {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
3-
import type { SkeletonProps } from '@fluentui/react-components/unstable';
2+
import { Skeleton, SkeletonItem } from '@fluentui/react-components';
3+
import type { SkeletonProps } from '@fluentui/react-components';
44

55
export const Default = (props: Partial<SkeletonProps>) => (
66
<Skeleton {...props}>

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
<!-- Don't allow prettier to collapse code block into single line -->
22
<!-- prettier-ignore -->
3-
> **⚠️ Preview components are considered unstable:**
43
>
54
> ```jsx
65
>
7-
> import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
6+
> import { Skeleton, SkeletonItem } from '@fluentui/react-components';
87
>
98
> ```
10-
>
11-
> - Features and APIs may change before final release
12-
> - Please contact us if you intend to use this in your product
139
1410
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

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
2-
import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
3-
import type { SkeletonProps } from '@fluentui/react-components/unstable';
4-
import { Skeleton, SkeletonItem } from '@fluentui/react-components/unstable';
2+
import { Skeleton, SkeletonItem, makeStyles, shorthands, tokens } from '@fluentui/react-components';
3+
import type { SkeletonProps } from '@fluentui/react-components';
54

65
const useStyles = makeStyles({
76
invertedWrapper: {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Skeleton } from '@fluentui/react-components/unstable';
1+
import { Skeleton } from '@fluentui/react-components';
22

33
import descriptionMd from './SkeletonDescription.md';
44
import bestPracticesMd from './SkeletonBestPractices.md';

0 commit comments

Comments
 (0)