Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[addon-controls] Decorators aren't able to add controls #12836

Closed
andyrichardson opened this issue Oct 20, 2020 · 3 comments
Closed

[addon-controls] Decorators aren't able to add controls #12836

andyrichardson opened this issue Oct 20, 2020 · 3 comments

Comments

@andyrichardson
Copy link
Contributor

Describe the bug
Adding argTypes on a story doesn't result in any options being presented in controls panel.

To Reproduce

Consider the following decorator which provides a value via context which can be changed via a control.

const userDecorator: DecoratorFn = (Story, context) => (
  <UserContext.Provider value={context.args.user}>
    <Story 
      {...context} 
      argTypes={{ ...context.argTypes, user: { control: 'text' } }} // argType is added to story
    />
  </UserContext.Provider>
)

Expected behavior
The user control, added by the decorator, is presented in the controls panel.

Actual behavior
Any changes to the argTypes attribute in context or context.parameters makes no difference.

System

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.80
    Edge: 86.0.622.43
    Firefox: 80.0.1
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26
    @storybook/addon-controls: ^6.0.26 => 6.0.26
    @storybook/addon-essentials: ^6.0.26 => 6.0.26
    @storybook/addon-knobs: ^6.0.26 => 6.0.26
    @storybook/addon-links: ^6.0.26 => 6.0.26
    @storybook/addon-storyshots: ^6.0.26 => 6.0.26
    @storybook/addon-storyshots-puppeteer: ^6.0.26 => 6.0.26
    @storybook/addons: ^6.0.26 => 6.0.26
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.26 => 6.0.26

Additional context
This bug only occurs when setting argTypes in a decorator.

The following works fine:

export const MyStory = () => <SomeComponent />
MyStory.argTypes = { user: { control: 'text' } };
@shilman
Copy link
Member

shilman commented Oct 20, 2020

argTypes are defined statically, so the only way to extend them is to annotate a story or the default export in a story file. they can't be extended dynamically with decorators.

@shilman shilman added the PN label Oct 20, 2020
@andyrichardson
Copy link
Contributor Author

@shilman is that something that is open to change? My understanding was that an addon only parses a story once all the decorators have been applied.

Does this mean users are expected to sue both knobs and argTypes?

@andyrichardson
Copy link
Contributor Author

Closing as this is a dupe of #11984

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants