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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/angular';
+import { withOptions } from '@storybook/addon-options';
 import addCssWarning from '../src/cssWarning';
 
 addCssWarning();
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/marko';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/mithril';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+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 => {
-    setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
-    return fn();
-  })
+  .addParameters({ options: { selectedAddonPanel: '@storybook/addon-a11y/panel' } })
   .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,70 +59,73 @@ 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', () => {
-    function A() {}
-    function B() {}
+  .add(
+    'All types',
+    () => {
+      function A() {}
+      function B() {}
 
-    const bound = B.bind({});
+      const bound = B.bind({});
 
-    let file;
-    try {
-      file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
-    } catch (error) {
-      file = error;
-    }
-    const reg = /fooBar/g;
+      let file;
+      try {
+        file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
+      } catch (error) {
+        file = error;
+      }
+      const reg = /fooBar/g;
 
-    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>
-        <Button onClick={() => action('File')(file)}>File</Button>
-        <Button onClick={() => action('Function')(A)}>Function A</Button>
-        <Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button>
-        <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
-        <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
-        <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
-        <Button onClick={() => action('null')(null)}>null</Button>
-        <Button onClick={() => action('Number')(10000)}>Number</Button>
-        <Button
-          onClick={() =>
-            action('Multiple')(
-              'foo',
-              1000,
-              true,
-              false,
-              [1, 2, 3],
-              null,
-              undefined,
-              { foo: 'bar' },
-              window
-            )
-          }
-        >
-          Multiple
-        </Button>
-        <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
-          Plain Object
-        </Button>
-        <Button
-          onClick={() =>
-            action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
-          }
-        >
-          Object (depth: 2)
-        </Button>
-        <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
-        <Button onClick={() => action('String')('foo')}>String</Button>
-        <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
-        <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
-        <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
-        <Button onClick={() => action('window')(window)}>Window</Button>
-      </div>
-    );
-  })
+      return (
+        <div>
+          <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>
+          <Button onClick={() => action('File')(file)}>File</Button>
+          <Button onClick={() => action('Function')(A)}>Function A</Button>
+          <Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button>
+          <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
+          <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
+          <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
+          <Button onClick={() => action('null')(null)}>null</Button>
+          <Button onClick={() => action('Number')(10000)}>Number</Button>
+          <Button
+            onClick={() =>
+              action('Multiple')(
+                'foo',
+                1000,
+                true,
+                false,
+                [1, 2, 3],
+                null,
+                undefined,
+                { foo: 'bar' },
+                window
+              )
+            }
+          >
+            Multiple
+          </Button>
+          <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
+            Plain Object
+          </Button>
+          <Button
+            onClick={() =>
+              action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
+            }
+          >
+            Object (depth: 2)
+          </Button>
+          <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
+          <Button onClick={() => action('String')('foo')}>String</Button>
+          <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
+          <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
+          <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
+          <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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/polymer';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/riot';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/svelte';
+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 { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/vue';
+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({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   require('../src/stories');

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

@@ -13,12 +13,20 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
       <div
         style="margin: auto; max-height: 100%;"
       >
-        <button
-          class="button rounded"
-          style="color: rgb(66, 185, 131); border-color: #42b983;"
+        <div
+          style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
         >
-          A Button with rounded edges!
-        </button>
+          <div
+            style="margin: auto; max-height: 100%;"
+          >
+            <button
+              class="button rounded"
+              style="color: rgb(66, 185, 131); border-color: #42b983;"
+            >
+              A Button with rounded edges!
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -8,13 +8,17 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
     style="border: medium solid blue;"
   >
     <div
-      style="border: medium solid red;"
+      style="border: medium solid blue;"
     >
-      <button
-        class="button"
+      <div
+        style="border: medium solid red;"
       >
-        renders component: MyButton!
-      </button>
+        <button
+          class="button"
+        >
+          renders component: MyButton!
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -28,14 +32,18 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
     style="border: medium solid blue;"
   >
     <div
-      style="border: medium solid red;"
+      style="border: medium solid blue;"
     >
-      <button
-        class="button"
-        style="color: rgb(66, 185, 131); border-color: #42b983;"
+      <div
+        style="border: medium solid red;"
       >
-        MyButton with template!
-      </button>
+        <button
+          class="button"
+          style="color: rgb(66, 185, 131); border-color: #42b983;"
+        >
+          MyButton with template!
+        </button>
+      </div>
     </div>
   </div>
 </div>