Ability to hide Canvas Tab

[B3Kay]

Is your feature request related to a problem? Please describe.
I'm always frustrated that Canvas is the main tab. My team use Storybook as a component library but also as a styleguide. We put the styleguide text as Markdown with Notes.

Describe the solution you'd like
I would be able to hide the Canvas tab. So the user doesn't need an extra click to read the Notes.

Maybe something like this?

storiesOf('Addons|Hide Canvas options', module)
    .addParameters({
        options: {
            panelPosition: 'bottom',
            // To hide canvas tab:
            showCanvas: false,
        },
    })
    .add(
        'Story for MyComponent',
        () => <MyComponent />,
        // If you want to set the options for a specific story
        { options: { showCanvas: false } },
    );

Describe alternatives you've considered
An alternative would be that you can config each story which tab should be opened upon clicking the specific story.

Are you able to assist bring the feature to reality?
I can contribute by reading pull-requests and test.

Additional context

[shilman]

We do this in a fairly hardcoded way as part of addon-docs. @ndelangen I wonder if we should make this more configurable.

[ndelangen]

We could 'hide' it, but it must be present in order for storybook to function right now, at least until #4169.

Hiding it via some option would be a possibility.

[stale]

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!

[EduinaA]

I am currently facing the same problem. Ideally, we could have the option to reorder the tabs as we wish so that for example in my case Notes could come first and Canvas later.

[shilman]

@eduina @B3Kay FYI You can currently hide all of the non-docs tabs with the --docs flags, e.g. yarn storybook --docs or yarn build-storybook --docs

[bmayen]

Is there an option to change the order and/or default selection? We would like to use Storybook primarily for Docs functionality but still have the ability to view the canvas. However, with Canvas in the first position and selected by default, newer users sometimes miss the actual documentation included in the MDX files.

[shilman]

@bmayen I'd say that goes into the same feature bucket as hiding canvas tab.

[sanchez]

I would love to see the ability to hide the canvas tab for particular stories as well as being able to hide stories so you have the high-level docs tab for a component and that's it

[sanchez]

My current fix for this is to just not have any "Story" tags in the documentation, however I then loose the ability for the "Show Code" button. Is there any way to have a preview+code without a Story? Thanks

[shilman]

@sanchez see #7966

[stale]

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!

[cgatian]

No I want this!

…

On Thu, Oct 24, 2019, 3:44 AM stale[bot] ***@***.***> wrote: 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! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECEBR5Q#issuecomment-545790198>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ> .

[bennypowers]

At my company, we have two major uses for storybook

1. Documenting our design system - this use case is oriented towards the design and product departments
2. Documenting our web components - this use case is oriented towards the engineering department

In the former case, we'd prefer to only showcase 'real-world examples' with typical content and properties for our components. However in the latter case, we'd prefer to exhaustively document all component properties, with defaults preserved, using minimal placeholder content.

The design-oriented case is perfect for docs mode, while we would still like to retain the canvas for engineers to play with as needed.

However, we all agree that to put our 'best foot forward', the pretty docs mode should be displayed more prominently.

To that end, we'd like to be able to configure storybook to show the "Docs" tab at the far left, with "Canvas" to the right.

[shilman]

Lots of requests for this, both here and in chat. It's probably a general SB UI issue and not a docs-specific thing, but we'll figure out a solution one way or another. cc @ndelangen

[matiasmenker]

@eduina @B3Kay FYI You can currently hide all of the non-docs tabs with the --docs flags, e.g. yarn storybook --docs or yarn build-storybook --docs

If we do that the addons disappear there is some way to show the addons?

[shilman]

@matiasmenker Not currently #6700

[LarsDenBakker]

Running into this myself as well. Any pointers where one could start to work on a PR?

[ndelangen]

Lars it's not super easy. the way preview.js works:

storybook/lib/ui/src/components/preview/preview.js

