Addon-docs: Fix layout of Preview container

examples/official-storybook/stories/addon-docs/addon-docs.stories.js

@@ -52,3 +52,5 @@ docsDisable.story = {
     docs: { disable: true },
   },
 };
+
+export const largerThanPreview = () => <div style={{ width: 1000, background: 'pink' }}>HUGE</div>;

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

@@ -1,29 +1,49 @@
 import React from 'react';
+import { styled } from '@storybook/theming';
+
+import { Spaced } from '@storybook/components';
 
 export default {
   title: 'Core/Scroll',
 };
 
+const Horizontal = styled(props => <Spaced col={1} {...props} />)({
+  display: 'grid',
+  gridTemplateColumns: '100px calc(100vw + 100px) 100px',
+});
+const Vertical = styled(props => <Spaced row={1} {...props} />)({
+  display: 'flex',
+});
+
 export const story1 = () => (
-  <div>
+  <Vertical>
     <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
     <div style={{ height: '100vh' }} />
     <pre>
       END, this text should be below the scroll "fold" and therefore only be readable after
       scrolling
     </pre>
-  </div>
+  </Vertical>
 );
 story1.story = { name: 'story with 100vh padding 1' };
 
 export const story2 = () => (
-  <div>
+  <Vertical>
     <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
     <div style={{ height: '100vh' }} />
     <pre>
       END, this text should be below the scroll "fold" and therefore only be readable after
       scrolling
     </pre>
-  </div>
+  </Vertical>
 );
 story2.story = { name: 'story with 100vh padding 2' };
+
+export const story3 = () => (
+  <Horizontal>
+    <pre>START</pre>
+    <div>middle</div>
+    <pre>END</pre>
+  </Horizontal>
+);
+story3.story = { name: 'story with 100vw+' };

lib/components/src/blocks/Preview.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { styled } from '@storybook/theming';
 
+import { Spaced } from '../spaced/Spaced';
 import { Preview } from './Preview';
-
 import { Story } from './Story';
 import { Button } from '../Button/Button';
 import * as sourceStories from './Source.stories';
@@ -88,6 +89,21 @@ export const withToolbar = () => (
   </Preview>
 );
 
+const Horizontal = styled(props => <Spaced col={1} {...props} />)({
+  display: 'grid',
+  gridTemplateColumns: '100px calc(100vw + 100px) 100px',
+});
+
+export const wide = () => (
+  <Preview withToolbar>
+    <Horizontal>
+      <div>START</div>
+      <div>middle</div>
+      <div>END</div>
+    </Horizontal>
+  </Preview>
+);
+
 export const withToolbarMulti = () => (
   <Preview withToolbar>
     <Story inline storyFn={buttonFn} title="story1" />

lib/components/src/blocks/Preview.tsx

@@ -20,13 +20,15 @@ export interface PreviewProps {
 const ChildrenContainer = styled.div<PreviewProps>(({ isColumn, columns }) => ({
   display: 'flex',
   flexWrap: 'wrap',
+  padding: '30px 20px',
+  overflow: 'auto',
   flexDirection: isColumn ? 'column' : 'row',
   marginTop: -20,
 
   '> *': {
     flex: columns ? `1 1 calc(100%/${columns} - 20px)` : `1 1 0%`,
-    marginRight: 20,
     marginTop: 20,
+    maxWidth: '100%',
   },
 }));
 
@@ -50,18 +52,18 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({
 const PreviewWrapper = styled.div<PreviewProps>(
   ({ theme, withSource, isExpanded }) => ({
     ...getBlockBackgroundStyle(theme),
-    padding: '30px 20px',
     position: 'relative',
     overflow: 'hidden',
     borderBottomLeftRadius: withSource && isExpanded && 0,
     borderBottomRightRadius: withSource && isExpanded && 0,
     borderBottomWidth: isExpanded && 0,
   }),
-  ({ withToolbar }) => withToolbar && { paddingTop: 64 }
+  ({ withToolbar }) => withToolbar && { paddingTop: 40 }
 );
 
 const PreviewContainer = styled.div({
-  margin: '25px 0 40px',
+  // padding: '25px 0 40px',
+  overflow: 'hidden',
 });
 
 interface SourceItem {

lib/components/src/spaced/Spaced.tsx

@@ -58,11 +58,11 @@ export interface SpacedProps {
   outer?: number | boolean;
 }
 
-export const Spaced: FunctionComponent<SpacedProps> = ({ col, row, outer, children }) => {
+export const Spaced: FunctionComponent<SpacedProps> = ({ col, row, outer, children, ...rest }) => {
   const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
 
   return (
-    <Container col={col} row={row} outer={outerAmount}>
+    <Container col={col} row={row} outer={outerAmount} {...rest}>
       {children}
     </Container>
   );