chore: forward @primer/react theming from @primer/styled-react under FF#7800
chore: forward @primer/react theming from @primer/styled-react under FF#7800francinelucca wants to merge 6 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: 45b46a7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
|
Forward theming from @primer/styled-react to @primer/react under FF.
There was a problem hiding this comment.
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_providersto@primer/reactdefault feature flags. - Added
FeatureFlaggedTheming.tsxin@primer/styled-reactto switchThemeProvider,useTheme, andBaseStylesbased on the flag. - Updated
@primer/styled-reactexports 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
useColorSchemeVaris always re-exported from the styled-react ThemeProvider. When the feature flag is enabled,ThemeProviderswitches to@primer/react's ThemeProvider, so the styled-react theme context is no longer populated anduseColorSchemeVarwill always fall back (it readscolorSchemefrom the styled-react context default). This should be feature-flagged the same way asuseTheme(e.g. delegate to@primer/react'suseColorSchemeVarwhen enabled).
export {useColorSchemeVar}
- Files reviewed: 5/5 changed files
- Comments generated: 2
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
…ithub.com:primer/react into chore/styled-react-forward-react-theming-under-ff
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/19716 |
| "@primer/styled-react": patch | ||
| --- | ||
|
|
||
| chore: forward @primer/react theming from @primer/styled-react under FF |
There was a problem hiding this comment.
(nit) would this same changelog show up for both the packages?
I'd suggest splitting them or skipping the changelog for primer/react
siddharthkp
left a comment
There was a problem hiding this comment.
tiny nit, approving in advance
Relates to https://github.com/github/primer/issues/6635
Changelog
New
primer_react_styled_react_use_primer_theme_providers, toDefaultFeatureFlags, enabling toggling between Primer's and styled-components' theming providers.FeatureFlaggedTheming.tsx, which exportsThemeProvider,useTheme,BaseStyles, anduseColorSchemeVarcomponents/functions that switch behavior based on the feature flag's state.index.tsxto re-export theming types and components fromFeatureFlaggedTheminginstead of the previous locations, centralizing the feature-flagged logic.Rollout strategy
Testing & Reviewing
Merge checklist