Storybook: add synonyms for UI components#78951
Open
simison wants to merge 4 commits into
Open
Conversation
Centralize synonym terms so sidebar search can find components by common names (e.g. "form" matches Input), and patch the Storybook manager at dev/build time because search only indexes name and path by default.
simison
added
Storybook
jasmussen
reviewed
Jun 4, 2026
|
|
||
| const meta: Meta< typeof Badge > = { | ||
| title: 'Design System/Components/Badge/Choosing intent', | ||
| synonyms: [ 'chip', 'intent', 'label', 'status', 'tag' ], |
Contributor
There was a problem hiding this comment.
Tag is fine here, can we add that also to FormTokenField?
|
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
|
I like it, only on a code review 👍 👍 Perhaps need a deeper test before the green check. |
|
Size Change: 0 B Total Size: 8.19 MB ℹ️ View Unchanged
|
simison
commented
Jun 4, 2026
| @@ -0,0 +1,101 @@ | |||
| /** | |||
| * Patches Storybook manager runtime so sidebar search includes design system synonyms. | |||
Member
Author
There was a problem hiding this comment.
Apparently, Storybook doesn’t allow add-ons to extend the sidebar search (didn’t dig deeper if that’s true), so the agent went and built some scripts for it. I don’t have experience with Storybook to tell if that’s typical or not, but I'm not super thrilled to see it myself. :-)
It works, but gives me a big pause for merging tho.
simison
commented
Jun 4, 2026
|
|
||
| // Fuse.js requires key weights to sum to at most 1. | ||
| const FUSE_KEYS_REPLACEMENT = `keys: [ | ||
| { name: "name", weight: 0.5 }, |
Member
Author
There was a problem hiding this comment.
Name weight was 0.7 before so could prolly bump it back up.
jasmussen
approved these changes
Jun 4, 2026
jasmussen
left a comment
jasmussen
left a comment
Contributor
There was a problem hiding this comment.
Tentative green light.
aduth
reviewed
Jun 4, 2026
| { "path": "../style-runtime" }, | ||
| { "path": "./tsconfig.src.json" }, | ||
| { "path": "./tsconfig.bin.json" } | ||
| { "path": "./tsconfig.src.json" } |
Member
There was a problem hiding this comment.
I wouldn't expect this change. It means we're no longer type-checking files in bin. Was there a reason it was needed?
aduth
reviewed
Jun 4, 2026
Member
There was a problem hiding this comment.
Ideally, I think this would use the same glob file patterns that the main Storybook build uses, rather than hard-coding specific folders and filename conventions.
It also reminds me a bit of what I'm doing in #78472 , which is: How do we get story metadata out of the stories without reparsing all of the story files. I don't know that a centralized registry of keywords is the best solution, but it's where I landed when confronted with the reality of what this walking/parsing ends up looking like 😅
Member
Author
There was a problem hiding this comment.
Interestingly, I first had synonyms centralised in one file (b9206dd), but I switched to having them in each file separately for better dev-ergonomics; easier not to miss them when they're directly in the component file.
Member
Author
|
FYI I'm planning to open PR upstream for Storybook to suggest synonyms in ~couple weeks when I have time next time. |
Contributor
|
Given this is working well, while we wait for a potential upstream improvement, maybe we could apply this hack more robustly via I investigated how this could look like with the help of an AI agent1. Add the committed patch —
|
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
4 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?
Makes easier to find components by adding synonyms to each UI component:
Screenshots or screencast
Before
"Modal" finds only the old
@wordpress/componentsModal component:"Chip" doesn't find anything:
After
"Modal" surfaces the new
@wordpress/uiDialog, AlertDialog and Drawer components:"Chip" surfaces the new
@wordpress/uiBadge component:Why?
Just quicker to discover right components.
How?
Testing Instructions
Run
npm run storybook:devand try different search terms.Skim through the synonyms added in this PR to see if they make sense; would you remove/add any?
Testing Instructions for Keyboard
Use of AI Tools
yes