From 64797f1c2ce6b2f769c3d22d0fafa260296a99e1 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Mon, 29 Jun 2020 17:56:58 +0200
Subject: [PATCH 01/13] fix(addon-docs): stories with min-height

---
 lib/components/package.json                 |  3 +-
 lib/components/src/blocks/Story.stories.tsx | 41 +++++++++++++++++++++
 lib/components/src/blocks/Story.tsx         | 16 +++++---
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index c0bff2aa3c5f..cb5785442cc3 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -49,7 +49,8 @@
     "react-popper-tooltip": "^3.1.0",
     "react-syntax-highlighter": "^13.5.0",
     "react-textarea-autosize": "^8.1.1",
-    "ts-dedent": "^1.1.1"
+    "ts-dedent": "^1.1.1",
+    "uuid": "^8.0.0"
   },
   "devDependencies": {
     "css": "^3.0.0",
diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index 3d2bacc90cec..8d4b60f94ca2 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { styled } from '@storybook/theming';
 import { Story, StoryError } from './Story';
 import { Button } from '../Button/Button';
 
@@ -23,3 +24,43 @@ export const Inline = () => <Story inline storyFn={buttonFn} title="hello button
 export const Error = () => <Story error={StoryError.NO_STORY} />;
 
 export const ReactHook = () => <Story inline storyFn={buttonHookFn} title="hello button" />;
+
+const FixedLayoutExample = styled.div(({ theme }) => ({
+  '&, header, aside, main': {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  header: {
+    height: '3rem',
+    background: theme.background.positive,
+  },
+  'aside, main': {
+    top: '3rem',
+  },
+  aside: {
+    width: '10rem',
+    background: theme.background.warning,
+  },
+  main: {
+    left: '10rem',
+    background: theme.background.negative,
+  },
+}));
+
+export const CustomHeight = () => (
+  <Story
+    inline
+    storyFn={() => (
+      <FixedLayoutExample>
+        <header />
+        <aside />
+        <main />
+      </FixedLayoutExample>
+    )}
+    height="15rem"
+    title="Define a custom story height for fixed position context for example"
+  />
+);
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index cd1f33047c9a..97f48370ac2d 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -1,4 +1,5 @@
 import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Parameters } from '@storybook/api';
@@ -34,12 +35,16 @@ type IFrameStoryProps = CommonProps;
 
 type StoryProps = InlineStoryProps | IFrameStoryProps;
 
-const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
+const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id = uuidv4() }) => (
   <Fragment>
-    {height ? <style>{`#story--${id} { min-height: ${height} }`}</style> : null}
-    <Fragment>
-      {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
-    </Fragment>
+    {height ? (
+      <style>{`.sbdocs .story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto;`}</style>
+    ) : null}
+    <div className={`story--${id}`}>
+      <Fragment>
+        {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
+      </Fragment>
+    </div>
   </Fragment>
 );
 
@@ -78,7 +83,6 @@ const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryErro
   ...props
 }) => {
   const { id, title, height } = props;
-
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;
   }

From fc02cdb5ccbd201f17bf2646358a9f9f47c26a90 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Mon, 29 Jun 2020 21:45:50 +0200
Subject: [PATCH 02/13] doc

---
 addons/docs/docs/docspage.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
index a2eca972f0a7..2be95d3c6244 100644
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@@ -161,7 +161,12 @@ The docs preset assumes this naming convention for its `source-loader` setup. If
 
 ## Inline stories vs. Iframe stories
 
-Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
+Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story, and especially if you develop some components which use fixed or sticky positions. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
+
+```js
+export const fixedLayout = () => <FixedLayout />;
+fixedLayout.parameters = { height: '25vh' };
+```
 
 That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through an effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
 

From 3bb1a83d9d3ad66ba364c85f6d2a1d3e7ef95d7f Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Mon, 29 Jun 2020 22:19:44 +0200
Subject: [PATCH 03/13] doc

---
 addons/docs/docs/docspage.md | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
index 2be95d3c6244..977a5aa34d2f 100644
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@@ -163,11 +163,6 @@ The docs preset assumes this naming convention for its `source-loader` setup. If
 
 Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story, and especially if you develop some components which use fixed or sticky positions. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
 
