Global layout parameter isn't applied to DocsPage canvas

[robbertkl]

Describe the bug

When I add a global layout parameter (e.g. layout: 'fullscreen') in preview.js it gets applied to the Canvas tab of all stories. However, it does not get applied to the stories / Canvas element on my MDX DocsPage. I would still need to set this manually for it to work:

<Canvas>
  <Story name="storyname" parameters={{ layout: 'fullscreen' }}>

To Reproduce

Add a global layout parameter to .storybook/preview.js and check out a docs page with a story wrapped in a canvas.

Expected behavior

I expected the docs page story to apply the same global parameters and not need to manually add the parameters to every story.

System:

Environment Info:

System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Binaries:
Node: 14.8.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.7 - /usr/local/bin/npm
Browsers:
Chrome: 84.0.4147.125
Firefox: 75.0
Safari: 13.1.1
npmPackages:
@storybook/addon-controls: ^6.0.13 => 6.0.13
@storybook/addon-docs: ^6.0.13 => 6.0.13
@storybook/react: ^6.0.13 => 6.0.13

[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!

[dmondev]

Hi, is there any workaround for this issue ?

[dmartinjs]

Same problem, but the workaround doesn't seems to work if you use the CSF.

[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!

[gburning]

Hi! Bumping this. I'm setting the layout parameter to fullscreen in the default export of my story but under the docs panel it's still padded. Is the only workaround to manually replace the docs page with a custom MDX file that sets the right layout or can I achieve this with just parameters somehow?

It's not very clear what parameters are available for the various tools/addons in the documentation.

[superkat64]

Hi! Same problem -- I would like to set all my docPage stories to have layout: 'centered' without having to set them all in each individual story but it isn't looking like there is a great way to do this 🤔

Would love anyone suggestions...

[ndelangen]

perhaps a prop on the docs parameter @shilman ?

[tgelu]

This seems to be tagged as "has workaround". What is the workaround @shilman ? :)

[shilman]

@tgelu In the original issue description @robbertkl mentioned that it works if he adds a layout parameter to the Story block, so I added has workaround label. I did not verify the behavior. Though re-reading the issue I doubt that actually works. Removing the label, but please let me know if you find a workaround!

[rschaufler]

It still doesn't work in Storybook 7 Beta 31.

@shilman I found one workaround for this issue by referencing Stories within an MDX file instead of embedding them directly.

Working example of a Web-component story (should work with other frameworks like React too)

my-component.mdx

import { Canvas, Meta, Story } from '@storybook/blocks'

import * as Stories from './my-component.stories'

<Meta of={ Stories } />

# My component

Some documentation

<Canvas>
  <Story of={ Stories.ExampleStory } />
</Canvas>

my-component.stories.tsx

import { html } from 'lit/static-html.js'

export default {
  title: 'Components/MyComponent,
  parameters: {
    layout: 'fullscreen'
  }
}

export const ExampleStory = {
  render: () => html`<my-component title="Hello World"></my-component>`
}

The key here is that in the MDX file you reference the Meta definition of the TSX file by doing <Meta of={ Stories } />.

In the default export of the TSX file, parameters.layout is set to fullscreen and will be respected in the rendered MDX output.

[shilman]

@rschaufler what you shared is the recommended way of using CSF+MDX in 7.0 and beyond. Thank you for following up!

@tmeasday @JReinhold is this something we can fix as we stabilize the changes to the story block?

[JReinhold]

As a matter of fact I was working on this exact thing yesterday. I'm not sure I understand this issue completely, but the next iteration of the Canvas doc block will respect layout defined in the following order:

1. as a prop - <Canvas layout="centered" of={MyStory} />
2. at parameters.docs.canvas.layout
3. at parameters.layout
4. defaults to "padded"

It will take the parameters from the story, which should include whatever is defined globally in preview.js or at the meta level.

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.33 containing PR #20723 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[cr0cK]

Looks like it still doesn't work.

const preview: Preview = {
  parameters: {
    layout: 'fullscreen',
    docs: {
      canvas: {
        layout: 'fullscreen'
      }
    }
  }
}

or

<Meta title="Title" parameters={{
  docs: {
    canvas: {
      layout: 'fullscreen'
    }
  },
  layout: 'fullscreen'
}} />

Temporarily, I found this workaround.

// .storybook/styles.css
// import './styles.css' in .storybook/preview.ts

.sbdocs {
  padding: 0 20px !important;
}

.sbdocs-content {
  width: 100% !important;
  max-width: inherit !important;
}

Which is quite sad but it's working.

[JReinhold]

@cr0cK can you open a new issue with a minimal reproduction showcasing the issue?

https://storybook.js.org/docs/contribute/how-to-reproduce