diff --git a/MIGRATION.md b/MIGRATION.md index 96df607e4b3a..c2cc89444c23 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -9,6 +9,7 @@ - [Deprecate displayName parameter](#deprecate-displayname-parameter) - [Unified docs preset](#unified-docs-preset) - [Simplified hierarchy separators](#simplified-hierarchy-separators) + - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer) - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x) - [Source-loader](#source-loader) - [Default viewports](#default-viewports) @@ -220,6 +221,17 @@ addParameters({ NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behavior, simply add a root called "Others" to all your previously unrooted stories. +### Addon StoryShots Puppeteer uses external puppeteer + +To give you more control on the Chrome version used when running StoryShots Puppeteer, `puppeteer` is no more included in the addon dependencies. So you can now pick the version of `puppeteer` you want and set it in your project. + +If you want the latest version available just run: +```sh +yarn add puppeteer --dev +OR +npm install puppeteer --save-dev +``` + ## From version 5.1.x to 5.2.x ### Source-loader diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index 718c0c012435..cb4feceddb20 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -8,9 +8,11 @@ Add the following modules into your app. npm install @storybook/addon-storyshots-puppeteer puppeteer --save-dev ``` +⚠️ As of Storybook 5.3 `puppeteer` is no more included in addon dependencies and must be added to your project directly. + ## Configure Storyshots for Puppeteeer tests -/\*\ **React-native** is **not supported** by this test function. +⚠️ **React-native** is **not supported** by this test function. When willing to run Puppeteer tests for your stories, you have two options: diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md index 499d633f8ceb..964fd7a68d82 100644 --- a/docs/src/pages/presets/writing-presets/index.md +++ b/docs/src/pages/presets/writing-presets/index.md @@ -109,7 +109,7 @@ The presets API is also more powerful than the [standard configuration options]( For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../custom-webpack-config/) (it used to be possible before SB4.1). However, you can achieve this with a private preset. -If it doesn't exists yet, create a file `.storybook/main.js`: +If it doesn't exist yet, create a file `.storybook/main.js`: ```js module.exports = { @@ -166,4 +166,4 @@ module.exports = { }; ``` -Place your `my-preset.js` file where ever you want, if you want to share if far and wide you'll want to make it it's own package. +Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package. diff --git a/examples/cra-ts-kitchen-sink/src/stories/Button.tsx b/examples/cra-ts-kitchen-sink/src/stories/Button.tsx index 233755a6a68f..7f0292d659cd 100644 --- a/examples/cra-ts-kitchen-sink/src/stories/Button.tsx +++ b/examples/cra-ts-kitchen-sink/src/stories/Button.tsx @@ -5,6 +5,11 @@ interface ButtonProps { * Simple click handler */ onClick?: () => void; + + /** + * Is primary? + */ + primary: boolean; } /** @@ -15,3 +20,7 @@ export const Button: FC = ({ children, onClick }) => ( {children} ); + +Button.defaultProps = { + primary: true, +}; diff --git a/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue b/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue index 2daa195e0937..595bf4017589 100644 --- a/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue +++ b/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue @@ -1,23 +1,26 @@