Skip to content

chore: forward @primer/react theming from @primer/styled-react under FF#7800

Open
francinelucca wants to merge 6 commits intomainfrom
chore/styled-react-forward-react-theming-under-ff
Open

chore: forward @primer/react theming from @primer/styled-react under FF#7800
francinelucca wants to merge 6 commits intomainfrom
chore/styled-react-forward-react-theming-under-ff

Conversation

@francinelucca
Copy link
Copy Markdown
Member

@francinelucca francinelucca commented Apr 30, 2026

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

Changelog

New

  • Added a new feature flag, primer_react_styled_react_use_primer_theme_providers, to DefaultFeatureFlags, enabling toggling between Primer's and styled-components' theming providers.
  • Implemented FeatureFlaggedTheming.tsx, which exports ThemeProvider, useTheme, BaseStyles, and useColorSchemeVar components/functions that switch behavior based on the feature flag's state.
  • Updated index.tsx to re-export theming types and components from FeatureFlaggedTheming instead of the previous locations, centralizing the feature-flagged logic.

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

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 30, 2026

🦋 Changeset detected

Latest commit: 45b46a7

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

This PR includes changesets to release 2 packages
Name Type
@primer/react Patch
@primer/styled-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 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 Apr 30, 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.

Forward theming from @primer/styled-react to @primer/react under FF.
@francinelucca francinelucca marked this pull request as ready for review April 30, 2026 03:54
@francinelucca francinelucca requested a review from a team as a code owner April 30, 2026 03:54
Copilot AI review requested due to automatic review settings April 30, 2026 03:54
@francinelucca francinelucca added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Apr 30, 2026
@github-actions github-actions Bot requested a deployment to storybook-preview-7800 April 30, 2026 03:57 Abandoned
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

This PR introduces a feature-flagged theming “forwarder” in @primer/styled-react so consumers can toggle between the legacy styled-components theming implementation and @primer/react’s theming providers.

Changes:

  • Added primer_react_styled_react_use_primer_theme_providers to @primer/react default feature flags.
  • Added FeatureFlaggedTheming.tsx in @primer/styled-react to switch ThemeProvider, useTheme, and BaseStyles based on the flag.
  • Updated @primer/styled-react exports to route theming exports through the feature-flagged module, and added browser tests + changeset.
Show a summary per file
File Description
packages/styled-react/src/index.tsx Redirects theming exports (ThemeProvider/BaseStyles + types) to the new feature-flagged entrypoint.
packages/styled-react/src/components/FeatureFlaggedTheming.tsx Implements the feature-flag switch between @primer/react and legacy styled-react theming APIs.
packages/styled-react/src/tests/FeatureFlaggedTheming.browser.test.tsx Adds tests validating behavior when the feature flag is enabled vs disabled.
packages/react/src/FeatureFlags/DefaultFeatureFlags.ts Registers the new feature flag default (false).
.changeset/fuzzy-kangaroos-cover.md Declares patch releases for @primer/react and @primer/styled-react.

Copilot's findings

Comments suppressed due to low confidence (1)

packages/styled-react/src/components/FeatureFlaggedTheming.tsx:40

  • useColorSchemeVar is always re-exported from the styled-react ThemeProvider. When the feature flag is enabled, ThemeProvider switches to @primer/react's ThemeProvider, so the styled-react theme context is no longer populated and useColorSchemeVar will always fall back (it reads colorScheme from the styled-react context default). This should be feature-flagged the same way as useTheme (e.g. delegate to @primer/react's useColorSchemeVar when enabled).
export {useColorSchemeVar}

  • Files reviewed: 5/5 changed files
  • Comments generated: 2

Comment thread packages/styled-react/src/components/FeatureFlaggedTheming.tsx
@primer
Copy link
Copy Markdown
Contributor

primer Bot commented Apr 30, 2026

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

…ithub.com:primer/react into chore/styled-react-forward-react-theming-under-ff
@github-actions github-actions Bot requested a deployment to storybook-preview-7800 April 30, 2026 04:05 Abandoned
@primer-integration
Copy link
Copy Markdown

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

@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!

"@primer/styled-react": patch
---

chore: forward @primer/react theming from @primer/styled-react under FF
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

(nit) would this same changelog show up for both the packages?

I'd suggest splitting them or skipping the changelog for primer/react

Copy link
Copy Markdown
Member

@siddharthkp siddharthkp left a comment

Choose a reason for hiding this comment

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

tiny nit, approving in advance

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