Storybook: Unable to hide addon per story

Created on 10 Jan 2020  路  2Comments  路  Source: storybookjs/storybook

Describe the bug
I have multiple stories per component.
In the manager preview panel I display each story individually, and then display them all together in another story.

I want to hide the addon Knobs in the story where the components are displayed all together.
Essentially, I want to hide the Knobs addon per story.
When I try to set parameters on a per story level, it does not work.

To Reproduce

  1. Create two stories (one named primary, and one named secondary) of the same component and apply the Knobs addon.
  2. Create a default export obj and add the withKnobs decorator - this should apply knobs to all of the stories.
  3. Apply the story object to the story named 'secondary' and set the parameters object on the story level to withKnobs: {disable: true}

Expected behavior
I expect the Knobs addon panel to be visible on the 'primary' story, and not visible on the 'secondary' story

Code snippets

// default export
export default {
  title: 'components/Buttons',
  component: Button,
  decorators: [withKnobs],
  parameters: { options: {showPanel: true }}
}

// story level story object
Secondary.story = {
  parameters: { 
    withKnobs: {
      disable: true
    } 
  }
};

System:
Environment Info:

System:
OS: macOS Sierra 10.12.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
Browsers:
Chrome: 79.0.3945.117
Firefox: 60.7.2
Safari: 12.1.1
npmPackages:
@storybook/addon-a11y: ^5.2.8 => 5.2.8
@storybook/addon-actions: ^5.2.8 => 5.2.8
@storybook/addon-docs: ^5.2.8 => 5.2.8
@storybook/addon-info: ^5.2.8 => 5.2.8
@storybook/addon-knobs: ^5.2.8 => 5.2.8
@storybook/addon-links: ^5.2.8 => 5.2.8
@storybook/addon-viewport: ^5.2.8 => 5.2.8
@storybook/addons: ^5.2.6 => 5.2.8
@storybook/preset-scss: ^1.0.2 => 1.0.2
@storybook/react: ^5.2.8 => 5.2.8

options question / support

Most helpful comment

Thanks for updating the issue with a fix. However, the parameter has since changed. It is no longer withKnobs, just simply knobs.

It needs to look like:

Secondary.story = {
  parameters: { 
    knobs: {
      disabled: true
    } 
  }
};

All 2 comments

Ok, I have now worked this out..... i needed to use:

'disabled: true'
not...
'disable: true'

:(

Thanks for updating the issue with a fix. However, the parameter has since changed. It is no longer withKnobs, just simply knobs.

It needs to look like:

Secondary.story = {
  parameters: { 
    knobs: {
      disabled: true
    } 
  }
};
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hansthinhle picture hansthinhle  路  57Comments

EdenTurgeman picture EdenTurgeman  路  81Comments

bpeab picture bpeab  路  70Comments

43081j picture 43081j  路  61Comments

hckhanh picture hckhanh  路  69Comments