diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
index 6059f9ecc779..a553eb7ac001 100644
--- a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
@@ -9,10 +9,15 @@ storiesOf('Custom|Dependencies', module)
title: 'Component dependencies',
},
}))
- .addDecorator(withKnobs)
- .add('inputs and inject dependencies with knobs', () => ({
- component: DiComponent,
- props: {
- title: text('title', 'Component dependencies'),
- },
- }));
+ .add(
+ 'inputs and inject dependencies with knobs',
+ () => ({
+ component: DiComponent,
+ props: {
+ title: text('title', 'Component dependencies'),
+ },
+ }),
+ {
+ decorators: [withKnobs],
+ }
+ );
diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts
index b342d530c21c..9bb29bc75ba7 100644
--- a/examples/angular-cli/src/stories/custom-pipes.stories.ts
+++ b/examples/angular-cli/src/stories/custom-pipes.stories.ts
@@ -19,10 +19,15 @@ storiesOf('Custom|Pipes', module)
field: 'foobar',
},
}))
- .addDecorator(withKnobs)
- .add('With Knobs', () => ({
- component: NameComponent,
- props: {
- field: text('field', 'foobar'),
- },
- }));
+ .add(
+ 'With Knobs',
+ () => ({
+ component: NameComponent,
+ props: {
+ field: text('field', 'foobar'),
+ },
+ }),
+ {
+ decorators: [withKnobs],
+ }
+ );
diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts
index d7ca9ed069be..12814781bcd0 100644
--- a/examples/angular-cli/src/stories/custom-providers.stories.ts
+++ b/examples/angular-cli/src/stories/custom-providers.stories.ts
@@ -19,14 +19,19 @@ storiesOf('Custom|Providers', module)
name: 'Static name',
},
}))
- .addDecorator(withKnobs)
- .add('With knobs', () => {
- const name = text('name', 'Dynamic knob');
+ .add(
+ 'With knobs',
+ () => {
+ const name = text('name', 'Dynamic knob');
- return {
- component: ServiceComponent,
- props: {
- name,
- },
- };
- });
+ return {
+ component: ServiceComponent,
+ props: {
+ name,
+ },
+ };
+ },
+ {
+ decorators: [withKnobs],
+ }
+ );
diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts
index df2e1b20a78c..fc14f680dde0 100644
--- a/examples/angular-cli/src/stories/custom-styles.stories.ts
+++ b/examples/angular-cli/src/stories/custom-styles.stories.ts
@@ -24,19 +24,24 @@ storiesOf('Custom|Style', module)
`,
],
}))
- .addDecorator(withKnobs)
- .add('With Knobs', () => ({
- template: ``,
- props: {
- text: text('text', 'Button with custom styles'),
- onClick: action('log'),
- },
- styles: [
- `
+ .add(
+ 'With Knobs',
+ () => ({
+ template: ``,
+ props: {
+ text: text('text', 'Button with custom styles'),
+ onClick: action('log'),
+ },
+ styles: [
+ `
storybook-button-component {
background-color: red;
padding: 25px;
}
`,
- ],
- }));
+ ],
+ }),
+ {
+ decorators: [withKnobs],
+ }
+ );
diff --git a/lib/client-api/src/client_api.js b/lib/client-api/src/client_api.js
index b9b7925fff8d..2c5991394e00 100644
--- a/lib/client-api/src/client_api.js
+++ b/lib/client-api/src/client_api.js
@@ -134,6 +134,7 @@ export default class ClientApi {
const localDecorators = [];
let localParameters = {};
+ let hasAdded = false;
const api = {
kind,
};
@@ -148,6 +149,7 @@ export default class ClientApi {
});
api.add = (storyName, storyFn, parameters) => {
+ hasAdded = true;
const { _globalParameters, _globalDecorators } = this;
const id = toId(kind, storyName);
@@ -215,6 +217,12 @@ export default class ClientApi {
};
api.addDecorator = decorator => {
+ if (hasAdded) {
+ console.warn(`You have added a decorator to the kind '${kind}' after a story has already been added.
+In Storybook 4 this applied the decorator only to subsequent stories. In Storybook 5+ it applies to all stories.
+This is probably not what you intended. Read more here: https://github.com/storybooks/storybook/blob/master/MIGRATION.md`);
+ }
+
localDecorators.push(decorator);
return api;
};