Padded layout for components in storybook by default

[alex-page]

No description provided.

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	198.26 KB (0%)
polaris-react-esm	133.14 KB (0%)
polaris-react-esnext	188.3 KB (0%)
polaris-react-css	41.75 KB (0%)

[alex-page]

@kyledurand this felt like something that could be cleaned up. Let me know what you think about this PR. The other option is to make all components use layout: fullscreen by default and we could remove this and keep everything as is.

[BPScott]

I've not tested this to prove the layout works but I think conceptually it makes sense to keep the default of padded layout, and explicitly opt particular stories to be fullscreen. Having that extra indent makes it see things like drop shadows on the top edge of an element.

I put a note inline about how we could leverage the classes than the layout prop sets on the body to determine if any extra padding is needed instead of needing the Grid component to have an additional property.

See https://storybook.js.org/docs/react/configure/story-layout for context about the layout parameter

[kyledurand]

This looks good but I do like Ben's suggestion of a purely css approach. Might be slightly tough to manage that for centered layouts. Those wouldn't likely work with the grid overlay anyway though

[BPScott]

Might be slightly tough to manage that for centered layouts. Those wouldn't likely work with the grid overlay anyway though

Yeah I'm fine with punting on centered layouts, and having the grid on them act the same as the fullscreen style grid. We don't have anything that uses the centered layout anyway.