Merge pull request #9229 from storybookjs/core/preview-layouts

[ndelangen]

This adds support for a layout parameter: #8358 (comment)

The parameter has 3 possible values: 'padded' (default), 'fullscreen' & 'center'

Here's how you use it:

export default {
	title: 'my Component',
	parameters: {
		layout: 'fullscreen'
	}
}

This allows users to specify whether they want padding or now, and also deprecates addon-centered, making it a core-feature

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/e0wwmy3hp
✅ Preview: https://monorepo-git-core-preview-layouts.storybook.now.sh

[ghengeveld]

I like the idea of a layout option, but I'm not so keen on this implementation. I don't think we need memoization and I would really like to have the possibility to provide a callback instead of a value so we can determine the value based on the story context.

I would really like to champion this change as soon as I'm back at work.

[ghengeveld]

I updated the branch, refactored some logic to avoid introducing a dependency and added support for layout based on story context.

[ghengeveld]

🎉

[shilman]

🎉🎉🎉

@ndelangen @ghengeveld is there a corresponding documentation and/or MIGRATION update that's missing? 🙏

[ndelangen]

@shilman YES, I think we should add some proper documentation for this.

[frebro]

Trying to get this working on MDX with Vue. Is it supposed to look like this?

<Preview layout="fullscreen">
  <Story name="MyStory">
    {{
      components: { MyComponent },
      template: '<MyComponent />'
    }}
  </Story>
</Preview>

I'm using "next" (currently 6.0.0-alpha.18) for all Storybook packages.

[ndelangen]

I'll investigate this @frebro

[frebro]

Tried with your example in the PR above @ndelangen, and it works fine. Hartelijk bedankt!