Storybook: Add an option to hide a story from the sidebar

[rafaelalmeidatk]

Is your feature request related to a problem? Please describe.
I am doing visual regression testing with Storybook iframes. I have some docs pages that aren't specific for a single component, for example, I have an "icons" page that shows all the icons of the library in a grid. I would like to test all these icons but since they are on a docs page, I don't have the iframe available.

Describe the solution you'd like
I would like to be able to create stories that are hidden on the sidebar but can still be accessible by the URL. Perhaps a per-story configuration.

Describe alternatives you've considered
I can create a story just for the icons grid, but it is redundant and a bit out of place since I already have the icons doc page that has a lot more info

Are you able to assist bring the feature to reality?
Yes, if the suggestion makes sense for the project, I can find some time to implement it

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[rafaelalmeidatk]

FWIW, I solved my issue without this feature using the storiesOf API and a env var:

import React from 'react';
import { storiesOf } from '@storybook/react';
import IconsGrid from './IconsGrid';

if (process.env.STORYBOOK_VISUAL_TESTING === 'true') {
  storiesOf('VisualTests', module).add('icons', () => <IconsGrid />);
  storiesOf('VisualTests', module).add('icons-color-size', () => (
    <IconsGrid color="#e04c36" size="24px" />
  ));
}

I still think the feature is useful because my workaround requires the usage of storiesOf so I can't use CSF, if I wanted to hide a specific story in a file with other stories, it would be weird to have the two formats mixed.

[evanmwillhite]

I'm interested in this functionality as well. Our use-case is we're leveraging stories in Storybook _and_ a different app as well (the CSF format is awesome for many reasons!). If we could flag a story as hidden from the Storybook UI, it would allow flexibility in writing them for either or both places.

[shilman]

@evanmwillhite ooh! can you share more about your CSF usage?! super curious.

[evanmwillhite]

@shilman for sure! We have a need for a fully customizable "style guide" (a la Carbon Design System) so we've built a Gatsby theme for that as it offers design and content management flexibility. But for the components section of that style guide - specifically when showing components and their code - we love the idea of being able to use Storybook's generated components for that as it's solved that problem so well (and Storybook is already our choice for component library and development environment so we're invested). But as you can probably imagine, the component library may contain a lot more components and display them differently than a curated style guide (different audiences). There's probably a number of ways to solve this problem, but our first thought was that it would be nice if Storybook could generate the component, but we could specify to hide it from the Storybook menu. We're looking into writing an addon for this right now actually, but any insights you might have would be super helpful!

[shilman]

@evanmwillhite nice!! yeah CSF makes that pretty easy 😁

as for hiding the story from the sidebar, I think we'll probably end up adding it at some point, both based on the upvotes here and I'm pretty sure it's come up other places as well. But I don't have a timeline yet. It should be a pretty simple change, tho perhaps there are a few corner cases to work out. Any proposed APIs for that? Currently the API for hiding it from docs is docs: { disable: true } ... sidebar: { disable: true } cc @ndelangen

[techninja]

@shilman Thanks for the update here, yeah we'd totally love to have that. Perhaps something like sidebarHide: ['variant1', 'variant2']. The big difference between the disable list being that we still build everything for the story variants.

[shilman]

@techninja "build everything"? my proposal for sidebar: {disable:true} would be that the story still gets added to the store, so it would be snapshottable/browseable-by-url/etc.

[techninja]

Yep, sorry that's what I was referring to. I've been attempting to do something like this in an addon though it's not entirely clear the best way to do so, and the docs are a little lacking on any APIs surrounding this.

[stubar]

For those who can't wait for the above proposal, here's a little work around

1. Choose some sort of keyword prefix for your hidden stories e.g. _hidden_
2. Add stories you want hidden using the above prefix

 storiesOf('components', module).add('_hidden_Hero', () => {...
 ```
3. Create a file called `.storybook/manager-head.html`
4. Add the following to this file
 ```
<style>
  [title^='_hidden_']{display: none !important}
</style>

[rafaelalmeidatk]

not stale

[matheo]

sidebar: { disable: true } will be nice to have for v6.0.0

What are the corner cases @shilman?

[shilman]

No corner cases AFAIK. Just adds complexity.

[hipstersmoothie]

This would be a killer feature to have with addon-docs.

I have a bunch of mdx files with designer focused documentation. (not stories.mdx) This file generally just documents the component and references story ids to render stories. A lot of the time we want to add examples in this doc but still want it to be verified with typescript/eslint so we end up creating real stories for them.

The only problem is the sidebar gets cluttered with these stories that aren't as useful or needed when not using addon-docs

---

Context: We are moving to a model where the docs tab is a design focused experience and the canvas tab is more focused on devs. we don't want to inundate our devs with a bunch useless examples

[lopis]

I would like to add that in my case I wanted to hide all stories present in my MDX page from the sidebar. That is to say: I wanted my story to turn back to being a plain page like when the MDX file contains no stories. I explored the addon api a bit to see if this was possible to manipulate, but so far I couldn't find a way.

[shilman]

@lopis partial solution is to run storybook with the --docs flag which collapses components in the nav

[rwieruch]

For those who can't wait for the above proposal, here's a little work around

1. Choose some sort of keyword prefix for your hidden stories e.g. _hidden_
2. Add stories you want hidden using the above prefix

 storiesOf('components', module).add('_hidden_Hero', () => {...

1. Create a file called .storybook/manager-head.html
2. Add the following to this file

<style>
 [title^='_hidden_']{display: none !important}
</style>

Thanks for this! ❤️ If you need a solution for Storybook 6, check out this:

Hide Stories with name only-screenshot-test from sidebar:

.storybook/manager-head.html:

<style>
  [id$='only-screenshot-test'] {
    display: none !important;
  }
</style>

Hide Stories with name only-screenshot-test from docs:

.storybook/preview-body.html:

<style>
  [id$='only-screenshot-test'] {
    display: none !important;
  }
</style>

Please ping here once this is a native feature of Storybook.

[cybervaldez]

If we can add more customization to a story's sidebar that'd be great:

• Label Tags - for visual cues and to enhance search
• Image - Imagine showing a thumbnail or preview of the story. Example
• Ordering - I'd like to move some of my stories to the bottom of the sidebar (ex: 3rd party resources/links)

[ndelangen]

@ghengeveld is working on a lot of sidebar improvements. @ghengeveld maybe this could be added to your list?

[cseas]

@lopis partial solution is to run storybook with the --docs flag which collapses components in the nav

This is what I was looking for. I want to be able to write stories that use controls but the sidebar expansions for component variants just feel useless and extra to me.

However, running with this flag hides the "Notes" tab.

@shilman Is there a way to run storybook with the "--docs" flag and still keep the Notes tab displayed? Basically, just collapse the components in the side nav and hide Canvas but leave the rest of the storybook as it is.