storybook
storybook copied to clipboard
storybookjs
Filter and search components by tag
Is your feature request related to a problem? Please describe. Right now, there isn't a way to filter or search through filtered items in the left navigation. While searching is available to find a specific component, it searches through all available components.
Describe the solution you'd like I would like the ability to filter AND search filtered options based on tag.
For example, the tag could be used to filter components by platform. I imagine by default, it would be set to show all components - but if I want to see just components that support Android, I could select that filter to only show me Android components. For a design system that supports different platforms, this means it's not possible to just see components that are Android, iOS, or web.
When selecting an Android-only component, the viewport should show me a view corresponding to Android. When selecting a component that only supports a web component, I should not be able to toggle my view to a mobile view.
Basically, at a glance, I should be able to see what components are supported based on platform.
Describe alternatives you've considered
- A separate Storybook per tag (messy, duplicate documentation)
- Using the default SB hierarchy and duplicate components based on tag (makes left nav very long, hard to read)
Are you able to assist bring the feature to reality? Yes
Additional context I would love to be able to filter the left nav like this: https://backpack.github.io/components/accordion/?platform=web
I wonder if this could be made slightly more generic and filter by tag rather than an explicit platform, but I'd really like to see an expansion of the search/filter capabilities!
Agreed, being able to filter in some sort of generic pattern would be helpful.
Related: https://github.com/storybookjs/storybook/issues/6483
I could have sworn there was already an issue for this, but I can't find it. I'd love to add this kind of UI to Storybook! cc @domyen
@shilman I notice that searching by parameters.notes (as mentioned in #6483 ) has been removed in storybook@next. This is actually quite a useful workaround but I appreciate is a bit of a hack. So any progress on filtering/searching by tags is a thumbs up from me.
It's a very important issue for non-english speaking users.
For example: I want to find the Icon component by typing Icon, but it's not possible now, because my title is Иконка.
Currently, it looks like the fields that are indexed for search (name and path) are hard-coded here. I'd love to see that become configurable.
I don't think it'll become configurable, but we're definitely keen to improve on it with well-defined features such as tags. Configurable things are a huge pain in the long term because of unknown potential conflicts down the road.
