Storybook: Try changing to collapsed folders#76361
Merged
Conversation
jasmussen
added
[Type] Developer Documentation
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jasmussen! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
jasmussen
removed
the
First-time Contributor
|
Size Change: 0 B Total Size: 7.66 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 556bb34. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23507148526
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
|
From a design perspective this looks much cleaner and easier to navigate. Seeing the list of root-level items like this makes me think it might be nice to do some re-organisation (in a follow-up). |
Member
|
I'm all for starting collapsed, but pending an upstream fix for the badges. Looks like @aduth identified that the fix is pretty simple, and development there still seems relatively active 🤞 |
Member
Upstream PR: Sidnioulz/storybook-addon-tag-badges#157 |
This was referenced Mar 13, 2026
Contributor
|
@aduth 's fix should now be available in the latest release of |
aduth
reviewed
Mar 19, 2026
Member
|
For the failing test cases, the branch may need a rebase once #76685 lands in |
jasmussen
force-pushed
the
try/storybook-tweaks
branch
from
33ff243 to
bee3f68
Compare
Contributor
Author
|
Gave it a rebase, but in my testing the folders no longer collapse. |
Member
Did you I gave it a try just now and it seems to work as expected, both collapsed-by-default as well as showing the sidebar icons in an expanded section. 
|
Contributor
Author
|
Oh maybe I didn't! In any case, that looks great. Is this ready to land? |
ciampo
approved these changes
Mar 25, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Looks like this is good to merge, let's try it out 🚀
Contributor
Author
|
Thank you all! |
adamsilverstein
pushed a commit
that referenced
this pull request
Mar 26, 2026
* Storybook: Try changing to collapsed folders * Bump and reenable storybook-addon-tag-badges * Move showRoots configuration into consolidated sidebar config --------- Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
adamsilverstein
pushed a commit
that referenced
this pull request
Mar 31, 2026
* Storybook: Try changing to collapsed folders * Bump and reenable storybook-addon-tag-badges * Move showRoots configuration into consolidated sidebar config --------- Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
adamsilverstein
pushed a commit
that referenced
this pull request
Apr 7, 2026
* Storybook: Try changing to collapsed folders * Bump and reenable storybook-addon-tag-badges * Move showRoots configuration into consolidated sidebar config --------- Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
This PR changes Storybook to use folders instead of subheading roots for cataloguing stories, and starts them all collapsed by default. Before:
After:
Why?
Storybook is increasingly a home for documentation other than just component docs. Design system, Layout, Tokens all come to mind as important documention that also lives there. Where arguably component documentation is best searched for, such specific foundational information is arguably more discoverable if organically browsed to, which is substantially more glanceable when folders start out collapsed.
Combined with powerful search still being a common way to find components, and a ⇧⌘↓ shortcut for expanding all, this seems overall a legibility and discoverability win for the documentation.
The change from roots to folders is mostly stylistic, but with categories starting collapsed I simply find the sentence case parents to be more legible.
How?
Note: this PR removes component status badges from the sidebar.
Those badges were introduced in #58518, and the reason they are being removed in this PR is that this particular Storybook extension is causing sidebar behavior properties to not function.
This is likely to be fixed upstream, and something we can contribute a patch towards. But at the same time, a different format for component status is being explored for WordPress components altogether. Example:
In that vein, instead of maintaining two different status types, it may be desirable to simplify on just one?
This is nevertheless a decision point that I'd love developer input on. For example if those status badges are thoroughly relied upon, we can block this PR until the issue is fixed upstream, or patched locally pending a contribution.
Testing Instructions
npm run storybook:dev