From b9310ba71ed762d00eb05d03e94ff5b99097db0c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 08:53:04 +0000 Subject: [PATCH 01/10] Initial plan From 9a14df1ce4f6cb383302322e29219f078aeb7d82 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 09:04:02 +0000 Subject: [PATCH 02/10] feat(react-skeleton): Add size and shape props to Skeleton component Co-authored-by: ValentinaKozlova <11574680+ValentinaKozlova@users.noreply.github.com> --- .../library/etc/react-skeleton.api.md | 8 ++++- .../src/components/Skeleton/Skeleton.test.tsx | 32 ++++++++++++++++++- .../src/components/Skeleton/Skeleton.types.ts | 18 ++++++++++- .../src/components/Skeleton/useSkeleton.ts | 4 +-- .../Skeleton/useSkeletonContextValues.ts | 6 ++-- .../SkeletonItem/useSkeletonItem.tsx | 6 ++-- .../library/src/contexts/SkeletonContext.ts | 3 ++ 7 files changed, 67 insertions(+), 10 deletions(-) diff --git a/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md b/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md index fe78c6e044579..6b4f19b57bd82 100644 --- a/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md +++ b/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md @@ -33,6 +33,10 @@ export interface SkeletonContextValue { animation?: 'wave' | 'pulse'; // (undocumented) appearance?: 'opaque' | 'translucent'; + // (undocumented) + shape?: 'circle' | 'square' | 'rectangle'; + // (undocumented) + size?: SkeletonItemSize; } // @public (undocumented) @@ -62,6 +66,8 @@ export type SkeletonProps = Omit>, 'width' animation?: 'wave' | 'pulse'; appearance?: 'opaque' | 'translucent'; width?: number | string; + size?: SkeletonItemSize; + shape?: 'circle' | 'square' | 'rectangle'; }; // @public (undocumented) @@ -70,7 +76,7 @@ export type SkeletonSlots = { }; // @public -export type SkeletonState = ComponentState & Required>; +export type SkeletonState = ComponentState & Required> & Pick; // @public export const useSkeleton_unstable: (props: SkeletonProps, ref: React_2.Ref) => SkeletonState; diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx index f9fe36b1c36e9..588cd106979f9 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; +import { render, renderHook } from '@testing-library/react'; import { Skeleton } from './Skeleton'; +import { useSkeletonItem_unstable } from '../SkeletonItem/useSkeletonItem'; +import { SkeletonContextProvider } from '../../contexts/SkeletonContext'; import { isConformant } from '../../testing/isConformant'; describe('Skeleton', () => { @@ -23,4 +25,32 @@ describe('Skeleton', () => { const result = render(); expect(result.getByRole('progressbar').getAttribute('aria-busy')).toBeDefined(); }); + it('passes size prop to SkeletonItem via context', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} + ); + const { result } = renderHook(() => useSkeletonItem_unstable({}, React.createRef()), { wrapper }); + expect(result.current.size).toBe(24); + }); + it('passes shape prop to SkeletonItem via context', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} + ); + const { result } = renderHook(() => useSkeletonItem_unstable({}, React.createRef()), { wrapper }); + expect(result.current.shape).toBe('circle'); + }); + it('allows SkeletonItem to override Skeleton size prop', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} + ); + const { result } = renderHook(() => useSkeletonItem_unstable({ size: 48 }, React.createRef()), { wrapper }); + expect(result.current.size).toBe(48); + }); + it('allows SkeletonItem to override Skeleton shape prop', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} + ); + const { result } = renderHook(() => useSkeletonItem_unstable({ shape: 'square' }, React.createRef()), { wrapper }); + expect(result.current.shape).toBe('square'); + }); }); diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts index 8a3f571c25f8c..e54ab499092b0 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts @@ -1,4 +1,5 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import type { SkeletonItemSize } from '../SkeletonItem/SkeletonItem.types'; import { SkeletonContextValue } from '../../contexts/index'; export type SkeletonSlots = { @@ -31,6 +32,19 @@ export type SkeletonProps = Omit>, 'width' * @deprecated Use `className` prop to set width */ width?: number | string; + + /** + * Sets the size of the SkeletonItems inside the Skeleton in pixels. + * Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize). + * This value can be overridden by the individual SkeletonItem's `size` prop. + */ + size?: SkeletonItemSize; + + /** + * Sets the shape of the SkeletonItems inside the Skeleton. + * This value can be overridden by the individual SkeletonItem's `shape` prop. + */ + shape?: 'circle' | 'square' | 'rectangle'; }; export type SkeletonContextValues = { @@ -40,4 +54,6 @@ export type SkeletonContextValues = { /** * State used in rendering Skeleton */ -export type SkeletonState = ComponentState & Required>; +export type SkeletonState = ComponentState & + Required> & + Pick; diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts index a6bed8c0d4f15..3481ac79a8fd2 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts @@ -16,7 +16,7 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext'; */ export const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref): SkeletonState => { const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext(); - const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props; + const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque', size, shape } = props; const root = slot.always( getIntrinsicElementProps('div', { @@ -30,5 +30,5 @@ export const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref { - const { animation, appearance } = state; + const { animation, appearance, size, shape } = state; const skeletonGroup = React.useMemo( () => ({ animation, appearance, + size, + shape, }), - [animation, appearance], + [animation, appearance, size, shape], ); return { skeletonGroup }; diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx index c38635d67ca87..b2f67e1863f39 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx @@ -15,12 +15,12 @@ import type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types' * @param ref - reference to root HTMLElement of SkeletonItem */ export const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref): SkeletonItemState => { - const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext(); + const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = useSkeletonContext(); const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque', - size = 16, - shape = 'rectangle', + size = contextSize ?? 16, + shape = contextShape ?? 'rectangle', } = props; const root = slot.always( diff --git a/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts b/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts index 79157c2f107f5..22651e1273d57 100644 --- a/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts +++ b/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts @@ -1,12 +1,15 @@ 'use client'; import * as React from 'react'; +import type { SkeletonItemSize } from '../components/SkeletonItem/SkeletonItem.types'; const SkeletonContext = React.createContext(undefined); export interface SkeletonContextValue { animation?: 'wave' | 'pulse'; appearance?: 'opaque' | 'translucent'; + size?: SkeletonItemSize; + shape?: 'circle' | 'square' | 'rectangle'; } const skeletonContextDefaultValue: SkeletonContextValue = {}; From 51fa7b1ab60a38ee2e347e5ea6c39a1543d2d15e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 14:32:46 +0000 Subject: [PATCH 03/10] refactor(react-skeleton): Move SkeletonItemSize definition to Skeleton.types.ts Co-authored-by: ValentinaKozlova <11574680+ValentinaKozlova@users.noreply.github.com> --- .../react-skeleton/library/src/Skeleton.ts | 2 +- .../library/src/components/Skeleton/Skeleton.types.ts | 6 +++++- .../library/src/components/Skeleton/index.ts | 2 +- .../src/components/SkeletonItem/SkeletonItem.types.ts | 8 +++----- .../library/src/contexts/SkeletonContext.ts | 2 +- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react-components/react-skeleton/library/src/Skeleton.ts b/packages/react-components/react-skeleton/library/src/Skeleton.ts index fe0a7eaa49f37..9d6b3650d3467 100644 --- a/packages/react-components/react-skeleton/library/src/Skeleton.ts +++ b/packages/react-components/react-skeleton/library/src/Skeleton.ts @@ -1,4 +1,4 @@ -export type { SkeletonContextValues, SkeletonProps, SkeletonSlots, SkeletonState } from './components/Skeleton/index'; +export type { SkeletonContextValues, SkeletonItemSize, SkeletonProps, SkeletonSlots, SkeletonState } from './components/Skeleton/index'; export { Skeleton, renderSkeleton_unstable, diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts index e54ab499092b0..069e990666d89 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.types.ts @@ -1,5 +1,4 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -import type { SkeletonItemSize } from '../SkeletonItem/SkeletonItem.types'; import { SkeletonContextValue } from '../../contexts/index'; export type SkeletonSlots = { @@ -10,6 +9,11 @@ export type SkeletonSlots = { root: NonNullable>; }; +/** + * Sizes for the SkeletonItem + */ +export type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128; + /** * Skeleton Props */ diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts index 14f197b578a05..5c64ab10fa323 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts @@ -1,5 +1,5 @@ export { Skeleton } from './Skeleton'; -export type { SkeletonContextValues, SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton.types'; +export type { SkeletonContextValues, SkeletonItemSize, SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton.types'; export { renderSkeleton_unstable } from './renderSkeleton'; export { useSkeleton_unstable } from './useSkeleton'; export { useSkeletonContextValues } from './useSkeletonContextValues'; diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts index 59241135dfc7b..a60d98195cab1 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts @@ -1,14 +1,12 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import type { SkeletonItemSize } from '../Skeleton/Skeleton.types'; + +export type { SkeletonItemSize }; export type SkeletonItemSlots = { root: Slot<'div', 'span'>; }; -/** - * Sizes for the SkeletonItem - */ -export type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128; - /** * SkeletonItem Props */ diff --git a/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts b/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts index 22651e1273d57..3872834ffb361 100644 --- a/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts +++ b/packages/react-components/react-skeleton/library/src/contexts/SkeletonContext.ts @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import type { SkeletonItemSize } from '../components/SkeletonItem/SkeletonItem.types'; +import type { SkeletonItemSize } from '../components/Skeleton/Skeleton.types'; const SkeletonContext = React.createContext(undefined); From 816bae81a750d55d411ada4071c229094d3f95c6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 14:36:06 +0000 Subject: [PATCH 04/10] refactor(react-skeleton): Use Pick in SkeletonItemProps Co-authored-by: ValentinaKozlova <11574680+ValentinaKozlova@users.noreply.github.com> --- .../SkeletonItem/SkeletonItem.types.ts | 41 +++++++------------ 1 file changed, 14 insertions(+), 27 deletions(-) diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts index a60d98195cab1..df89a083580a0 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts @@ -1,5 +1,5 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -import type { SkeletonItemSize } from '../Skeleton/Skeleton.types'; +import type { SkeletonItemSize, SkeletonProps } from '../Skeleton/Skeleton.types'; export type { SkeletonItemSize }; @@ -10,33 +10,20 @@ export type SkeletonItemSlots = { /** * SkeletonItem Props */ -export type SkeletonItemProps = ComponentProps & { - /** - * Sets the animation of the SkeletonItem - * @default wave - */ - animation?: 'wave' | 'pulse'; +export type SkeletonItemProps = ComponentProps & + Pick & { + /** + * Sets the animation of the SkeletonItem + * @default wave + */ + animation?: 'wave' | 'pulse'; - /** - * Sets the appearance of the SkeletonItem - * @default opaque - */ - appearance?: 'opaque' | 'translucent'; - - /** - * Sets the size of the SkeletonItem in pixels. - * Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize). - * To set a non-supported size, set `width` and `height` to override the rendered size. - * @default 16 - */ - size?: SkeletonItemSize; - - /** - * Sets the shape of the SkeletonItem. - * @default rectangle - */ - shape?: 'circle' | 'square' | 'rectangle'; -}; + /** + * Sets the appearance of the SkeletonItem + * @default opaque + */ + appearance?: 'opaque' | 'translucent'; + }; /** * State used in rendering SkeletonItem From 13d197f530e9cdfd50218ee15300aa6730cbc388 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 14:45:41 +0000 Subject: [PATCH 05/10] refactor(react-skeleton): Remove SkeletonItemSize re-export from SkeletonItem.types.ts Co-authored-by: ValentinaKozlova <11574680+ValentinaKozlova@users.noreply.github.com> --- .../react-skeleton/library/src/SkeletonItem.ts | 1 - .../library/src/components/SkeletonItem/SkeletonItem.types.ts | 4 +--- .../library/src/components/SkeletonItem/index.ts | 2 +- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-skeleton/library/src/SkeletonItem.ts b/packages/react-components/react-skeleton/library/src/SkeletonItem.ts index dfc0f84ceec0a..f30e8229dee77 100644 --- a/packages/react-components/react-skeleton/library/src/SkeletonItem.ts +++ b/packages/react-components/react-skeleton/library/src/SkeletonItem.ts @@ -1,6 +1,5 @@ export type { SkeletonItemProps, - SkeletonItemSize, SkeletonItemSlots, SkeletonItemState, } from './components/SkeletonItem/index'; diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts index df89a083580a0..90c96541835b7 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.types.ts @@ -1,7 +1,5 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -import type { SkeletonItemSize, SkeletonProps } from '../Skeleton/Skeleton.types'; - -export type { SkeletonItemSize }; +import type { SkeletonProps } from '../Skeleton/Skeleton.types'; export type SkeletonItemSlots = { root: Slot<'div', 'span'>; diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/index.ts b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/index.ts index 3d22f9b76ec57..9f136a182013e 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/index.ts +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/index.ts @@ -1,5 +1,5 @@ export { SkeletonItem } from './SkeletonItem'; -export type { SkeletonItemProps, SkeletonItemSize, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types'; +export type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types'; export { renderSkeletonItem_unstable } from './renderSkeletonItem'; export { useSkeletonItem_unstable } from './useSkeletonItem'; export { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles'; From b5989ee0146552f1a8ca5b3eab4467890bd96047 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 26 Feb 2026 15:08:12 +0000 Subject: [PATCH 06/10] story(react-skeleton): use size={20} on Skeleton and remove size={16} from SkeletonItems in SkeletonRow.stories.tsx Co-authored-by: ValentinaKozlova <11574680+ValentinaKozlova@users.noreply.github.com> --- .../src/Skeleton/SkeletonRow.stories.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx index db57b17533bc3..cc7098ece62c7 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx @@ -29,24 +29,24 @@ export const Row = (props: Partial): JSXElement => { const styles = useStyles(); return (
- +
- +
- - - - + + + +
- - - - + + + +
From 32d6ee7e1e8047b56d13b79763c025205a112c45 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Thu, 26 Feb 2026 16:19:58 +0100 Subject: [PATCH 07/10] change files --- ...eact-skeleton-35c22083-9e08-4a77-9057-e7ee7a429c76.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-skeleton-35c22083-9e08-4a77-9057-e7ee7a429c76.json diff --git a/change/@fluentui-react-skeleton-35c22083-9e08-4a77-9057-e7ee7a429c76.json b/change/@fluentui-react-skeleton-35c22083-9e08-4a77-9057-e7ee7a429c76.json new file mode 100644 index 0000000000000..ecde1adb16cf5 --- /dev/null +++ b/change/@fluentui-react-skeleton-35c22083-9e08-4a77-9057-e7ee7a429c76.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat(react-skeleton): Add size and shape props to Skeleton component", + "packageName": "@fluentui/react-skeleton", + "email": "v.kozlova13@gmail.com", + "dependentChangeType": "patch" +} From 5ad4d7ad82893dc3e6a14e3bfb64fa782c6065df Mon Sep 17 00:00:00 2001 From: Valentyna Date: Thu, 26 Feb 2026 16:29:45 +0100 Subject: [PATCH 08/10] fixed formatting --- .../react-skeleton/library/src/Skeleton.ts | 8 +++++++- .../react-skeleton/library/src/SkeletonItem.ts | 6 +----- .../library/src/components/Skeleton/index.ts | 8 +++++++- .../src/components/SkeletonItem/useSkeletonItem.tsx | 7 ++++++- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/react-components/react-skeleton/library/src/Skeleton.ts b/packages/react-components/react-skeleton/library/src/Skeleton.ts index 9d6b3650d3467..66ae99e820b53 100644 --- a/packages/react-components/react-skeleton/library/src/Skeleton.ts +++ b/packages/react-components/react-skeleton/library/src/Skeleton.ts @@ -1,4 +1,10 @@ -export type { SkeletonContextValues, SkeletonItemSize, SkeletonProps, SkeletonSlots, SkeletonState } from './components/Skeleton/index'; +export type { + SkeletonContextValues, + SkeletonItemSize, + SkeletonProps, + SkeletonSlots, + SkeletonState, +} from './components/Skeleton/index'; export { Skeleton, renderSkeleton_unstable, diff --git a/packages/react-components/react-skeleton/library/src/SkeletonItem.ts b/packages/react-components/react-skeleton/library/src/SkeletonItem.ts index f30e8229dee77..ee90e2f8960d3 100644 --- a/packages/react-components/react-skeleton/library/src/SkeletonItem.ts +++ b/packages/react-components/react-skeleton/library/src/SkeletonItem.ts @@ -1,8 +1,4 @@ -export type { - SkeletonItemProps, - SkeletonItemSlots, - SkeletonItemState, -} from './components/SkeletonItem/index'; +export type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './components/SkeletonItem/index'; export { SkeletonItem, renderSkeletonItem_unstable, diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts index 5c64ab10fa323..d2623ecf2ff76 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/index.ts @@ -1,5 +1,11 @@ export { Skeleton } from './Skeleton'; -export type { SkeletonContextValues, SkeletonItemSize, SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton.types'; +export type { + SkeletonContextValues, + SkeletonItemSize, + SkeletonProps, + SkeletonSlots, + SkeletonState, +} from './Skeleton.types'; export { renderSkeleton_unstable } from './renderSkeleton'; export { useSkeleton_unstable } from './useSkeleton'; export { useSkeletonContextValues } from './useSkeletonContextValues'; diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx index b2f67e1863f39..78da929c233e2 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/useSkeletonItem.tsx @@ -15,7 +15,12 @@ import type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types' * @param ref - reference to root HTMLElement of SkeletonItem */ export const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref): SkeletonItemState => { - const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = useSkeletonContext(); + const { + animation: contextAnimation, + appearance: contextAppearance, + size: contextSize, + shape: contextShape, + } = useSkeletonContext(); const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque', From d5f82d6facac1386e67c98f338f5608a811df9ad Mon Sep 17 00:00:00 2001 From: Valentyna Date: Thu, 26 Feb 2026 18:10:06 +0100 Subject: [PATCH 09/10] generated api --- .../react-skeleton/library/etc/react-skeleton.api.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md b/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md index 6b4f19b57bd82..c8a7cd1d9e578 100644 --- a/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md +++ b/packages/react-components/react-skeleton/library/etc/react-skeleton.api.md @@ -46,11 +46,9 @@ export const SkeletonItem: ForwardRefComponent; export const skeletonItemClassNames: SlotClassNames; // @public -export type SkeletonItemProps = ComponentProps & { +export type SkeletonItemProps = ComponentProps & Pick & { animation?: 'wave' | 'pulse'; appearance?: 'opaque' | 'translucent'; - size?: SkeletonItemSize; - shape?: 'circle' | 'square' | 'rectangle'; }; // @public (undocumented) From 89fe7d363f54ca29920d3f807da4f4641719036a Mon Sep 17 00:00:00 2001 From: Valentyna Date: Mon, 2 Mar 2026 12:30:31 +0100 Subject: [PATCH 10/10] fix build --- .../library/src/components/Skeleton/Skeleton.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx index 588cd106979f9..209e33e6bf08d 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { render, renderHook } from '@testing-library/react'; +import { render } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; import { Skeleton } from './Skeleton'; import { useSkeletonItem_unstable } from '../SkeletonItem/useSkeletonItem'; import { SkeletonContextProvider } from '../../contexts/SkeletonContext';