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 owner May 28, 2026 23:34
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 28, 2026

🦋 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
Name Type
@primer/styled-react Minor
@primer/react Minor

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

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

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
File Description
packages/styled-react/src/components/ThemeProvider.tsx Adds a no-op contextOnly prop for API compatibility with @primer/react.
packages/react/src/ThemeProvider.tsx Implements contextOnly behavior by skipping the wrapper <div> and only rendering the context provider.
packages/react/src/tests/ThemeProvider.test.tsx Adds test coverage for the new contextOnly behavior.
package-lock.json Updates lockfile to reflect @primer/react version 38.25.0 references.

Copilot's findings

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

Comment thread packages/react/src/ThemeProvider.tsx
@github-actions github-actions Bot temporarily 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
@francinelucca francinelucca 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 main May 29, 2026
53 checks passed
@TylerJDev TylerJDev deleted the chore/add-div-opt-out-prop-to-theme-provider branch May 29, 2026 13:10
@primer primer Bot mentioned this pull request May 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Canary Release Apply this label when you want CI to create a canary release of the current PR 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

Development

Successfully merging this pull request may close these issues.

4 participants