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.

addon-controls - Disabling controls for a component does not disable them on docsPage

See original GitHub issue

Describe the bug When I set the parameter for controls to disabled, the Controls tab disappears, but controls are still present on the docsPage.

To Reproduce Steps to reproduce the behavior:

  1. In a *.stories.js file (maybe MDX too, but I have only verified this on *.stories.js), set the export default as such:
export default {
  title: 'Components/MyNiceComponent',
  component: MyNiceComponent,
  parameters: {
    controls: {
      disabled: true,
    }
  }
}
  1. Serve Storybook.
  2. Navigate to MyGreatComponent
  3. See that the Controls tab is no longer visible.
  4. Click on the Docs tab.
  5. See that the controls are still visible, and still function.

Expected behavior When I disable controls for a component, I expect both the controls tab to disappear AND the controls column on the docsPage to disappear, as well.

System:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 80.0
    Safari: 13.1.2

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:16 (7 by maintainers)

github_iconTop GitHub Comments

13reactions
shilmancommented, Oct 22, 2020

disabling a single row foo from showing up in the table:

export default {
  title: ...,
  component: ...,
  argTypes: {
    foo: { table: { disable: true } }
  },
}

cc @jonniebigodes

8reactions
emilfjellstromcommented, Dec 11, 2020

An addition to this, is there a way to disable the controls, but still have them shown? I have a boolean I always want to be true in a curtain state and I want to show its supposed to be true when displaying this component.

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - @storybook/addon-controls: howto not auto-generate ...
Lets say I have a component prop that is an event handler and I obviously do not want it to have a control....
Read more >
DocsPage - Storybook - JS.ORG
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
@storybook/addon-controls | Yarn - Package Manager
It creates an addon panel next to your component examples ("stories"), so you can edit them live. Framework Support. Screenshot ...
Read more >
Cannot remove controls from Canvas but keep property in ...
Cannot remove controls from Canvas but keep property in Docs Page. ... Pretty sure you can just disable the controls addon entirely and...
Read more >
storybook/addon-docs - npm
DocsPage is a zero-config aggregation of your component stories, ... MDX gives you full control over your component documentation.
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