Merge pull request #11814 from storybookjs/feat/addon-docs-html-inline

Addon-docs: Add inline rendering support for HTML
storybookjs · Aug 5, 2020 · 8942f0f · 8942f0f
2 parents 89f04e3 + a05c6e8
commit 8942f0f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -14,6 +14,7 @@
     - [React prop tables with Typescript](#react-prop-tables-with-typescript)
     - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
     - [Docs description parameter](#docs-description-parameter)
+    - [6.0 Inline stories](#60-inline-stories)
   - [New addon presets](#new-addon-presets)
   - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
   - [Removed Deprecated APIs](#removed-deprecated-apis)
@@ -305,6 +306,12 @@ Basic.parameters = { docs: { description: { story: 'some story **markdown**' }}}
 
 In 5.3 you customized a story description with the `docs.storyDescription` parameter. This has been deprecated, and support will be removed in 7.0.
 
+#### 6.0 Inline stories
+
+The following frameworks now render stories inline on the Docs tab by default, rather than in an iframe: `react`, `vue`, `web-components`, `html`.
+
+To disable inline rendering, set the `docs.inlineStories` parameter to `false`.
+
 ### New addon presets
 
 In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.

diff --git a/addons/docs/README.md b/addons/docs/README.md
@@ -89,7 +89,7 @@ Storybook Docs supports all view layers that Storybook supports except for React
 | Props table       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
 | Props controls    |   +   |  +  |         |       |                |      |        |        |      |         |       |
 | Description       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
-| Inline stories    |   +   |  +  |         |       |       +        |      |        |        |      |         |       |
+| Inline stories    |   +   |  +  |         |       |       +        |  +   |        |        |      |         |       |
 
 **Note:** `#` = WIP support
 

diff --git a/addons/docs/src/frameworks/html/config.tsx b/addons/docs/src/frameworks/html/config.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { StoryFn } from '@storybook/addons';
+
+export const parameters = {
+  docs: {
+    inlineStories: true,
+    prepareForInline: (storyFn: StoryFn<string>) => (
+      // eslint-disable-next-line react/no-danger
+      <div dangerouslySetInnerHTML={{ __html: storyFn() }} />
+    ),
+  },
+};