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

examples/official-storybook/stories/core/layout.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+const Box = ({ children, display = 'block' }) => (
+  <div style={{ display, border: '2px solid #FF4785', padding: 10 }}>{children}</div>
+);
+
+export default {
+  title: 'Core/Layout',
+};
+
+export const Default = () => <Box>padded by default</Box>;
+
+export const PaddedBlock = () => <Box>padded</Box>;
+PaddedBlock.story = { parameters: { layout: 'padded' } };
+
+export const PaddedInline = () => <Box display="inline-block">padded</Box>;
+PaddedInline.story = { parameters: { layout: 'padded' } };
+
+export const FullscreenBlock = () => <Box>fullscreen</Box>;
+FullscreenBlock.story = { parameters: { layout: 'fullscreen' } };
+
+export const FullscreenInline = () => <Box display="inline-block">fullscreen</Box>;
+FullscreenInline.story = { parameters: { layout: 'fullscreen' } };
+
+export const CenteredBlock = () => <Box>centered</Box>;
+CenteredBlock.story = { parameters: { layout: 'centered' } };
+
+export const CenteredInline = () => <Box display="inline-block">centered</Box>;
+CenteredInline.story = { parameters: { layout: 'centered' } };
+
+export const Invalid = () => <Box>invalid layout value</Box>;
+CenteredInline.story = { parameters: { layout: '!invalid!' } };

lib/core/src/client/preview/start.js

@@ -121,6 +121,37 @@ function focusInInput(event) {
   );
 }
 
+const applyLayout = (() => {
+  let previousStyles;
+
+  return layout => {
+    const layouts = {
+      centered: `
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        margin: 0;
+        padding: 1rem;
+        box-sizing: border-box;
+      `,
+      fullscreen: `
+        margin: 0;
+      `,
+      padded: `
+        margin: 0;
+        padding: 1rem;
+      `,
+    };
+    const styles = layouts[layout] || layouts.padded;
+
+    if (styles !== previousStyles) {
+      document.body.style = styles;
+      previousStyles = styles;
+    }
+  };
+})();
+
 export default function start(render, { decorateStory } = {}) {
   const context = getContext(decorateStory);
 
@@ -140,9 +171,12 @@ export default function start(render, { decorateStory } = {}) {
 
     const data = storyStore.fromId(storyId);
 
-    const { kind, name, getDecorated, id, parameters, error } = data || {};
+    const { kind, name, getDecorated, id, parameters = {}, error } = data || {};
+
+    const { docsOnly, layout } = parameters;
+    applyLayout(layout);
 
-    const viewMode = parameters && parameters.docsOnly ? 'docs' : urlViewMode;
+    const viewMode = docsOnly ? 'docs' : urlViewMode;
 
     const renderContext = {
       ...context,
@@ -220,7 +254,7 @@ export default function start(render, { decorateStory } = {}) {
     // Given a cleaned up state, render the appropriate view mode
     switch (viewMode) {
       case 'docs': {
-        const docs = (parameters && parameters.docs) || {};
+        const docs = parameters.docs || {};
         const DocsContainer = docs.container || (({ children }) => <>{children}</>);
         const Page = docs.page || NoDocs;
         ReactDOM.render(