Filter and search components by tag

[kharrop]

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

[adierkens]

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!

[tylerkrupicka]

Agreed, being able to filter in some sort of generic pattern would be helpful.

[shilman]

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

[tgreyuk]

@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.

[shilman]

Cc @ghengeveld

[monolithed]

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 Иконка.

[TrevorBurnham]

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.

[ghengeveld]

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.

[sysofwan]

+1 this is going to be super useful for discovery

[anjulgarg]

+1 It is a crucial feature for large storybooks with a lot of content.

[jigz]

+1 we need this

[sohamnandi77]

+1 Really in need of this.

[StevenCreates]

+1 Need this

[WalterWeidner]

Will this be possible in Storybook 7?

[domyen]

Update: We implemented the technical underpinnings to support tags in 7.0. Tags power the new automatic docgen functionality.

But it doesn't yet do the filtering - which will come in future releases.

Also, we(maintainers) are super open to contributors who want to help us make filtering and search by tags a reality. That would really help us accelerate this work!

[jrencz]

Is there any initiative to - apart from search by tags - allow a full text search?

Content in MDX documents and descriptions of stories (doc comments) will not benefit from indexing just tags from Meta

[winkerVSbecks]

I'll add a +1 to this. Came up in a couple of research calls recently. It's especially useful for large storybooks.

[nikolasrieble]

@domyen Could you share a bit more about what related work has been done, and how that enables the feature? Also possibly pinpoint a few files / places where to start? It would great reduce the effort for me to look into it, thus increase the chance for a contribution :)

[WalterWeidner]

I'm also interested in contributing to this effort but don't have much context to get started. Honestly, I was hoping this was closer to coming to fruition.

Would this be possible by creating a new plugin?

[jrencz]

Maybe https://pagefind.app/ will be a solution worth considering?

It's integrated in https://starlight.astro.build which I recently checked out an it works pretty well there. And Starlight stack is Astro -> Vite -> Rollup And it seems like it works with no particular configuration thanks to https://pagefind.app/docs/metadata/#automatic-metadata (with one initial exception of defining data-pagefind-body): https://github.com/withastro/starlight/commit/0d4c8a3231e636aae3d040375696c6bc5d5cfd51

Later the UI in there got a bit more complex, https://github.com/withastro/starlight/commit/e5a2e09b8bfe56fa9a70c8bfc2b177bd3904aa8f#diff-75edb5fd723800e6c6dc2e05eaa90c02510d9bff433746a52839e980459712f0 but it still seems like a low-hanging fruit

For Storybook (at least for mine, where I use Vite builder) stack is Storybook -> Vite -> Rollup So here's what I think - if Pagefind works well for result of Rollup in one place, maybe it'll work well for Storybook as well?

EDIT Worth looking at: https://pagefind.app/docs/resources/#using-pagefind-with-a-specific-ssg

[ghengeveld]

Oh that's really interesting! This makes it feasible to search for more than just story metadata (component and story name), such as the actual content.

[jrencz]

@ghengeveld maybe it then deserves a distinct issue created, if it's broader than just about tags?

[ghengeveld]

Yeah I think so. This ticket is about separating search and tags, while replacing search altogether is likely a bigger project. If not picked up by the community then this will have to go on the "betting table" (Shape Up) to get prioritized, which requires a written pitch (proposal).

[jrencz]

I took a look at what's the output of storybook build and now I'm sure it won't be as easy as I wrote initially, but I still see a chance

I created a https://github.com/storybookjs/storybook/discussions/24831 for discussing that idea

[shilman]

Tag filtering RFC here https://github.com/storybookjs/storybook/discussions/25535

[WalterWeidner]

How can we get this moved forward? I think this would be a game changer for Storybook.

One of the biggest complaints we have with Storybook is poor discoverability. Tags would be a huge help for that.

[shilman]

@WalterWeidner This is moving forward. I shipped the tags foundations as part of 8.1 recently https://github.com/storybookjs/storybook/pull/26634 (documentation)

Hoping to ship the interactive filtering from the RFC https://github.com/storybookjs/storybook/discussions/25535 as part of 8.2 in the next couple months.

I'm also hoping to get tags-based badges in a community addon, such as addon-badges or sidebar-statuses. There is a working gist but it needs to be incorporated into an addon that somebody maintains.

[SpanishPear]

Heya @shilman - thanks so much for your work on tags, which I can see was released - and static tags can now be filtered out :D I was attempting to make dynamic filtering of tags in some way (hacking via an addon and globals), and in doing so, came across the RFC, the UI of interactive filtering is precisely what I want 🥳

Is interactive filtering still on the upcoming roadmap?

[shilman]

@SpanishPear indeed! I implemented it in a branch but it's been blocked on design. Thankfully, we have a design now and will hopefully get it out in the coming release (8.4) which is currently being developed. Stay tuned here!