diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
index d4ecae2a59f6..1b06f9bfc190 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
@@ -52,3 +52,5 @@ docsDisable.story = {
docs: { disable: true },
},
};
+
+export const largerThanPreview = () =>
HUGE
;
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
index 89a1d283694b..4b619f0af7c0 100644
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -1,29 +1,56 @@
import React from 'react';
+import { styled } from '@storybook/theming';
+
+import { Spaced } from '@storybook/components';
export default {
title: 'Core/Scroll',
};
+const Horizontal = styled(props => )({
+ display: 'grid',
+ gridTemplateColumns: '100px calc(100vw + 100px) 100px',
+});
+const Vertical = styled(props => )({});
+
export const story1 = () => (
-
+
START, when switching stories, you should be able to read this at the top of the page
-
+ middle
END, this text should be below the scroll "fold" and therefore only be readable after
scrolling
-
+
);
story1.story = { name: 'story with 100vh padding 1' };
export const story2 = () => (
-
+
START, when switching stories, you should be able to read this at the top of the page
-
+ middle
END, this text should be below the scroll "fold" and therefore only be readable after
scrolling
-
+
);
story2.story = { name: 'story with 100vh padding 2' };
+
+export const story3 = () => (
+
+ START
+ middle
+ END
+
+);
+story3.story = { name: 'story with 100vw+' };
+
+export const story4 = () => (
+
+ START
+ middle
+ END
+
+);
+story4.story = { name: 'story with 100vw+ 2' };
diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
index c82a298dc54f..3f03d4e212a4 100644
--- a/lib/components/src/blocks/Preview.stories.tsx
+++ b/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 = () => (
);
+const Horizontal = styled(props => )({
+ display: 'grid',
+ gridTemplateColumns: '100px calc(100vw + 100px) 100px',
+});
+
+export const wide = () => (
+
+
+ START
+ middle
+ END
+
+
+);
+
export const withToolbarMulti = () => (
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index a8d5d23a47fe..2fd85752cc96 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -7,7 +7,6 @@ import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
import { Source, SourceProps } from './Source';
import { ActionBar, ActionItem } from '../ActionBar/ActionBar';
import { Toolbar } from './Toolbar';
-import { ZoomContext } from './ZoomContext';
export interface PreviewProps {
isColumn?: boolean;
@@ -19,14 +18,16 @@ export interface PreviewProps {
const ChildrenContainer = styled.div(({ isColumn, columns }) => ({
display: 'flex',
+ position: 'relative',
flexWrap: 'wrap',
+ padding: '10px 20px 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%',
},
}));
@@ -47,23 +48,19 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({
},
}));
-const PreviewWrapper = styled.div(
+const PreviewContainer = styled.div(
({ theme, withSource, isExpanded }) => ({
- ...getBlockBackgroundStyle(theme),
- padding: '30px 20px',
position: 'relative',
overflow: 'hidden',
+ margin: '25px 0 40px',
+ ...getBlockBackgroundStyle(theme),
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',
-});
-
interface SourceItem {
source?: ReactElement;
actionItem: ActionItem;
@@ -109,6 +106,31 @@ function getStoryId(children: ReactNode) {
return null;
}
+const Relative = styled.div({
+ position: 'relative',
+});
+
+const Scale = styled.div<{ scale: number }>(
+ {
+ position: 'relative',
+ },
+ ({ scale }) =>
+ scale
+ ? {
+ transform: `scale(${1 / scale})`,
+ transformOrigin: 'top left',
+ }
+ : {}
+);
+
+const PositionedToolbar = styled(Toolbar)({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ height: 40,
+});
+
/**
* A preview component for showing one or more component `Story`
* items. The preview also shows the source for the component
@@ -132,28 +154,26 @@ const Preview: FunctionComponent = ({
}
const showToolbar = withToolbar && !Array.isArray(children);
return (
-
-
- {showToolbar && (
- setScale(scale * z)}
- resetZoom={() => setScale(1)}
- storyId={getStoryId(children)}
- baseUrl="./iframe.html"
- />
- )}
-
-
- {Array.isArray(children) ? (
- children.map((child, i) => {child}
)
- ) : (
- {children}
- )}
-
-
+
+ {showToolbar && (
+ setScale(scale * z)}
+ resetZoom={() => setScale(1)}
+ storyId={getStoryId(children)}
+ baseUrl="./iframe.html"
+ />
+ )}
+
+
+ {Array.isArray(children) ? (
+ children.map((child, i) => {child}
)
+ ) : (
+ {children}
+ )}
+
{withSource && }
-
+
{withSource && source}
);
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
index 57d29cbba417..78bab5b10ece 100644
--- a/lib/components/src/blocks/Source.stories.tsx
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -10,9 +10,9 @@ const jsxCode = `
a.id} />
-`.trim();
+`;
-export const jsx = () => ;
+export const jsx = () => ;
const cssCode = `
@-webkit-keyframes blinker {
@@ -26,10 +26,12 @@ const cssCode = `
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
-`.trim();
+`;
-export const css = () => ;
+export const css = () => ;
-export const noStory = () => ;
+export const noStory = () => ;
-export const sourceUnavailable = () => ;
+export const sourceUnavailable = () => (
+
+);
diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx
index 2b68e068fd1e..7666a4264932 100644
--- a/lib/components/src/spaced/Spaced.tsx
+++ b/lib/components/src/spaced/Spaced.tsx
@@ -58,11 +58,11 @@ export interface SpacedProps {
outer?: number | boolean;
}
-export const Spaced: FunctionComponent = ({ col, row, outer, children }) => {
+export const Spaced: FunctionComponent = ({ col, row, outer, children, ...rest }) => {
const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
return (
-
+
{children}
);
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index e71d12e8b242..dd979e68939b 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -275,6 +275,7 @@ export default function start(render, { decorateStory } = {}) {
if (!forceRender && viewMode !== 'docs') {
document.documentElement.scrollTop = 0;
+ document.documentElement.scrollLeft = 0;
}
};