storybook: [Bug]: Addon-Docs doesn't render Canvas/Docs tabs in v7

+++ the docs tab was nice

I found this mention in the Storybook 7 blog post, but as I mentioned, the addon-docs README is still giving outdated information. I suppose the best fix here is to update the documentation.

For those who also want the closest behavior to Storybook 6 + addon-docs (which required zero-config to show the Docs tab), you’ll need to add the following to your main.js:

docs: {
  autodocs: true,
}

The Docs tab was very nice. Dear Storybook team, please consider the ability to enable it and disable this new “Docs” page, IMHO the tab is way handier. Thank you 🙌

Just chiming in here with similar sentiment!

+1 on providing configuration options to show a docs/canvas tab like before.

This is an intentional UI change in 7.0, which is a breaking release. If this change is negatively affecting you, can you describe the problem here?

For our project(mb for part of storybook community as well), removing Docs tab per story/component is a huuuuuge STEP BACK! We’ve rely heavily on clicking on a story/component tab to open it doc section for fast copy paste code there or to read something useful and specisific for that component(check image 1). Now it opens canvas, showing how good looking is our component only (nothing more - check image 2), which is absolutely useless in our case. In the same time we have a bunch of useless generated tabs with canvas that bloating new side navigation bar. Tutorials and examples in official documentation with 2-3 stories are ok, but reality is different. Our stories/components per document are quite a lot, pages too long (check image 3), and now with autodocs and common generated doc file we have to search there for some story/component to scroll there and then to copy paste the code, which is a clumsy, long way for such quick and easy to be done task. In this context Im curious why there is no flexible options to choose between new v7 approach with common Doc and older v6(IMHO better) approach to set doc per story with auto scroll to it section. It could be really good to implement that flexibility in your feature releases.

image: 1 v6 storybook

image: 2 v7 storybook

image: 3 In some cases stories are really a lot as here with inputs.

For anyone who is looking, here is the post describing the docs changes in 7.0: https://storybook.js.org/blog/storybook-7-docs/

And there is an entire section in the MIGRATION docs describing the changes at a technical level: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-docs-changes

This isn’t a bug, it’s just a new architecture that’d been implemented.

As stated in the docs, here’s a solution:

“And if you want autodocs applied to all stories, set it in ./storybook/main.js. More options here.”

//.storybook/main.js

module.exports = {
  docs: {
    autodocs: true
  }
};

Hello,

I wanted to add my (my team’s) voice to the chorus of people who have found this feature extremely useful. Having an additional line of documents on the side nav makes it more cluttered and hence hard to discover content. It was much more convenient to have a doc tab for each component designed on storybook rather than the current layout.

That was a really nice feature having the docs tab always available. I just realized that it was intentionally removed via this issue. The page still suggests that the doc tab is still available https://storybook.js.org/addons/@storybook/addon-docs

I think adding an option in the storybook configuration would be good to switch to the previous behavior. By doing this everyone will be happy with the change.

The Canvas/Docs tabs are also extremely useful to our teams - we often use Storybook for fully featured pages and now viewing the pages and page variations inside of the Autodocs page is not as helpful.

Examples:

• ContentX List Page
• ContentX List Page w/ Filters
• ContentX List Page - Admin View
• ContentX List Page - Future State

Each of these pages are used by different teams and having direct access to the page and it’s specific docs is important. In Storybook 6 it would automatically generate these, now it appears we have to create MDX files for each page now if we want separate docs?

@mightym can you please provide an option to run docs as in version 6 in a tab instead in the sidebar? it breaks the UI which have another 2 tabs (we have tab for canvas, API (custom notes tab), we need the docs to be in one as well according to the design guidelines… Why do breaking changes over UI and UX if there aren’t wanted at all? what’s the benefit of removing working solution?

You yourself use a separate component to explain things. That’s what documentation is for. I can’t imagine creating one component for UX comments and another for development explanations. Please give us Canvas and Docs back 😃

I also need this Cacas/Docs tab toggle for the following reason: some components will have multiple examples, each with a docs file.

The fact that clicking on a story in the navigation takes you to the canvas mode for that story instead of linking to the specific section within the docs page is a deal breaker for us. 😢 I agree with others that ideally it should be optional. Thanks!

I was manually upgrading from Storybook 6 to 7 and noticed the “Docs” tab disappeared with no errors and I couldn’t find any documentation explaining this breaking change until I found this GitHub issue. The official docs for the addon shows a Docs tab. A bit odd

My project has stories.tsx for each of my React components and I rely on the addon + TypeScript comments to generate the docs. I customised the DocsContainer to sprinkle on some theming (I also use storybook-dark-mode)

Btw when I enable the autodocgen flag I don’t see a tab anymore and instead see a menu item - is this intentional?

While the autodocs: true workaround solves the missing docs, it has a side effect that clicking a component opens its docs instead of its storybook/canvas. Is there a way of moving the docs to the bottom of the list, so the canvas opens by default?

edit: I managed to move stories to the top by customizing preview.js/.ts:

export const parameters = {
  options: {
    storySort: (a, b) => (a.type == 'story' ? 0 : 1) - (b.type == 'story' ? 0 : 1),
  },
}

Thank you for the reply! As I mentioned, our team is used to using the Canvas/Docs tabs provided by addon-docs. I didn’t see anything in the release notes about this behavior change, and in fact, the docs for the RC that I linked to still show these tabs in the screenshots.

What’s the reason for the change, and what’s the new expected usage pattern? I though this was the whole purpose of addon-docs…

Please give us Canvas and Docs back 🥇