Merge pull request #4899 from storybooks/fix/replace-setOptions-to-withOptions

fix(): deprecations with replacing setOptions with withOptions

examples/angular-cli/.storybook/config.ts

@@ -1,12 +1,14 @@
-import { configure } from '@storybook/angular';
+import { configure, addDecorator } from '@storybook/angular';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 import addCssWarning from '../src/cssWarning';
 
 addCssWarning();
 
-setOptions({
+addDecorator(
+  withOptions({
     hierarchyRootSeparator: /\|/,
-});
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed

examples/marko-cli/.storybook/config.js

@@ -1,9 +1,11 @@
-import { configure } from '@storybook/marko';
+import { configure, addDecorator } from '@storybook/marko';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
+addDecorator(
+  withOptions({
     hierarchyRootSeparator: /\|/,
-});
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed

examples/mithril-kitchen-sink/.storybook/config.js

@@ -1,9 +1,11 @@
-import { configure } from '@storybook/mithril';
+import { configure, addDecorator } from '@storybook/mithril';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
+addDecorator(
+  withOptions({
     hierarchyRootSeparator: /\|/,
-});
+  })
+);
 
 function loadStories() {
   const req = require.context('../src/stories', true, /\.stories\.js$/);

examples/official-storybook/stories/addon-a11y.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
 
 import { checkA11y } from '@storybook/addon-a11y';
 import BaseButton from '../components/BaseButton';
@@ -14,10 +13,7 @@ const text = 'Testing the a11y addon';
 
 storiesOf('Addons|a11y', module)
   .addDecorator(checkA11y)
-  .addDecorator(fn => {
+  .addParameters({ options: { selectedAddonPanel: '@storybook/addon-a11y/panel' } })
-    setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
-    return fn();
-  })
   .add('Default', () => <BaseButton label="" />)
   .add('Label', () => <BaseButton label={text} />)
   .add('Disabled', () => <BaseButton disabled label={text} />)

examples/official-storybook/stories/addon-actions.stories.js

@@ -7,7 +7,6 @@ import {
   decorate,
   decorateAction,
 } from '@storybook/addon-actions';
-import { setOptions } from '@storybook/addon-options';
 import { Button } from '@storybook/react/demo';
 import { window, File } from 'global';
 
@@ -60,7 +59,9 @@ storiesOf('Addons|Actions', module)
     return <Button onClick={fn}>Action.name: {fn.name}</Button>;
   })
   .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
-  .add('All types', () => {
+  .add(
+    'All types',
+    () => {
       function A() {}
       function B() {}
 
@@ -76,7 +77,6 @@ storiesOf('Addons|Actions', module)
 
       return (
         <div>
-        {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
           <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
           <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
           <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
@@ -123,7 +123,9 @@ storiesOf('Addons|Actions', module)
           <Button onClick={() => action('window')(window)}>Window</Button>
         </div>
       );
-  })
+    },
+    { options: { selectedAddonPanel: 'storybook/actions/actions-panel' } }
+  )
   .add('configureActionsDepth', () => {
     configureActions({
       depth: 2,

examples/polymer-cli/.storybook/config.js

@@ -1,9 +1,11 @@
-import { configure } from '@storybook/polymer';
+import { configure, addDecorator } from '@storybook/polymer';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
+addDecorator(
+  withOptions({
     hierarchyRootSeparator: /\|/,
-});
+  })
+);
 
 function loadStories() {
   require('../src/stories/index.stories');

examples/riot-kitchen-sink/.storybook/config.js

@@ -1,9 +1,11 @@
-import { configure } from '@storybook/riot';
+import { configure, addDecorator } from '@storybook/riot';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
+addDecorator(
+  withOptions({
     hierarchyRootSeparator: /\|/,
-});
+  })
+);
 
 function loadStories() {
   require('../src/stories');

examples/svelte-kitchen-sink/.storybook/config.js

@@ -1,8 +1,8 @@
-import { configure } from '@storybook/svelte';
+import { configure, addDecorator } from '@storybook/svelte';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 
 // Used with @storybook/addon-options/register
-setOptions({ hierarchyRootSeparator: /\|/ });
+addDecorator(withOptions({ hierarchyRootSeparator: /\|/ }));
 
 function loadStories() {
   require('../src/stories');

examples/vue-kitchen-sink/.storybook/config.js

@@ -1,5 +1,5 @@
-import { configure } from '@storybook/vue';
+import { configure, addDecorator } from '@storybook/vue';
-import { setOptions } from '@storybook/addon-options';
+import { withOptions } from '@storybook/addon-options';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
@@ -8,9 +8,11 @@ import MyButton from '../src/stories/Button.vue';
 Vue.component('my-button', MyButton);
 Vue.use(Vuex);
 
-setOptions({
+addDecorator(
+  withOptions({
     hierarchyRootSeparator: /\|/,
-});
+  })
+);
 
 function loadStories() {
   require('../src/stories');

examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot

@@ -6,6 +6,12 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
 >
   <div
     style="margin: auto; max-height: 100%;"
+  >
+    <div
+      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+    >
+      <div
+        style="margin: auto; max-height: 100%;"
       >
         <div
           style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
@@ -23,4 +29,6 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
         </div>
       </div>
     </div>
+  </div>
+</div>
 `;

examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot

@@ -4,6 +4,9 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
 <div
   style="border: medium solid blue;"
 >
+  <div
+    style="border: medium solid blue;"
+  >
     <div
       style="border: medium solid blue;"
     >
@@ -18,12 +21,16 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`Storyshots Custom|Decorator for Vue template 1`] = `
 <div
   style="border: medium solid blue;"
 >
+  <div
+    style="border: medium solid blue;"
+  >
     <div
       style="border: medium solid blue;"
     >
@@ -39,4 +46,5 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;