[joshblack]

Closes #8627

This PR fixes skeleton sizing and shape depending on stylesheet order by separating the shared loading appearance from component geometry.

SkeletonBox, SkeletonAvatar, and SkeletonText now use the same .skeleton utility from Skeleton/skeleton.module.css for background color, shimmer, reduced-motion handling, and forced-colors treatment. Each component owns its dimensions and shape.

Avatar and Text render their own elements instead of composing SkeletonBox. This removes the competing box geometry rather than increasing selector specificity. SkeletonBox keeps its existing delayed-rendering behavior.

Both screenshots render <SkeletonAvatar size={40} /> with the real SkeletonBox CSS appended last.

Before (40px by 16px)	After (40px by 40px)

Changelog

New

None.

Changed

• Share the loading treatment across SkeletonBox, SkeletonAvatar, and SkeletonText without sharing geometry.
• Preserve avatar and text sizing and shape independently of SkeletonBox stylesheet order.
• Cover rendered geometry, responsive sizing, dimension overrides, and shared loading appearance without scanning or copying stylesheet rules.

Removed

None.

Rollout strategy

• No changes needed in github/github-ui
• Needs changes in github/github-ui
• Ships with feature flag(s)
• Not sure
• None

Patch release. No public API changes or consumer migration are needed.

Testing & Reviewing

The component tests assert rendered size, shape, shared loading appearance, and existing dimension overrides. Responsive avatar coverage includes all three breakpoints, and text coverage includes single and multiple lines.

For manual review, follow the browser-console reproduction in #8627. A 40px avatar should remain a 40px circle after appending the box styles. Square avatars should retain their square shape, and responsive avatars should retain their configured height at each breakpoint. Also check text sizes and multiline rendering, along with reduced-motion and forced-colors behavior.

[changeset-bot]

🦋 Changeset detected

Latest commit: b7bcb7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

🟢 Approval recommended

The narrow specificity fix addresses the reported cascade conflict, includes targeted regression coverage, and has no unresolved findings.

No open issues 🎉

What changed in this PR

Fixes #8627 by making SkeletonAvatar sizing and shape independent of whether shared SkeletonBox styles load last, without changing the public API.

Changes:

• Increases avatar selector specificity using its existing component identifier.
• Adds five regression cases covering circular and square avatars and three responsive breakpoints.
• Includes a patch changeset for @primer/react.

File	Description
packages/​react/​src/​SkeletonAvatar/​SkeletonAvatar.test.tsx	Verifies dimensions and shape with box styles appended last.
packages/​react/​src/​SkeletonAvatar/​SkeletonAvatar.module.css	Gives avatar styles precedence over shared box styles.
.changeset/​skeleton-avatar-style-precedence.md	Records the fix for a patch release.

_{Review effort: Balanced}