question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Passing props into stories through decorators no longer working in Storybook 6.3

See original GitHub issue

Describe the bug Prior to version 6.3 of Storybook, when I create a decorator, I’m able to pass props into it like so

export const withFoobar = (Story, context) => (
  <Story foobar="foo" {...context} />
);

And then I expect to be able to access the props from any story:

const Template = (args, { foobar }) => {
  return (
    <div>
      <Button {...args} />
      <p>
        This value should say 'foo': <code>{foobar}</code>
      </p>
    </div>
  );
};

However, as of 6.3, the props I pass in via the decorator are now undefined.

To Reproduce

https://github.com/JoshTumath/storybook-decorator-props-bug-repro

https://joshtumath.github.io/storybook-decorator-props-bug-repro/?path=/story/example-button--primary&globals=measureEnabled:false

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 2.4.2 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.4 => 6.4.0-alpha.4 
    @storybook/addon-docs: ^6.4.0-alpha.4 => 6.4.0-alpha.4 
    @storybook/addon-essentials: ^6.4.0-alpha.4 => 6.4.0-alpha.4 
    @storybook/addon-links: ^6.4.0-alpha.4 => 6.4.0-alpha.4 
    @storybook/react: ^6.4.0-alpha.4 => 6.4.0-alpha.4

Additional context None

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, Jun 29, 2021

@JoshTumath Yes, will release in 6.3.x later this week or first thing next

1reaction
shilmancommented, Jun 28, 2021

Thanks @JoshTumath. I can confirm this is a regression from 6.2.9 which was introduced in 6.3.0-alpha.15, presumably in this PR: https://github.com/storybookjs/storybook/pull/14692

Read more comments on GitHub >

github_iconTop Results From Across the Web

Decorators - Storybook - JS.ORG
A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators to augment your stories with extra...
Read more >
Storybook 6 decorator pass props to story not working
I want to have the option to pass state to my stories using state and setState props. This is how I defined my...
Read more >
@storybook/addon-knobs - npm
Storybook Addon Knobs allow you to edit props dynamically using the ... Add the `withKnobs` decorator to add knobs support to your stories....
Read more >
Story for a Component With Content Projection - Medium
Storybook and Angular components. Context: Angular 12, StoryBook 6.3.9. Hey, I started to use Storybook and I would Like to share my experience....
Read more >
Storybook Unable to load on DSM website - InVision Support
First the template.Bind() it's not valid anymore with Storybook version 6.3.6, then I had to make a lot of changes inside story.js, preview.js ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found