Storybook: [addon-docs]: story-level viewMode specifier not working

[kasperpihl]

Describe the bug
Maybe this is to be expected, but if I have --docs flag on, viewMode doesn't seem to be respected

To Reproduce
Steps to reproduce the behavior:

1. run with --docs
2. set one story with parameters { viewMode: 'story' }
3. navigate to that story
4. See error (it renders with docs mode)

Expected behavior
I expect, that if I run --docs, and I explicitly set the viewMode to story, it should render the iframe with viewMode=story.

Code snippets
.storybook/preview.js

addParameters({
  viewMode: 'docs'
})

Button.stories.js

// CSF
export default {
  title: 'Button',
  component: Button,
  parameters: {
    // reset the view mode to "story" whenever the user navigates to this story
    viewMode: 'story',
  },
}

System:
Environment Info:

System:
OS: macOS 10.15.2
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.21.1 - ~/.yarn/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Safari: 13.0.4

[shilman]

That's not the design of --docs mode. It's meant to export browsable documentation only and even modifies the UI around that. If you want it to default to docs mode and only switch to story mode on certain stories, I'd suggest just using the parameters and not running in --docs mode.

[kasperpihl]

Thanks as always for the quick reply @shilman. Even if I remove --docs it doesn't behave as I'd expect. Same steps as above. It keeps whatever mode it had before, but doesn't force the another viewMode if set explicitly :/

[shilman]

Hmm. 🤔 Well that part's a bug then 😅

[kasperpihl]

Let me know if I can help with anything, or if you can't replicate it, I can dive deeper into why it happens on my end.

[LeBenLeBen]

I can reproduce the issue as well with the following story:

export default {
  title: 'Whatever',
  parameters: {
    viewMode: 'story',
  },
};

If I'm currently browsing Storybook in docs and I go to this story, the view is not switched to "story".

[stale[bot]]

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!

[itaditya]

Facing the same issue. Configuration-

export default {
  title: 'Whatever',
  parameters: {
    viewMode: 'docs',
  },
};

[matheo]

In my case, I want to hide the Canvas tab and browse the Docs by default, but viewMode: 'docs' is not respected and the story is opened by default. I'm using ~6.0.0-alpha.27.

[shilman]

@matheo can you use --docs as a workaround?

[matheo]

@shilman we need to use the Figma addon, so it needs to be next to the Canvas right?

Is there a way to load a Story in the docs view?
I've setup the initial story with:

  api.on(STORIES_CONFIGURED, () => {
    if (api.getUrlState().path === '/story/*') {
      api.selectStory('Overview', 'Page');
    }
  })

but I would need to specify docs instead /story/.
I don't see options in the API Documentation tho
https://storybook.js.org/docs/addons/api/#apigeturlstateoverrideparams

Thanks in advance!

[shilman]

@matheo OK yeah you can't use --docs with addons. TBH i'm not sure how to switch view modes like that. @ndelangen do you know?

[ndelangen]

the way it works, is that --docs forces the viewMode to docs, always.

[matheo]

@shilman @ndelangen it would be nice to have api.selectStory(kind, name, viewMode?) and override any other config. I've used parameters.options.viewMode: 'docs' in preview.js but that messes the overall experience when people are browsing the Canvas and select another story (going back to the Docs view) :(

[marchaos]

Would be good to get this fixed! I can take a look if someone can point me in the right direction?

[stale[bot]]

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!

[shilman]

Fixed in https://github.com/storybookjs/storybook/pull/10292 and available since v6.0.0-alpha.44. Closing!