diff --git a/MIGRATION.md b/MIGRATION.md
index 6b573ada5970..518b24dbbb64 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,8 @@
# Migration
- [Migration](#migration)
+ - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
+ - [New addon presets](#new-addon-presets)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Create React App preset](#create-react-app-preset)
@@ -76,6 +78,53 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
+## From version 5.3.x to 6.0.x
+
+### 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.
+
+This breaking change currently applies to: `addon-a11y`, `addon-knobs`.
+
+Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
+
+```js
+module.exports = {
+ stories: ['../**/*.stories.js'],
+ addons: ['@storybook/addon-a11y'],
+};
+```
+
+In earlier versions of Storybook, this would automatically call `@storybook/addon-a11y/register`, which adds the the a11y panel to the Storybook UI. As a user you would also add a decorator:
+
+```js
+import { withA11Y } from '../index';
+
+addDecorator(withA11Y);
+```
+
+Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator. However, if you are upgrading
+
+If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`:
+
+```js
+module.exports = {
+ stories: ['../**/*.stories.js'],
+ addons: ['@storybook/addon-a11y/register'],
+};
+```
+
+If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
+
+```js
+export const MyNonCheckedStory = () => ;
+MyNonCheckedStory.story = {
+ parameters: {
+ a11y: { disable: true },
+ },
+};
+```
+
## From version 5.2.x to 5.3.x
### To main.js configuration
@@ -214,7 +263,7 @@ yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots:
```js
-addParameters({
+addParameters({
options: {
showRoots: true,
},
@@ -226,13 +275,14 @@ NOTE: it is no longer possible to have some stories with roots and others withou
### 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
diff --git a/addons/a11y/README.md b/addons/a11y/README.md
index f4d086fb9f1d..d8260b195cff 100755
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@@ -18,8 +18,8 @@ Add this line to your `main.js` file (create this file inside your storybook con
```js
module.exports = {
- addons: ['@storybook/addon-a11y/register']
-}
+ addons: ['@storybook/addon-a11y/register'],
+};
```
import the `withA11y` decorator to check your stories for violations within your components.
@@ -34,19 +34,23 @@ export default {
decorators: [withA11y],
};
-export const accessible = () => (
-
-);
+export const accessible = () => ;
export const inaccessible = () => (
-
+
);
```
+## Using the preset
+
+Add the decorator to all stories:
+
+```js
+module.exports = {
+ addons: ['@storybook/addon-a11y'],
+};
+```
+
## Parameters
For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
@@ -69,29 +73,23 @@ export default {
config: {},
// axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
options: {},
- // optional flag to prevent the automatic check
+ // optional flag to prevent the automatic check
manual: true,
},
},
};
-export const accessible = () => (
-
-);
+export const accessible = () => ;
export const inaccessible = () => (
-
+
);
```
## Roadmap
-* Make UI accessible
-* Show in story where violations are.
-* Add more example tests
-* Add tests
-* Make CI integration possible
+- Make UI accessible
+- Show in story where violations are.
+- Add more example tests
+- Add tests
+- Make CI integration possible
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 476698c26077..895219c5535b 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -34,6 +34,7 @@
"dependencies": {
"@storybook/addons": "6.0.0-alpha.4",
"@storybook/api": "6.0.0-alpha.4",
+ "@storybook/client-api": "6.0.0-alpha.4",
"@storybook/client-logger": "6.0.0-alpha.4",
"@storybook/components": "6.0.0-alpha.4",
"@storybook/core-events": "6.0.0-alpha.4",
diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/a11y/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/a11y/src/preset/addDecorator.ts b/addons/a11y/src/preset/addDecorator.ts
new file mode 100644
index 000000000000..e2269900a384
--- /dev/null
+++ b/addons/a11y/src/preset/addDecorator.ts
@@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/client-api';
+import { withA11Y } from '../index';
+
+addDecorator(withA11Y);
diff --git a/addons/a11y/src/preset/index.ts b/addons/a11y/src/preset/index.ts
new file mode 100644
index 000000000000..2dac2590598f
--- /dev/null
+++ b/addons/a11y/src/preset/index.ts
@@ -0,0 +1,15 @@
+type A11yOptions = {
+ addDecorator?: boolean;
+};
+
+export function managerEntries(entry: any[] = []) {
+ return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: A11yOptions = {}) {
+ const a11yConfig = [];
+ if (addDecorator) {
+ a11yConfig.push(require.resolve('./addDecorator'));
+ }
+ return [...entry, ...a11yConfig];
+}
diff --git a/app/server/package.json b/app/server/package.json
index 9d6ea1d5f6a9..c5c7105c0da5 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -15,13 +15,6 @@
"directory": "app/html"
},
"license": "MIT",
- "files": [
- "bin/**/*",
- "dist/**/*",
- "README.md",
- "*.js",
- "*.d.ts"
- ],
"main": "dist/client/index.js",
"types": "dist/client/index.d.ts",
"bin": {
@@ -29,6 +22,13 @@
"start-storybook": "./bin/index.js",
"storybook-server": "./bin/index.js"
},
+ "files": [
+ "bin/**/*",
+ "dist/**/*",
+ "README.md",
+ "*.js",
+ "*.d.ts"
+ ],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts
index 4e526489c8ce..e2c77e9e4870 100644
--- a/examples/angular-cli/.storybook/preview.ts
+++ b/examples/angular-cli/.storybook/preview.ts
@@ -1,5 +1,4 @@
import { addParameters, addDecorator } from '@storybook/angular';
-import { withA11y } from '@storybook/addon-a11y';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import addCssWarning from '../src/cssWarning';
@@ -9,7 +8,6 @@ import docJson from '../documentation.json';
setCompodocJson(docJson);
-addDecorator(withA11y);
addCssWarning();
addParameters({
diff --git a/examples/cra-kitchen-sink/.storybook/preview.js b/examples/cra-kitchen-sink/.storybook/preview.js
index 6f9c8caefc7f..50a6b6acc28e 100644
--- a/examples/cra-kitchen-sink/.storybook/preview.js
+++ b/examples/cra-kitchen-sink/.storybook/preview.js
@@ -1,7 +1,5 @@
import { addParameters, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
-addDecorator(withA11y);
addParameters({
options: {
storySort: (a, b) =>
diff --git a/examples/cra-ts-kitchen-sink/.storybook/preview.ts b/examples/cra-ts-kitchen-sink/.storybook/preview.ts
index ec21c3337ee9..4ae2fd71cc3e 100644
--- a/examples/cra-ts-kitchen-sink/.storybook/preview.ts
+++ b/examples/cra-ts-kitchen-sink/.storybook/preview.ts
@@ -1,9 +1,7 @@
import { addParameters, addDecorator } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
addDecorator(withKnobs);
-addDecorator(withA11y);
addParameters({
options: {
brandTitle: 'CRA TypeScript Kitchen Sink',
diff --git a/examples/ember-cli/.storybook/preview.js b/examples/ember-cli/.storybook/preview.js
index 0bf5e7f8dcfc..9bef60f26a28 100644
--- a/examples/ember-cli/.storybook/preview.js
+++ b/examples/ember-cli/.storybook/preview.js
@@ -1,11 +1,9 @@
import { addParameters, addDecorator } from '@storybook/ember';
import { setJSONDoc } from '@storybook/addon-docs/ember';
-import { withA11y } from '@storybook/addon-a11y';
// eslint-disable-next-line import/no-unresolved
import docJson from '../ember-output/storybook-docgen/index.json';
setJSONDoc(docJson);
-addDecorator(withA11y);
addParameters({
options: {
showRoots: true,
diff --git a/examples/html-kitchen-sink/.storybook/preview.js b/examples/html-kitchen-sink/.storybook/preview.js
index 60851dbe04b4..b5777595e16f 100644
--- a/examples/html-kitchen-sink/.storybook/preview.js
+++ b/examples/html-kitchen-sink/.storybook/preview.js
@@ -1,7 +1,4 @@
import { addParameters, addDecorator } from '@storybook/html';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
addParameters({
a11y: {
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index a811c0cee73f..2e28d26daf7b 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,11 +1,9 @@
import { document, setTimeout } from 'global';
-import { withA11y } from '@storybook/addon-a11y';
const text = 'Testing the a11y addon';
export default {
title: 'Addons/a11y',
- decorators: [withA11y],
parameters: {
options: { selectedPanel: 'storybook/a11y/panel' },
},
diff --git a/examples/marko-cli/.storybook/preview.js b/examples/marko-cli/.storybook/preview.js
deleted file mode 100644
index 673c37b1bf3c..000000000000
--- a/examples/marko-cli/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/marko';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/mithril-kitchen-sink/.storybook/preview.js b/examples/mithril-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index aaa551ea87eb..000000000000
--- a/examples/mithril-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/mithril';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index 074c294f18c0..fe17792739dd 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -2,7 +2,6 @@ import React from 'react';
import { addDecorator, addParameters } from '@storybook/react';
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
import { withCssResources } from '@storybook/addon-cssresources';
-import { withA11y } from '@storybook/addon-a11y';
import { DocsPage } from '@storybook/addon-docs/blocks';
import addHeadWarning from './head-warning';
@@ -25,7 +24,6 @@ addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');
addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
addDecorator(withCssResources);
-addDecorator(withA11y);
addDecorator(storyFn => (
diff --git a/examples/preact-kitchen-sink/.storybook/preview.js b/examples/preact-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index 9f10bed13266..000000000000
--- a/examples/preact-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/** @jsx h */
-import { addDecorator } from '@storybook/preact';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
index 30f8003dd711..162f5fe80183 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
@@ -1,11 +1,9 @@
import { createElement } from 'rax';
-import { withA11Y } from '@storybook/addon-a11y';
import Text from 'rax-text';
import View from 'rax-view';
export default {
title: 'Addon/addon-a11y',
- decorators: [withA11Y],
};
export const Basic = () => RAX TEXT NODE;
diff --git a/examples/riot-kitchen-sink/.storybook/preview.js b/examples/riot-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index e74334d439c3..000000000000
--- a/examples/riot-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/riot';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/svelte-kitchen-sink/.storybook/preview.js b/examples/svelte-kitchen-sink/.storybook/preview.js
deleted file mode 100644
index 7f5d4bed2e58..000000000000
--- a/examples/svelte-kitchen-sink/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { addDecorator } from '@storybook/svelte';
-import { withA11y } from '@storybook/addon-a11y';
-
-addDecorator(withA11y);
diff --git a/examples/vue-kitchen-sink/.storybook/preview.js b/examples/vue-kitchen-sink/.storybook/preview.js
index 6b56e714e63d..322b5cc5273f 100644
--- a/examples/vue-kitchen-sink/.storybook/preview.js
+++ b/examples/vue-kitchen-sink/.storybook/preview.js
@@ -1,11 +1,9 @@
import { addParameters, addDecorator } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex';
-import { withA11y } from '@storybook/addon-a11y';
import MyButton from '../src/stories/Button.vue';
-addDecorator(withA11y);
Vue.component('my-button', MyButton);
Vue.use(Vuex);
diff --git a/examples/web-components-kitchen-sink/.storybook/preview.js b/examples/web-components-kitchen-sink/.storybook/preview.js
index 5fbd341a802c..39953f357907 100644
--- a/examples/web-components-kitchen-sink/.storybook/preview.js
+++ b/examples/web-components-kitchen-sink/.storybook/preview.js
@@ -6,14 +6,11 @@ import {
addDecorator,
setCustomElements,
} from '@storybook/web-components';
-import { withA11y } from '@storybook/addon-a11y';
import customElements from '../custom-elements.json';
setCustomElements(customElements);
-addDecorator(withA11y);
-
addParameters({
a11y: {
config: {},
diff --git a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
index ebbacd65298f..0402fc89a7eb 100644
--- a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,12 +1,10 @@
import { document, setTimeout } from 'global';
-import { withA11y } from '@storybook/addon-a11y';
import { html } from 'lit-html';
const text = 'Testing the a11y addon';
export default {
title: 'Addons/a11y',
- decorators: [withA11y],
parameters: {
options: { selectedPanel: 'storybook/a11y/panel' },
},