Storybook: Ability to hide Canvas Tab

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

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.

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!

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.

@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

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.

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

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

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

@sanchez see https://github.com/storybookjs/storybook/pull/7966

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!

No I want this!

On Thu, Oct 24, 2019, 3:44 AM stale[bot] notifications@github.com 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
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECEBR5Q#issuecomment-545790198,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

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.

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

@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?

@matiasmenker Not currently https://github.com/storybookjs/storybook/issues/6700

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

Lars it's not super easy. the way preview.js works: https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267-L300

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.

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

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.

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.

@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

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.

You can track the release status here https://github.com/storybookjs/storybook/issues/9311

@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.

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.