Lines 267 to 300 in a007de8

	const panels = getElementList(getElements, types.TAB, [
	{
	route: p => `/story/${p.storyId}`,
	match: p => p.viewMode && p.viewMode.match(/^(story|docs)$/),
	render: p => (
	<ZoomConsumer>
	{({ value }) => {
	const props = {
	viewMode,
	active: p.active,
	wrappers,
	id,
	storyId,
	baseUrl,
	queryParams,
	scale: value,
	customCanvas,
	};
	return (
	<>
	{withLoader && (
	<Consumer filter={mapper}>
	{state => state.loading && <Loader id="preview-loader" role="progressbar" />}
	</Consumer>
	)}
	<ActualPreview {...props} />
	</>
	);
	}}
	</ZoomConsumer>
	),
	title: 'Canvas',
	id: 'canvas',

The tab is injected there.

We'd have to detach adding the tab from the rendering of the iframe.

We can't NOT inject the iframe, because the iframe also renders docs & actually tells the manager which stories to display in the explorer.

[atanasster]

@LarsDenBakker - its actually implemented and waiting #9095 , give it a thumbs up to speed up the review and merge process :)

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 containing PR #9095 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[JanST123]

PR #9005 is nice but I am still missing the feature to set a default tab: Even if - for example - the Docs tab is placed to the first position, the canvas tab is active when opening a story.

[kvedantmahajan]

@eduina @B3Kay FYI You can currently hide all of the non-docs tabs with the --docs flags, e.g. yarn storybook --docs or yarn build-storybook --docs

@shilman
Verified on 5.3.7 and 5.3.14 to be not working. Canvas tab is still visible

[kvedantmahajan]

Waiting for this release desperately now. I'm almost done with the upgrade after holding this update for long. @shilman might know my history of bugs raised with addon-info. Off it goes from my project.
Successfully updated. Beautiful usage of CSF and docspage. Loved it!

Please speed this release if possible. Dependent on it.

And thank you for all your support throughout on GitHub issues or medium article. Much appreciated.

[shilman]

You can track the release status here #9311

[dcts]

@B3Kay I have the same issue. You can replace in the storybook url /?path=/story/ with /?path=/docs/ to have the docs selected whenever the storybook is opened.

To hide the button (not ideal fix at all) I am just adding the following CSS to a browser extension that injects CSS (of course this only works for you, your other company members will still see it):

#root > div > div.css-sqdry3 > div > div.css-sqdry3 > div:nth-child(1) > div > div.simplebar-wrapper > div.simplebar-mask > div > div > div > div > div.css-11sh1n2 > div.css-1tgscux > a:nth-child(1) > button {
    display: none;   
}

Not ideal but maybe thats usefull to someone.

[hv-pul]

If anyone is interested, I have a solution that is working well for me.

I created a super simple plugin with this. It's register.js is this:

import { addons } from '@storybook/addons';
import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';

const ADDON_ID = 'YOUR_PLUGIN_ID';

addons.register(ADDON_ID, api => {

	// Check whether we are on a docsOnly page and add a corresponding body class for styling
	const setBodyClass = () => {

		// Needs animation frame to make sure story component has been mounted
		window.requestAnimationFrame(() => {

			// You can change the logic of when to hide the canvas button of course.
			// you have full access to the storybook API, so you can also configure it per-story etc.
			const isDocsOnly = api.getCurrentStoryData().parameters.docsOnly === true;

			if (isDocsOnly) {
				document.body.classList.add('is-docs-only');
			} else {
				document.body.classList.remove('is-docs-only');
			}
		});
	};

	api.on(STORY_RENDERED, setBodyClass);
	api.on(DOCS_RENDERED, setBodyClass);
});

In my manager-head.html

.is-docs-only .os-content a:not([id])[href*="?path=/story"] {
	display: none !important;
}

On my docsOnly pages, I set viewMode: 'docs' to make sure navigation works nicely.

[corysimmons]

I'm sure there is a way to inject global CSS to Storybook via the webpack config or something. So you can do this to hide the Canvas tab:

/* this should get the first link with that path in the URL (which happens to be the Canvas tab) */
[role="main"] [href*="/?path=/story"] {
  display: none;
}

Then add viewMode: 'docs' to auto-focus the Docs tab:

// preview.js
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  viewMode: 'docs' // Add this
}

If someone wants to update this with the correct way to add global CSS to a Storybook, it'd solve this problem for everyone. I'm happy with just the default tab being Docs though.

[sekoyo]

/* this should get the first link with that path in the URL (which happens to be the Canvas tab) */
[role="main"] [href*="/?path=/story"] {
  display: none;
}

Thanks I could have lived with Canvas but found the UX poor with viewMode: 'docs' since if you switch to Canvas it will switch right back to Docs when you click on another story so it might as well not be there! Also being able to change the order would be great.

So I didn't manage to modify webpack to load the .css (tried adding another entry point for it), but I did manage by

• adding global.css to my public dir with

/* Hide the Canvas tab */
[role='main'] .os-content [href*='/?path=/story'] {
  display: none;
}

Ah the joys of css-in-js hashed meaningless classes

• .storybook/manager-head.html with <link rel="stylesheet" href="/global.css" />

Also note I didn't see any changes until starting storybook with manager cache disabled and thereafter it worked.

[ndelangen]

@dominictobias @shilman I think we should -at some point- revisit this part of customization.

I think adding a Addon Type "ToolbarManager" which would be able to receive, then sort,filter,add,substract children would be an option.

We can wrap this here with a user supplied component:

storybook/lib/ui/src/components/panel/panel.tsx

Lines 88 to 92 in ff25d7f

	{Object.entries(panels).map(([k, v]) => (
	<SafeTab key={k} id={k} title={v.title}>
	{v.render}
	</SafeTab>
	))}

To allow them to do whatever with the children?