Skip to content

feat: add CSS Layer support to navigation and skeleton styles#7956

Draft
joshblack wants to merge 3 commits into
css-layers/05-page-layoutfrom
css-layers/06-navigation-skeletons
Draft

feat: add CSS Layer support to navigation and skeleton styles#7956
joshblack wants to merge 3 commits into
css-layers/05-page-layoutfrom
css-layers/06-navigation-skeletons

Conversation

@joshblack

@joshblack joshblack commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Part of https://github.com/github/primer/issues/6275

Migrates ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, and TabNav styles into named Primer component CSS layers.

Changelog

New

  • Adds CSS layer coverage for ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, and TabNav.

Changed

  • Wraps ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, and TabNav CSS module styles in named @layer primer.components.* layers.

Removed

  • None

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

  • Run cd packages/react && npx vitest run src/__tests__/css-layers.test.ts --config vitest.config.mts.
  • Review this PR as part of the CSS layers stack; this entry covers ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, and TabNav.

Merge checklist

@changeset-bot

changeset-bot Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 649fdd1

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 github-actions Bot added the staff Author is a staff member label Jun 9, 2026
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

⚠️ 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.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 9, 2026
@joshblack joshblack changed the title css layers/06 navigation skeletons feat: add CSS Layer support to navigation and skeleton styles Jun 9, 2026
@primer

primer Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

🤖 Lint issues have been automatically fixed and committed to this PR.

@joshblack joshblack force-pushed the css-layers/05-page-layout branch from 56e76ad to 4c00529 Compare June 9, 2026 20:14
@joshblack joshblack force-pushed the css-layers/06-navigation-skeletons branch from 7610873 to 324b2e2 Compare June 9, 2026 20:14
@github-actions github-actions Bot requested a deployment to storybook-preview-7956 June 9, 2026 20:19 Abandoned
@primer

primer Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

🤖 Lint issues have been automatically fixed and committed to this PR.

@joshblack joshblack force-pushed the css-layers/05-page-layout branch from 4c00529 to e936376 Compare June 9, 2026 20:24
@joshblack joshblack force-pushed the css-layers/06-navigation-skeletons branch from 324b2e2 to 633bb05 Compare June 9, 2026 20:24
@joshblack joshblack force-pushed the css-layers/05-page-layout branch from e936376 to c25bf0e Compare June 9, 2026 20:27
@joshblack joshblack force-pushed the css-layers/06-navigation-skeletons branch from 633bb05 to 2b67d6e Compare June 9, 2026 20:27
@github-actions github-actions Bot requested a deployment to storybook-preview-7956 June 9, 2026 20:28 Abandoned
joshblack and others added 3 commits June 9, 2026 15:28
@joshblack
feat: add CSS Layers to 06-navigation-skeletons
305a919 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@joshblack
chore: remove Select CSS whitespace
38b804a 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@joshblack
chore: standardize CSS layer changeset wording
649fdd1 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@joshblack joshblack force-pushed the css-layers/05-page-layout branch from c25bf0e to 29db7bc Compare June 9, 2026 20:29
@joshblack joshblack force-pushed the css-layers/06-navigation-skeletons branch from 2b67d6e to 649fdd1 Compare June 9, 2026 20:29
@github-actions github-actions Bot requested a deployment to storybook-preview-7956 June 9, 2026 20:33 Abandoned
@primer

primer Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

🤖 Lint issues have been automatically fixed and committed to this PR.

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

Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm staff Author is a staff member

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@joshblack