Skip to content

feat(ThemeProvider): add contextOnly prop to prevent rendering of wrapping div - #7898

Merged
TylerJDev merged 3 commits into
mainfrom
chore/add-div-opt-out-prop-to-theme-provider
May 29, 2026
Merged

feat(ThemeProvider): add contextOnly prop to prevent rendering of wrapping div#7898
TylerJDev merged 3 commits into
mainfrom
chore/add-div-opt-out-prop-to-theme-provider

Conversation

@francinelucca

Copy link
Copy Markdown
Member

Relates to https://github.com/github/primer/issues/6568

Seeing some issues in dotcom as a result of rendering the ThemeProvider div when switching from @primer/styled-react (no div) to @primer/react ThemeProvider. Adding opt-out mechanism via contextOnly prop.

Changelog

New

  • Added a contextOnly prop to ThemeProviderProps and updated the implementation so that when contextOnly is true, the provider only supplies theme context without rendering a wrapping <div> with data-* attributes.
  • Added comprehensive tests for the new contextOnly behavior, verifying both the absence of the wrapper <div> and that theme context is still provided to descendants.
  • Added a no-op contextOnly prop to ThemeProviderProps for API compatibility with @primer/react, as documented in the prop's comment.

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

Merge checklist

@francinelucca
francinelucca requested a review from a team as a code ownerMay 28, 2026 23:34
@changeset-bot

changeset-botBot commented May 28, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 43b2c1c

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

This PR includes changesets to release 2 packages
NameType
@primer/styled-reactMinor
@primer/reactMinor

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-actionsgithub-actionsBot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 28, 2026
@github-actions

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.

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Adds a contextOnly option to @primer/react’s ThemeProvider so consumers can opt out of the extra wrapping <div> (while still receiving theme context), aligning migration ergonomics from @primer/styled-react.

Changes:

  • Added contextOnly?: boolean to ThemeProviderProps and updated ThemeProvider rendering behavior when enabled.
  • Added unit tests asserting wrapper <div> presence/absence and that theme context remains available when contextOnly is set.
  • Updated package-lock.json entries to reflect @primer/react version 38.25.0 as referenced by workspace/example package manifests.
Show a summary per file
FileDescription
packages/styled-react/src/components/ThemeProvider.tsxAdds a no-op contextOnly prop for API compatibility with @primer/react.
packages/react/src/ThemeProvider.tsxImplements contextOnly behavior by skipping the wrapper <div> and only rendering the context provider.
packages/react/src/tests/ThemeProvider.test.tsxAdds test coverage for the new contextOnly behavior.
package-lock.jsonUpdates lockfile to reflect @primer/react version 38.25.0 references.

Copilot's findings

  • Files reviewed: 3/4 changed files
  • Comments generated: 1

Comment threadpackages/react/src/ThemeProvider.tsx
@github-actions
github-actionsBottemporarily deployed to storybook-preview-7898 May 28, 2026 23:56 Inactive
Copilot stopped work on behalf of francinelucca due to an error May 29, 2026 00:15
@francineluccafrancinelucca added the Canary Release Apply this label when you want CI to create a canary release of the current PR label May 29, 2026
Copilot stopped work on behalf of francinelucca due to an error May 29, 2026 01:14
@primer-integration

Copy link
Copy Markdown

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/21854

@primer-integration

Copy link
Copy Markdown

Integration test results from github/github-ui:

Passed CI  Passed
Passed VRT  Passed
Passed Projects  Passed

All checks passed!

@TylerJDev
TylerJDev merged commit da27739 into mainMay 29, 2026
53 checks passed
@TylerJDev
TylerJDev deleted the chore/add-div-opt-out-prop-to-theme-provider branch May 29, 2026 13:10
@primerprimerBot mentioned this pull request May 29, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Canary ReleaseApply this label when you want CI to create a canary release of the current PRintegration-tests: recommendedThis change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpmstaffAuthor is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@francinelucca@jonrohan@TylerJDev