feat(react-skeleton): Add size and shape props to Skeleton for context-based propagation to children

[Copilot]

• Add size and shape props to SkeletonProps and SkeletonState in Skeleton.types.ts
• Define SkeletonItemSize type in Skeleton.types.ts (not in SkeletonItem.types.ts)
• Add size and shape to SkeletonContextValue in SkeletonContext.ts
• Update SkeletonItem.types.ts to use Pick<SkeletonProps, 'size' | 'shape'> (no separate size/shape definitions, no re-export of SkeletonItemSize)
• Export SkeletonItemSize only from Skeleton component index and public Skeleton.ts
• Update useSkeleton.ts to handle size and shape in state
• Update useSkeletonContextValues.ts to include size and shape in context
• Update useSkeletonItem.tsx to consume size and shape from context
• Update etc/react-skeleton.api.md API docs
• Add tests for context propagation and prop override behavior
• Build and tests passing (46 tests pass)
• Update SkeletonRow.stories.tsx: add size={20} to <Skeleton> and remove size={16} from SkeletonItem elements

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature]: Skeleton should have size and shape props</issue_title>
<issue_description>### Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

This is a follow up issue from this discussion: #31608 (comment)

Currently SkeletonItem accepts size and shape props. But if there are many items with the same values, it would be easier to set those to the parent component Skeleton.

What needs to be added:
It should be possible to pass size and shape props both from the parent component Skeleton and from SkeletonItem.

Current API

// the same for shape
<Skeleton>
   <SkeletonItem size={24} shape="rounded" />
   <SkeletonItem size={24} shape="rounded" />
   <SkeletonItem size={24} shape="rounded" />
 </Skeleton>

Proposed API

<Skeleton size={24}  shape="rounded"> 
  <SkeletonItem />
  <SkeletonItem />
  <SkeletonItem />
</Skeleton>

[edited: @mainframev]

Have you discussed this feature with our team

No

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

Low</issue_description>

<agent_instructions>Add size and shape optional props to the Skeleton component. Check how it's done in react-swatch-picker component with size and shape.

1. Props size and shape should be added to the Skeleton.types.ts
2. In SkeletonItem it should be picked from SkeletonProps
3. Props should be passed from parent to children using context.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@ValentinaKozlova > Hi, this is my first time contributing to MSFT open source, but from what I understand, it might be a good first time issue with the codebase. :) > > Any objections to me taking a crack at this? > > Also will try to unblock myself here, but if there are guides for first-time setup for dev env and stuff like that, I'd really appreciate it! :)

Hello @AkiPraveen , it's great that you want to contribute.

• Here's documentation about development setup: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/dev-env.md
• And here's about dev workflow: https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/dev-workflow.md

Let us know if you have any questions</comment_new>
<comment_new>@ValentinaKozlova
keep open</comment_new>
<comment_new>@ValentinaKozlova
keep open</comment_new>

• Fixes [Feature]: Skeleton should have size and shape props #31664

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[ValentinaKozlova]

@copilot ,
There are still size and shape in SkeletonItem.types.ts
You should use Pick<SkeletonProps, 'size' | 'shape'>; in SkeletonItem.types.ts

[Copilot]

@copilot ,
There are still size and shape in SkeletonItem.types.ts
You should use Pick<SkeletonProps, 'size' | 'shape'>; in SkeletonItem.types.ts

Done in 816bae81. SkeletonItemProps now uses Pick<SkeletonProps, 'size' | 'shape'> instead of duplicating those definitions.

[ValentinaKozlova]

@copilot
update SkeletonRow.stories.tsx.

1. Put size={20} to Skeleton
2. Remove size={16} from all SkeletonItem there

[Copilot]

@copilot
update SkeletonRow.stories.tsx.

1. Put size={20} to Skeleton
   ...

The comment appears to be cut off — "Put size={20} to" doesn't complete. Could you clarify where size={20} should go and what else needs to change in SkeletonRow.stories.tsx?

[ValentinaKozlova]

@copilot
update SkeletonRow.stories.tsx.

1. Put size={20} to Skeleton
   ...

The comment appears to be cut off — "Put size={20} to" doesn't complete. Could you clarify where size={20} should go and what else needs to change in SkeletonRow.stories.tsx?

@copilot ,
size={20} should go to <Skeleton {...props} aria-label="Loading Content"> on line 32

[Copilot]

@copilot
update SkeletonRow.stories.tsx.

...

Done in b5989ee. Added size={20} to <Skeleton> and removed size={16} from all SkeletonItem elements that were using it (the circle/square items with size={24} keep their explicit override since they differ from the parent).

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png	390	Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png	673	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	478	Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	552	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	618	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	601	Changed

vr-tests-react-components/TagPicker 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png	658	Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png	677	Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.291 MB 322.992 kB	1.291 MB 323.028 kB	103 B 36 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.33 kB 68.535 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	108.174 kB 35.695 kB

_{🤖 This report was generated against cbf6cd22febb874c8e360def57b140ea42291902}