configure tabs: title, visibility, order and disable

[atanasster]

Issue: #8631 #8630 #7066

What I did

added the following global configuration/parameters settings:

previewTabs: {
   addon_id: string: {
    title?: string; // new title for the addon tab
    index?: number; // override the place/order of the tabs (by default the change uses the order of the addon_id keys but index can be used to override in the story parameyters
    hidden?: boolean; // wether to hide the addon tab
    disabled?: boolean; // wether to disable the addon tab
  }
},

following formats for configuration:
manager.js:

import { addons } from '@storybook/addons';
addons.setConfig({
  previewTabs: {
    // the order of the tabs is configured by the order here
    canvas: null, // canvas is here simply listed so its place as first tab
    'storybook/docs/panel': 'MDX', // the configuration is either an object or a title string
    'storybookjs/notes/panel': { title: 'Annotations', hidden: true },
    graphiql: {
      hidden: true,
    },
  },
});

and also story specific parameters:

export default {
  title: 'Addons/GraphQL',
  parameters: {
    previewTabs: {
      graphiql: { hidden: false, title: 'GraphiQL' },
    },
  },
};

How to test

1. in official storybook - the manager.js hides by default the Notes and the GraphiQL tabs

2. by going to the Addons/Notes stories, the notes tabs is made visible and shows the globally set custom label:

export default {
  title: 'Addons/Notes',
  parameters: {
    previewTabs: {
      'storybookjs/notes/panel': { hidden: false },
    },
  },
};

3. by going to the Addons/GraphQL stories, the graphic tab is made visible and custom title is set locally (just for the stories here)

export default {
  title: 'Addons/GraphQL',
  parameters: {
    previewTabs: {
      graphiql: { hidden: false, title: 'GraphiQL' },
    },
  },
};

4. by going to the Addons/markdown docs page, the order of the tabs is custom set for the stories here (the Docs tab is first, the Canvas tab is second):

<Meta
  title="Addons/Docs/markdown-docs"
  parameters={{ previewTabs: { 'storybook/docs/panel': { index: -1 }}}}
/>

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/3zsuh571u
🌍 Preview: https://monorepo-git-fork-atanasster-configure-tabs.storybook.now.sh

[atanasster]

added example for hiding 'Canvas' tab in Addon/Docs/docs-only story

<Meta title="Addons/Docs/docs-only" parameters={{ previewTabs: { 'canvas': { hidden: true }}}} />

note: The GraphQL and Notes tabs are already hidden in global config

[atanasster]

made it so if only one panel is currently visible and no toolbar items (TOOL), hide the toolbar entirely

[liamross]

nit: could store as const since this code is repeated here. Obviously the performance isn't a major issue but just in case the requirements to hide the tabs change in the future it would avoid bugs since there would only be one place to update.

[ndelangen]

@liamross I'm merging this. perhaps you'd be able to open a follow-up PR making it just that bit nicer?

[liamross]

@ndelangen I don't think it's important enough to actually change, was just a nitpick

[ndelangen]

👏 @atanasster

[uptonking]

@atanasster
previewTabs: { 'storybook/docs/panel': 'Docs', canvas: { hidden: true,}, };
when I run start-storybook, it still shows canvas tab(2nd tab) by default.
is there a way to show Docs tab(1st tab) by default?

[kumarharsh]

try setting 'storybook/docs/panel': { index: -1 }

[uptonking]

@kumarharsh @atanasster
it didn't work.
when I run start-storybook, it still shows canvas tab(2nd tab) by default, opening url http://localhost:8999/?path=/story/components-button--basic .

I finally made it work by running start-storybook --docs . It opens http://localhost:8999/?path=/docs/components-button--basic by default.

[Martin7mind]

@uptonking but thats hiding the addons etc right?

[uptonking]

@Martin7mind
yes, running start-storybook --docs hides other addons on the separate panel.
but I only use the docs addon.
I think mdx docs + react-live can create much more interactive documentation than the knobs,action addons. And I won't use other addons.
react-live is really a perfect component for using storybook mdx docs.

[shilman]

@uptonking i'd be very interested in seeing what you end up with for react-live, and would love to help you promote it in the broader storybook community

[kumarharsh]

Yeah, i got what you're saying too (facing the same issue). There is a PR (#9141) in progress which should fix this!

[matheo]

made it so if only one panel is currently visible and no toolbar items (TOOL), hide the toolbar entirely

@atanasster the toolbar is indeed hidden but the main content offset is still 40px, is there a way to remove the offset too? it looks kinda ugly when the app has a different background color:

[jescalan]

Hi just want to check if it is possible to make the default tab anything other than canvas? I saw the PR above for initialActive and tried this out, but no matter what I do, it opens to "canvas" every time I open storybook

[chavlji]

Can anyone check why it's not working?