Storybook: Unexpected Behaviors with storiesOf.addDecorator

Created on 20 Aug 2020  路  2Comments  路  Source: storybookjs/storybook

Describe the bug

I have an issue with storiesOf (Legacy) API in v6.
If has multiple storiesOf in single file, storiesOf.addDecorator is storiesOf without .addDecorator also affects.
Please see below Screenshots

is this is a bug or Better solution in v6?

To Reproduce
Steps to reproduce the behavior:

  1. Create a multiple storiesOf like Code snippets
  2. Run Storybook and see Screenshots

Expected behavior

.addDecorator of first storiesOf should not wrap second storiesOf

Kapture 2020-08-20 at 10 50 40

Screenshots
Kapture 2020-08-20 at 6 57 38

Code snippets

const withBackground = (story) => (
  <div style={{ backgroundColor: 'blue' }}>{story()}</div>
)

// first storiesOf
storiesOf('Button', module)
  .addDecorator(withBackground)
  .add('default', () => <Button />)

// second storiesOf
storiesOf('Button', module)
  .add('color is red', () => <Button color="red" />)

Here' s my Storybook code using the addDecorator.

System:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 13.10.1 - ~/.nodenv/versions/13.10.1/bin/node
    npm: 6.14.7 - ~/.nodenv/versions/13.10.1/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: 6.0.10 => 6.0.10
    @storybook/addon-knobs: 6.0.10 => 6.0.10
    @storybook/react: 6.0.10 => 6.0.10
    @storybook/theming: 6.0.10 => 6.0.10
core decorators question / support

All 2 comments

Yes, this was a breaking change in 6.0:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories

Thanks @shilman maybe I have to refactor stories file for v6

Was this page helpful?
0 / 5 - 0 ratings