Custom Layouts

[TheMikeyRoss]

Is your feature request related to a problem? Please describe.

Currently there are 3 options for the layout:

• centered: center the component horizontally and vertically in the Canvas
• fullscreen: allow the component to expand to the full width and height of the Canvas
• padded: (default) Add extra padding around the component

is there anyway I can make my own custom layout that I can use for some stories (not globally) just like I'm currently doing with

parameters: {
    layout: "centered",
}

but instead of centered I want to use my own "foo" layout.

Is there anyway I can do that? if not I think it'd be a nice feature to add.

Describe the solution you'd like

I think in .storybook we can create our custom layouts and include it in the preview.js file so that we can access it in each individual story.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[neptunus]

I've been experimenting with using decorators to solve this but it becomes unwieldy as soon as you have a story that isn't supposed to be rendered inside the core layout because decorators can't be (as far as I can tell) disabled on a story-by-story basis

[yannbf]

Decorators have access to the story context, and therefore, the parameters. You can add any custom parameter you like and use it to ignore your decorator logic:

  decorators: [
    (Story, { parameters: { myCustomDisableOption = false } }) => {
      if(parameters.myCustomDisableOption) return <Story />
      return (<div>
        <Story />
      </div>)
    },
  ],

[AlmarAubel]

is it possible to make the parameters typesafe? So you have autocomplete everey where you use myCustomDisableOption?