[addon-docs] v6.0.0-alpha.2 Visual bugs when hiding tabs

[liamross]

Describe the bug
Found 2 bugs with #9095:

BUG 1: If you navigate directly to a docs-only page with previewTabs: {canvas: {hidden: true} and /?path=/story/, then there is a floating toolbar from the side panel (knobs, actions etc).

There is no workaround that I've found, I tried options: { showPanel: true } but that doesn't work. The only "fix is to not hide the canvas tab.

BUG 2: There is an empty space at the top of the document when tabs are hidden

To Reproduce

1. Create a docs only page and have it as your "entry point" page (Storybook will automatically route to /?path=/story/ if this is the case
2. Create an initial .mdx file with the Meta to something similar to this:

   import { Meta } from '@storybook/addon-docs/blocks';
   
   <Meta title="Basics/Introduction" parameters={{previewTabs: {canvas: {hidden: true}}}} />
   
   # Demo

3. Route to your root path so it redirects to the initial story
4. You will notice both BUG 1 and BUG 2

Expected behavior

For BUG 1, I would expect that there would not be a floating toolbar from a canvas panel in a docs-only page.

For BUG 2, I would expect the docs to fill the height of the story when there is no toolbar.

System:

Environment Info:

System:
OS: macOS Mojave 10.14.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 12.13.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.12.1 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Firefox: 72.0.2
Safari: 12.1
npmPackages:
@storybook/addon-a11y: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addon-actions: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addon-docs: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addon-info: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addon-knobs: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addon-links: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addon-viewport: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/addons: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/preset-typescript: ^1.2.0 => 1.2.0
@storybook/react: ^6.0.0-alpha.2 => 6.0.0-alpha.2
@storybook/storybook-deployer: ^2.8.1 => 2.8.1

[liamross]

OK so... I have a temporary fix but it's not pretty. If you add the following jsx file, and then include the component in your markdown, it will reroute any story routes to docs routes:

EDIT: it wasn't working with urls like github pages with additional pathname, so here's the new fix

Redirect.js

import addons from '@storybook/addons';
import { NAVIGATE_URL } from '@storybook/core-events';
import { useEffect } from 'react';

export function Redirect() {
  useEffect(() => {
    const poll = window.setInterval(() => {
      const search = window.location.search;
      const url = window.location != window.parent.location ? document.referrer : document.location.href;
      const pathMatch = url.match(/[^/]+(\/[^/]+\/)(?=\?)/);
      const path = pathMatch ? pathMatch[1] : '/';
      if (search.includes('viewMode=docs')) {
        return window.clearInterval(poll);
      }
      if (search.includes('viewMode=story')) {
        const match = search.match(/\?id=([\w-]+)/);
        if (!match) return window.clearInterval(poll);
        addons.getChannel().emit(NAVIGATE_URL, `${path}?path=/docs/${match[1]}`);
      }
    }, 100);
    return () => {
      window.clearInterval(poll);
    };
  }, []);
  return null;
}

your-document.mdx

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

<Redirect />

<Meta title="Basics/Introduction" parameters={{previewTabs: {canvas: {hidden: true}}}} />

# Demo

[atanasster]

thanks @liamross - great explanation and example, was able to reproduce on Chrome, but not in Safari - is that also the case for you?

I am tryin to find a fix for this default story test case and will update also on my end, not that easy to bend storybook out of 'story' mode :)

[atanasster]

@liamross - I checked in a change that fixes the use case with your one default mdx story on Chrome.

Are you able to test the dev code or do you need an actual npm release to test things? (no worries if you can't, I myself can only test npm releases or the 'next' branch :)

[liamross]

@atanasster I won't be able to check it until the end of the day, but I was able to reproduce the issue on Safari and Firefox as well locally. Another thing to note is that BUG 1 isn't just a flicker, it stays there permanently

[atanasster]

ok, please share your findings later.

Just so we are on the same page, for me -

1. Storybook always stats in 'story' - mode and displays the toolbar and the addons panels
2. Once the story is loaded, internally my original PR switches it to fake 'docs' mode, but on the screen were remaining residuals of the addons panels. Not something I could even click or anything. This should hopefully be addressed in the new fix PR from yesterday
3. My take that it was not happening on Safari was probably a fluke - its not happening or not visible if your addons are displayed horizontally at the bottom and it seems my Safari browser was like that. While I reproduced your issue only if the addons are displayed vertically alongside the preview window.

Let me know if I dd not understand something from your take.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.3 containing PR #9687 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.