diff --git a/MIGRATION.md b/MIGRATION.md index 07fa885f8e2c..f9f4f2dc9eb6 100644 --- 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 index 80a0a51e4d49..c83b686f1cd7 100644 --- 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 new file mode 100644 index 000000000000..3a1301b78bb6 --- /dev/null +++ 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) => ( + // eslint-disable-next-line react/no-danger +
+ ), + }, +};