How to remove preview body padding in SB 6.0?

[Obiwarn]

This does not work (fixed element.style seems to be "padding: 1 rem"):

<!--  .storybook/preview-body.html -->
<style>
    body {
        padding: 0;
        background-color: #005cc5;
    }
</style>

Any ideas?

[shilman]

try the layout: 'fullscreen' story parameter

[coconewty]

Same issue here, setting isFullscreen: true as per https://storybook.js.org/docs/react/configure/features-and-behavior doesn't fix it.

Must admit I haven't dug far but SB is adding style="margin: 0px; padding: 1rem; display: block; justify-content: initial; align-items: initial; min-height: initial;" to body for some reason.

[shilman]

@coconewty isFullscreen: true isn't the same thing as layout: 'fullscreen'. in .storybook/preview.js:

export const parameters = { layout: 'fullscreen' }

[Obiwarn]

Works great. Thank you.

[coconewty]

Thanks @shilman I missed this.

FYI of anyone else hunting for this, it's here... https://storybook.js.org/docs/react/configure/story-layout

[webunderconstruction]

Thanks @shilman I missed this.

FYI of anyone else hunting for this, it's here... https://storybook.js.org/docs/react/configure/story-layout

Adding some google search keywords;

How to remove default canvas margin in Storybook v6

[mnlfischer]

is it possible to disable it for only specific stories?

[samwyma]

Yeah, second that ^^. Our use case is having a few stories which are full app pages (where padding screws up things like screen positioned elements) where we would like to disable padding, but also having component stories (e.g. buttons) where padding makes the viewing of those components nicer

[mnlfischer]

one solution are decorators but it is annoying set the layout to fullscreen and use decorators on 300 components only for a few pages that needs a fullscreen.

[benjaminbaldoni]

@mnlfischer you can achieve that by using the parameters attribute on each individual story:

export const Primary = Template.bind({})

Primary.args = {
  primary: true,
  label: 'Button',
}

Primary.parameters = {
  layout: 'fullscreen',
}

[mnlfischer]

@mnlfischer you can achieve that by using the parameters attribute on each individual story:

export const Primary = Template.bind({})

Primary.args = {
  primary: true,
  label: 'Button',
}

Primary.parameters = {
  layout: 'fullscreen',
}

misses that in the docs. thanks!

[iamandrewluca]

So to generalise

Affects globally .storybook/preview.ts

import type { Parameters } from '@storybook/react';

export const parameters: Parameters = {
  layout: 'fullscreen'
};

Affects all stories in a file *.stories.tsx

import { Meta } from '@storybook/react';

export default {
  title: 'Stories Name',
  parameters: {
    layout: 'fullscreen',
  },
} as Meta;

Affects single story in a file *.stories.tsx

import { Story } from '@storybook/react';

export const MyStory: Story = () => <div />;
MyStory.parameters = {
  layout: 'fullscreen'
}

[benwinding]

Also worth mentioning that you can use the .addParameters() method too:

storiesOf('pages/home/story', module)
    .add('My story', {}, () => {
      return <div>EXAMPLE</div>
    })
    .addParameters({ layout: 'fullscreen' });

[shilman]

@benwinding For what it's worth, we recommend converting your stories from the storiesOf API to Component Story Format (CSF): https://storybook.js.org/docs/react/writing-stories/introduction

We've even provided a codemod to help automate this migration:

npx sb migrate storiesof-to-csf --glob "src/**/*.stories.js"

[benwinding]

@shilman thanks mate, it will take a while, but could be worth it

[jayarjo]

@iamandrewluca neither one has any effect for me for some reason. Do you need to add some addon for this to have an effect?

UPDATE: Never mind. Turns out our Storybook has additional padding on the #root in preview-head.html.

[diondiondion]

For anyone wondering how to apply this option to individual stories in MDX files:

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

…or set it for all stories in the document:

<Meta
	title="Readme title"
	component={Component}
	parameters={{layout: 'fullscreen'}}
/>