14

How do i disable the 'docs' (addons-docs) tab on a per story basis?

I've tried adding the key values below to a story, but nothing seems to work.

parameters: {
  docs: { disable: true, hidden: true }
},

I'm running Storybook 5.3.8.

Jele
  • 215
  • 1
  • 2
  • 11

5 Answers5

12

This will hide docs panel and show canvas only:

  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
  },

Tabs container will be hidden, if you have only one tab

Do Async
  • 4,081
  • 1
  • 22
  • 25
  • Be aware of by hiding the "Docs" panel, when navigating from the docs path from a different component, user wouldn't have a way to view the "Canvas" on the target component, as the link is not changed: `http://localhost:6006/?path=/docs/foo` – Downhillski Apr 01 '21 at 02:05
  • @Downhillski is correct, but it's possible to avoid this by setting `viewMode: 'story'` in `parameters`, as shown in [the Docs recipe "Controlling a story's view mode."](https://github.com/storybookjs/storybook/blob/761501bf1344c5bab34e881702cc1938557b611c/addons/docs/docs/recipes.md#controlling-a-storys-view-mode) – Adam Vigneaux Mar 03 '22 at 17:14
11

I managed to do it with the v6.0.0-alpha.28 (@storybook/*@next) with the new parameters:

  previewTabs: {
    docs: { hidden: true },
  }

I've added the default config on preview.js:

addParameters({
  previewTabs: {
    docs: {
      hidden: false
    },
    canvas: {
      title: 'Story',
      hidden: false,
    },
  },
})

and also repositioned the Docs to be the first tab on manager.js:

import { addons } from '@storybook/addons';

addons.setConfig({
  previewTabs: {
    'storybook/docs/panel': { index: -1 },
  },
});

Hope it works on the long term :) Enjoy!

Mateo Tibaquira
  • 2,059
  • 22
  • 23
10

Inside your MyStory.stories.j[t]sx file

To hide the "Docs" tab:

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            'storybook/docs/panel': { hidden: true }
        },
        viewMode: 'canvas',
    }
};

To hide the "Canvas" tab:

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            canvas: { hidden: true},
        },
        viewMode: 'docs',
    }
};

The viewMode: 'docs/canvas' it's necessary to set the default tab in that view, otherwise storybook will show the last tab opened in the previous view.

Juanma Menendez
  • 17,253
  • 7
  • 59
  • 56
7

Old Answers give you the technique to hide the docs but if someone will change the URL from story to docs, it will show the results, so I am giving you the way to perfectly remove the docs tab.

1st Method

If you added the @storybook/addon-docs package to your package.json and added it into .storybook/main.js ( addon array ) then remove it and restart your storybook webpack server.

2nd Method

In the latest version of the storybook, it recommends to add an essentials addon package coming from storybook that contains multiple addons such as actions, backgrounds, controls, docs, viewport, toolbars.

So if you installed that package and added it into the .storybook/main.js addon array then you disable it with the below code.

Replace your code from

module.exports = {
  addons: [
    ...,
    '@storybook/addon-essentials',
  ],
};

TO

module.exports = {
  addons: [
    ...,
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: false,
      },
    },
  ],
};
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
  • 2
    Hi Nisharg, your answer will completely hide the `docs` tab in the stories. However, the questions asks for removal of `docs` tab on an individual story. – Sai Nikhil Mar 24 '21 at 15:36
  • @SaiNikhil yes you are right but I posted here because if in the future someone wants that answer so her/she can find it easily – Nisharg Shah Mar 24 '21 at 20:47
  • For removal of docs tab on an individual story see https://stackoverflow.com/a/67002340/2307317 – dimitrieh Oct 27 '21 at 16:33
0

Now if you're using storybook 7, you just remove this line in your *.stories.ts (I use typescript) file : tags: ['autodocs'],. It will disable and hide the docs for the story.

AinahToky Andry
  • 11
  • 3