feat(storybook): add theme toggle to storybook #18123
Conversation
thmsobrmlr
force-pushed
the
storybook-theme-control
branch
from
aac7fb0 to
af21858
Compare
📸 UI snapshots have been updated10 snapshot changes in total. 0 added, 10 modified, 0 deleted:
Triggered by this commit. |
There was a problem hiding this comment.
I guess this needs to be changed (or removed) as we now do this via the theme picker?
There was a problem hiding this comment.
Yeah, I think for the purpose of snapshots we still need the decorator.
BTW looks like the now-unused dark mode and light mode snapshots weren't deleted, we might want to do some pruning of unused snapshots at some point. 🤔
There was a problem hiding this comment.
Yep, I'd like to address this by adding an option to testOptions where you can specify wether "legacy", "3000" or "all" themes should be captured.
I was hoping Storybook would provide a way to set globals for a specific story, so that we could override the theme there, but that doesn't seem to be the case.
# Conflicts: # frontend/__snapshots__/scenes-app-notebooks--headings.png # frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
I'm forcing these stories to use the feature flag now (see visual regression tests). Also I've added one for the "base 3000 nav". |
# Conflicts: # frontend/__snapshots__/posthog-3000-sidebar--feature-flags.png
Problem
We want to test components in all theme variants with storybook.
Changes
This PR adds a theme toggle via Storybook globals to Storybook. The toggle code is not super clean (it also doesn't use
themeLogicand instead sets the theme by updating the theme property onbodyaccordingly), but works in most cases.How did you test this code?
Ran Storybook locally