-```js
-export const fixedLayout = () => <FixedLayout />;
-fixedLayout.parameters = { height: '25vh' };
-```
-
 That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through an effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
 
 ```js

From 5d8344db19610595ab1f35516c6fe29137ef7bf7 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Mon, 29 Jun 2020 22:33:48 +0200
Subject: [PATCH 04/13] doc

---
 addons/docs/common/README.md | 2 +-
 addons/docs/docs/docspage.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/docs/common/README.md b/addons/docs/common/README.md
index a7c03a160e33..de1e9b5180e7 100644
--- a/addons/docs/common/README.md
+++ b/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>
diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
index 977a5aa34d2f..a2eca972f0a7 100644
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@@ -161,7 +161,7 @@ The docs preset assumes this naming convention for its `source-loader` setup. If
 
 ## Inline stories vs. Iframe stories
 
-Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story, and especially if you develop some components which use fixed or sticky positions. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
+Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
 
 That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through an effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
 

From 4e430d76cbb5bbc49beae8e593a17f568cb300d0 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Wed, 15 Jul 2020 09:10:54 +0200
Subject: [PATCH 05/13] remove uuid dependency

---
 lib/components/package.json         |  3 +--
 lib/components/src/blocks/Story.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index cb5785442cc3..c0bff2aa3c5f 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -49,8 +49,7 @@
     "react-popper-tooltip": "^3.1.0",
     "react-syntax-highlighter": "^13.5.0",
     "react-textarea-autosize": "^8.1.1",
-    "ts-dedent": "^1.1.1",
-    "uuid": "^8.0.0"
+    "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
     "css": "^3.0.0",
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 97f48370ac2d..7fc6a424cda8 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -1,5 +1,4 @@
 import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Parameters } from '@storybook/api';
@@ -35,15 +34,17 @@ type IFrameStoryProps = CommonProps;
 
 type StoryProps = InlineStoryProps | IFrameStoryProps;
 
-const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id = uuidv4() }) => (
+const InlineStory: FunctionComponent<InlineStoryProps> = ({
+  storyFn,
+  height,
+  id = Math.round(Math.random() * 1e5),
+}) => (
   <Fragment>
     {height ? (
       <style>{`.sbdocs .story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto;`}</style>
     ) : null}
     <div className={`story--${id}`}>
-      <Fragment>
-        {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
-      </Fragment>
+      {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
     </div>
   </Fragment>
 );
@@ -83,6 +84,7 @@ const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryErro
   ...props
 }) => {
   const { id, title, height } = props;
+
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;
   }

From 9df5f03018296bc5365d0af7fcb03d3100f952b7 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Thu, 10 Sep 2020 17:39:25 +0200
Subject: [PATCH 06/13] revert extra div creation

---
 lib/components/src/blocks/Preview.tsx |  1 -
 lib/components/src/blocks/Story.tsx   | 12 ++++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index da1410f1be3e..d8b2764cf483 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -88,7 +88,6 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({
 const PreviewContainer = styled.div<PreviewProps>(
   ({ theme, withSource, isExpanded }) => ({
     position: 'relative',
-    overflow: 'hidden',
     margin: '25px 0 40px',
     ...getBlockBackgroundStyle(theme),
     borderBottomLeftRadius: withSource && isExpanded && 0,
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 7fc6a424cda8..19af99e5a1dc 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -34,18 +34,14 @@ type IFrameStoryProps = CommonProps;
 
 type StoryProps = InlineStoryProps | IFrameStoryProps;
 
-const InlineStory: FunctionComponent<InlineStoryProps> = ({
-  storyFn,
-  height,
-  id = Math.round(Math.random() * 1e5),
-}) => (
+const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <Fragment>
     {height ? (
-      <style>{`.sbdocs .story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto;`}</style>
+      <style>{`#story--${id} { min-height: ${height}; transform: 'translateZ(0)'; overflow: 'auto' }`}</style>
     ) : null}
-    <div className={`story--${id}`}>
+    <Fragment>
       {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
-    </div>
+    </Fragment>
   </Fragment>
 );
 

From afd88b43e61b868cfc17859a99a510de886a115b Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Thu, 10 Sep 2020 17:42:06 +0200
Subject: [PATCH 07/13] adding id

