Disable canvas per story in storybook 6

Question

I am trying to find a way to disable canvas at a story level in the new storybook 6. I am making a library of components and, depending on the story, some of them will only have canvas, while others will only have docs.

I have tried using

myStory.parameters = {
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
};

or

myStory.parameters = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: false,
    },
  },
};

depending on the story. However, this leads to no tab name being shown. As a result of this, the following happens:

1. I have story 1 - only canvas visible
2. I have story 2 - only docs visible
3. I click on story 1 - I see the canvas, as expected
4. I click on story 2 - I see the canvas also, even though it is hidden (I suppose because the tab has been kept from the previous story). As if this is not bad enough, I cannot even click on docs, since no tab name is visible.
5. Same is valid for the reverse (if I start with story 2)

As a workaround for docs, I have found this (thanks to Benjamin, in this post here):

myStory.parameters = {
  docs: { page: null },
};

With this, I can still see both canvas and docs tabs, but the docs one is now empty for the story where this parameter has been set.

I am looking to do something similar for canvas, and have tried

myStory.parameters = {
  canvas: { page: null },
};

myStory.parameters = {
  canvas: { disabled: true },
};

but have not worked.

Answer 1

I don't know if this solution will fit your needs, but the workaroud I found was to write my stories in .mdx and disable canvas on Meta:

import { Meta } from '@storybook/addon-docs/blocks';
import { MyComponent } from './MyComponent';

<Meta
  title="Section/MyComponent"
  parameters={{
    viewMode: 'docs',
    previewTabs: { 
      canvas: { hidden: true } 
     },
  }}
/>

# My markdown title

<Canvas>
  <Story name="mycomponent">
    <MyComponent />
  </Story>
</Canvas>

Answer 2

Yes the tabs are saved from the previous story, but you can set a default view mode for that story, that should solve your problem.

myStory.parameters = {
  previewTabs: {
    canvas: {
        hidden: true,
    },
  },
  viewMode: 'docs',
};

More examples on https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#controlling-a-storys-view-mode

Answer 3

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

To hide the "Canvas" tab:

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

To hide the "Docs" tab:

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

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.