Skip to content

fix: storybook dark mode and component compatibility#7209

Merged
talissoncosta merged 1 commit intomainfrom
fix/storybook-dark-mode
Apr 13, 2026
Merged

fix: storybook dark mode and component compatibility#7209
talissoncosta merged 1 commit intomainfrom
fix/storybook-dark-mode

Conversation

@talissoncosta
Copy link
Copy Markdown
Contributor

@talissoncosta talissoncosta commented Apr 10, 2026 •
edited
Loading

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Contributes to Storybook infrastructure — enables component stories to render correctly in both light and dark mode.

Problem

Storybook docs pages had multiple dark mode issues:

  • Canvas preview wrapper rendered with white background
  • Controls table (argstable) had white backgrounds and invisible text
  • Toolbar had white background
  • Theme didn't toggle reactively when switching via toolbar
  • Components using legacy globals (Select, React, propTypes, Utils) crashed at runtime

Solution

  • DocsContainer (.storybook/DocsContainer.jsx) — Listens to globalsUpdated channel events and switches the Storybook docs theme reactively when toggling light/dark in the toolbar
  • Utils stub (.storybook/stubs/utils.js) — Minimal stub for common/utils/utils to break the circular dependency chain (utils → account-store → constants) that crashes webpack in Storybook. Only provides the functions legacy .js components actually call (keys.isEscape, safeParseEventValue)
  • Legacy globals — Registers React, propTypes, OptionalString, OptionalFunc, and all other prop-type helpers that Input.js and other legacy .js files use without importing
  • Global Select wrapper — Wraps ReactSelect to match the real app's global.Select (className="react-select", classNamePrefix="react-select") so _react-select.scss dark mode selectors work
  • Dark mode CSS (.storybook/docs-theme.scss) — Overrides for .sb-anchor > div (canvas wrapper), .docblock-argstable (controls table), [role='toolbar'] (toolbar), and control button/input elements

How did you test this code?

  1. npm run storybook
  2. Toggle theme via toolbar (moon/sun icon) — docs page, canvas, controls table, and toolbar all switch between light and dark
  3. Verified existing component stories (Button, Banner, Icons, Switch) still render correctly
  4. Verified no errors in browser console

Note: This is PR 1 in a stacked series. Subsequent PRs add chart tokens, components, and feature analytics improvements that depend on these Storybook fixes.

🤖 Generated with Claude Code

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 10, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 10, 2026 5:53pm
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 10, 2026 5:53pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Apr 10, 2026 5:53pm

Request Review

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Apr 10, 2026
@github-actions github-actions bot added the fix label Apr 10, 2026
@talissoncosta talissoncosta marked this pull request as ready for review April 10, 2026 17:58
@talissoncosta talissoncosta requested a review from a team as a code owner April 10, 2026 17:58
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team April 10, 2026 17:58
claude[bot]
claude bot reviewed Apr 10, 2026
View reviewed changes
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

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

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.

Once credits are available, reopen this pull request to trigger a review.

@talissoncosta talissoncosta changed the title fix: Storybook dark mode and component compatibility fix: storybook dark mode and component compatibility Apr 10, 2026
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for kyle-ssg April 10, 2026 17:58
@talissoncosta talissoncosta changed the title fix: storybook dark mode and component compatibility fix: storybook dark mode on docs Apr 10, 2026
@github-actions github-actions bot added fix and removed fix labels Apr 10, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 10, 2026 •
edited
Loading

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-e2e:pr-7209 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api-test:pr-7209 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7209 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-7209 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7209 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7209 Finished ✅ Results ✅

@talissoncosta talissoncosta changed the title fix: storybook dark mode on docs fix: Storybook dark mode and component compatibility Apr 10, 2026
@talissoncosta talissoncosta mentioned this pull request Apr 10, 2026
Closed
4 tasks
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 10, 2026 •
edited
Loading

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  52.6 seconds
commit  5c4f23e
info  🔄 Run: #15975 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  56.6 seconds
commit  5c4f23e
info  🔄 Run: #15975 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  54 seconds
commit  5c4f23e
info  🔄 Run: #15975 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 13 seconds
commit  5c4f23e
info  🔄 Run: #15975 (attempt 1)

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 10, 2026

Visual Regression

16 screenshots compared. See report for details.
View full report

@talissoncosta talissoncosta mentioned this pull request Apr 10, 2026
Open
3 tasks
@talissoncosta talissoncosta changed the title fix: Storybook dark mode and component compatibility fix: storybook dark mode and component compatibility Apr 10, 2026
@talissoncosta talissoncosta linked an issue Apr 10, 2026 that may be closed by this pull request
Implement dashboard functionality for displaying SDK metrics in Feature Analytics charts #6067
Open
@talissoncosta talissoncosta merged commit a7242c2 into main Apr 13, 2026
44 checks passed
@talissoncosta talissoncosta deleted the fix/storybook-dark-mode branch April 13, 2026 13:06
@flagsmithdev flagsmithdev mentioned this pull request Apr 13, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments

@Zaimwa9 Zaimwa9 Zaimwa9 approved these changes

Assignees

No one assigned

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Implement dashboard functionality for displaying SDK metrics in Feature Analytics charts

2 participants

@talissoncosta @Zaimwa9