Merge pull request #11350 from storybookjs/fix/addon-docs/fixed-position

Addon-docs: Fix fixed-position inline stories

addons/docs/common/README.md

@@ -85,7 +85,7 @@ basic.parameters = {
 }
 ```
 
-And for `MDX` you can modify it as an attribute on the `Story` element:
+And for `MDX` you can modify it, especially if you work with some components using fixed or sticky positions, as an attribute on the `Story` element:
 
 ```md
 <Story name='basic' height='400px'>{...}</Story>

examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx → examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx

@@ -11,6 +11,7 @@ import {
 import { withKnobs, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
+import styled from 'styled-components';
 import TsButton from '../../components/TsButton';
 import FlowTypeButton from '../../components/FlowTypeButton';
 import { DocgenButton } from '../../components/DocgenButton';
@@ -133,6 +134,49 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
   <Story id="basics-button--all-buttons" height="400px" />
 </Canvas>
 
+export const FixedLayoutExample = styled.div(({ theme }) => ({
+  '&, header, aside, main, footer': {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  header: {
+    height: '3rem',
+    background: 'red',
+  },
+  'aside, main': {
+    top: '3rem',
+  },
+  aside: {
+    width: '10rem',
+    background: 'coral',
+  },
+  main: {
+    left: '10rem',
+    background: 'yellow',
+  },
+  footer: {
+    top: 'auto',
+    height: '3rem',
+    background: 'green',
+  },
+}));
+
+Fixed layout requires custom `height` since it can't be determined.
+
+<Canvas withToolbar>
+  <Story name="fixed layout example" height="15rem">
+    <FixedLayoutExample>
+      <header />
+      <aside />
+      <main />
+      <footer />
+    </FixedLayoutExample>
+  </Story>
+</Canvas>
+
 ## Description
 
 <Description markdown="this is _markdown_" />

lib/components/src/blocks/Story.tsx

@@ -36,7 +36,9 @@ type StoryProps = InlineStoryProps | IFrameStoryProps;
 
 const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <Fragment>
-    {height ? <style>{`#story--${id} { min-height: ${height} }`}</style> : null}
+    {height ? (
+      <style>{`#story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
+    ) : null}
     <Fragment>
       {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
     </Fragment>