Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

Open
Copilot wants to merge 10 commits intomasterfrom
copilot/add-size-shape-props-to-skeleton
Open

feat(react-skeleton): Add size and shape props to Skeleton for context-based propagation to children#35787
Copilot wants to merge 10 commits intomasterfrom
copilot/add-size-shape-props-to-skeleton

Conversation

Copy link
Contributor

Copilot AI commented Feb 26, 2026

  • 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.

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


💡 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.

Copilot AI changed the title [WIP] Add size and shape props to Skeleton component feat(react-skeleton): Add size and shape props to Skeleton for context-based propagation to children Feb 26, 2026
@ValentinaKozlova
Copy link
Contributor

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

Copy link
Contributor Author

Copilot AI commented Feb 26, 2026

@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
Copy link
Contributor

ValentinaKozlova commented Feb 26, 2026

@copilot
update SkeletonRow.stories.tsx.

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

Copy link
Contributor Author

Copilot AI commented Feb 26, 2026

@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
Copy link
Contributor

@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

… from SkeletonItems in SkeletonRow.stories.tsx

Co-authored-by: ValentinaKozlova <[email protected]>
Copy link
Contributor Author

Copilot AI commented Feb 26, 2026

@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).

@ValentinaKozlova ValentinaKozlova marked this pull request as ready for review February 26, 2026 15:21
@ValentinaKozlova ValentinaKozlova requested a review from a team as a code owner February 26, 2026 15:21
@github-actions
Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link

@github-actions github-actions bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

vr-tests-react-components/Charts-DonutChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 605 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 599 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 46 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 728 Changed

@github-actions
Copy link

github-actions bot commented Feb 26, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.29 MB
322.801 kB
1.29 MB
322.841 kB
103 B
40 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
236.537 kB
68.697 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 26229a953219cf4ec5b4c9f7aeb37070e2cf38db

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Skeleton should have size and shape props

2 participants