---
 lib/components/src/blocks/Story.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index 8d4b60f94ca2..2d68b03478ae 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -53,6 +53,7 @@ const FixedLayoutExample = styled.div(({ theme }) => ({
 export const CustomHeight = () => (
   <Story
     inline
+    id="custom-height"
     storyFn={() => (
       <FixedLayoutExample>
         <header />

From 9777db0a3769beb25daaaacd3783a0d563121e91 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Thu, 10 Sep 2020 21:04:59 +0200
Subject: [PATCH 08/13] fix id

---
 lib/components/src/blocks/Story.stories.tsx | 8 +++++++-
 lib/components/src/blocks/Story.tsx         | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index 2d68b03478ae..9243dab6345b 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -26,7 +26,7 @@ export const Error = () => <Story error={StoryError.NO_STORY} />;
 export const ReactHook = () => <Story inline storyFn={buttonHookFn} title="hello button" />;
 
 const FixedLayoutExample = styled.div(({ theme }) => ({
-  '&, header, aside, main': {
+  '&, header, aside, main, footer': {
     position: 'fixed',
     top: 0,
     right: 0,
@@ -48,6 +48,11 @@ const FixedLayoutExample = styled.div(({ theme }) => ({
     left: '10rem',
     background: theme.background.negative,
   },
+  footer: {
+    top: 'auto',
+    height: '3rem',
+    background: theme.background.critical,
+  },
 }));
 
 export const CustomHeight = () => (
@@ -59,6 +64,7 @@ export const CustomHeight = () => (
         <header />
         <aside />
         <main />
+        <footer />
       </FixedLayoutExample>
     )}
     height="15rem"
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 19af99e5a1dc..6627dbd857c8 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -37,7 +37,7 @@ type StoryProps = InlineStoryProps | IFrameStoryProps;
 const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <Fragment>
     {height ? (
-      <style>{`#story--${id} { min-height: ${height}; transform: 'translateZ(0)'; overflow: 'auto' }`}</style>
+      <style>{`#story--story-docs--${id} { min-height: ${height}; transform: 'translateZ(0)'; overflow: 'auto' }`}</style>
     ) : null}
     <Fragment>
       {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}

From 2f5b1df6d53dbdb7ea0616b8ac81d3e62962f668 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Thu, 10 Sep 2020 21:28:37 +0200
Subject: [PATCH 09/13] fix id

---
 lib/components/src/blocks/Story.stories.tsx | 1 -
 lib/components/src/blocks/Story.tsx         | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index 9243dab6345b..c9575e27d06b 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -58,7 +58,6 @@ const FixedLayoutExample = styled.div(({ theme }) => ({
 export const CustomHeight = () => (
   <Story
     inline
-    id="custom-height"
     storyFn={() => (
       <FixedLayoutExample>
         <header />
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 6627dbd857c8..df36cdec54d1 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -37,7 +37,7 @@ type StoryProps = InlineStoryProps | IFrameStoryProps;
 const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <Fragment>
     {height ? (
-      <style>{`#story--story-docs--${id} { min-height: ${height}; transform: 'translateZ(0)'; overflow: 'auto' }`}</style>
+      <style>{`#story--docs-story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
     ) : null}
     <Fragment>
       {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
@@ -79,7 +79,7 @@ const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryErro
   inline,
   ...props
 }) => {
-  const { id, title, height } = props;
+  const { id = Math.round(Math.random() * 1e5), title, height } = props;
 
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;

From 39a8b5efd2e7f2b89285c710c04b752c82bcbfcd Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Thu, 10 Sep 2020 21:40:04 +0200
Subject: [PATCH 10/13] fix id to string

---
 lib/components/src/blocks/Story.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index df36cdec54d1..831e60073ce7 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -79,7 +79,7 @@ const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryErro
   inline,
   ...props
 }) => {
-  const { id = Math.round(Math.random() * 1e5), title, height } = props;
+  const { id = Math.round(Math.random() * 1e5).toString(), title, height } = props;
 
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;

From 8595eb1a2c6060b71491f504747a04229de14495 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Fri, 11 Sep 2020 01:44:40 +0200
Subject: [PATCH 11/13] remove default id

---
 lib/components/src/blocks/Story.stories.tsx | 1 +
 lib/components/src/blocks/Story.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index c9575e27d06b..ba87111a7947 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -66,6 +66,7 @@ export const CustomHeight = () => (
         <footer />
       </FixedLayoutExample>
     )}
+    id="custom-height"
     height="15rem"
     title="Define a custom story height for fixed position context for example"
   />
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 831e60073ce7..21c20c6ca7aa 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -79,7 +79,7 @@ const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryErro
   inline,
   ...props
 }) => {
-  const { id = Math.round(Math.random() * 1e5).toString(), title, height } = props;
+  const { id, title, height } = props;
 
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;

From 92ca7f04aaa5bb0fb1864d97d06b641791ed0c94 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Fri, 11 Sep 2020 01:56:25 +0200
Subject: [PATCH 12/13] use canvas demo

---
 ...stories.mdx => addon-docs-mdx.stories.mdx} | 45 ++++++++++++++++-
 lib/components/src/blocks/Story.stories.tsx   | 48 -------------------
 lib/components/src/blocks/Story.tsx           |  2 +-
 3 files changed, 44 insertions(+), 51 deletions(-)
 rename examples/official-storybook/stories/addon-docs/{addon-docs.stories.mdx => addon-docs-mdx.stories.mdx} (81%)

diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx
similarity index 81%
rename from examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx
rename to examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx
index 913f23d45fa9..c47b026d47f6 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx
+++ b/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';
@@ -22,7 +23,6 @@ import MdxNotes from '../notes/notes.mdx';
   component={TsButton}
   id="addons-docs-mdx-id"
   decorators={[
-    (storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
     withKnobs,
   ]}
   parameters={{ notes: 'component notes' }}
@@ -130,7 +130,48 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 ## Configurable height
 
 <Canvas withToolbar>
-  <Story id="basics-button--all-buttons" height="400px" />
+  <Story id="basics-button--all-buttons" inline={true} 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',
+  },
+}));
+
+<Canvas withToolbar>
+  <Story name="fixed layout example" height="15rem">
+    <FixedLayoutExample>
+      <header />
+      <aside />
+      <main />
+      <footer />
+    </FixedLayoutExample>
+  </Story>
 </Canvas>
 
 ## Description
diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index ba87111a7947..3d2bacc90cec 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { styled } from '@storybook/theming';
 import { Story, StoryError } from './Story';
 import { Button } from '../Button/Button';
 
@@ -24,50 +23,3 @@ export const Inline = () => <Story inline storyFn={buttonFn} title="hello button
 export const Error = () => <Story error={StoryError.NO_STORY} />;
 
 export const ReactHook = () => <Story inline storyFn={buttonHookFn} title="hello button" />;
-
-const FixedLayoutExample = styled.div(({ theme }) => ({
-  '&, header, aside, main, footer': {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-  header: {
-    height: '3rem',
-    background: theme.background.positive,
-  },
-  'aside, main': {
-    top: '3rem',
-  },
-  aside: {
-    width: '10rem',
-    background: theme.background.warning,
-  },
-  main: {
-    left: '10rem',
-    background: theme.background.negative,
-  },
-  footer: {
-    top: 'auto',
-    height: '3rem',
-    background: theme.background.critical,
-  },
-}));
-
-export const CustomHeight = () => (
-  <Story
-    inline
-    storyFn={() => (
-      <FixedLayoutExample>
-        <header />
-        <aside />
-        <main />
-        <footer />
-      </FixedLayoutExample>
-    )}
-    id="custom-height"
-    height="15rem"
-    title="Define a custom story height for fixed position context for example"
-  />
-);
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 21c20c6ca7aa..cf5f98651e6a 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -37,7 +37,7 @@ type StoryProps = InlineStoryProps | IFrameStoryProps;
 const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <Fragment>
     {height ? (
-      <style>{`#story--docs-story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
+      <style>{`#story--${id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
     ) : null}
     <Fragment>
       {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}

From ab4d4b451e0249177b6c24d1d6df5f25cbe62049 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Fri, 11 Sep 2020 02:15:16 +0200
Subject: [PATCH 13/13] adjust canvas demo

---
 .../stories/addon-docs/addon-docs-mdx.stories.mdx            | 5 ++++-
 lib/components/src/blocks/Preview.tsx                        | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx
index c47b026d47f6..58fad8273540 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx
@@ -23,6 +23,7 @@ import MdxNotes from '../notes/notes.mdx';
   component={TsButton}
   id="addons-docs-mdx-id"
   decorators={[
+    (storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
     withKnobs,
   ]}
   parameters={{ notes: 'component notes' }}
@@ -130,7 +131,7 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 ## Configurable height
 
 <Canvas withToolbar>
-  <Story id="basics-button--all-buttons" inline={true} height="400px" />
+  <Story id="basics-button--all-buttons" height="400px" />
 </Canvas>
 
 export const FixedLayoutExample = styled.div(({ theme }) => ({
@@ -163,6 +164,8 @@ export const FixedLayoutExample = styled.div(({ theme }) => ({
   },
 }));
 
+Fixed layout requires custom `height` since it can't be determined.
+
 <Canvas withToolbar>
   <Story name="fixed layout example" height="15rem">
     <FixedLayoutExample>
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index d8b2764cf483..da1410f1be3e 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -88,6 +88,7 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({
 const PreviewContainer = styled.div<PreviewProps>(
   ({ theme, withSource, isExpanded }) => ({
     position: 'relative',
+    overflow: 'hidden',
     margin: '25px 0 40px',
     ...getBlockBackgroundStyle(theme),
     borderBottomLeftRadius: withSource && isExpanded && 0,