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

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:

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,
    }
  }
}

Serve Storybook.
Navigate to MyGreatComponent
See that the Controls tab is no longer visible.
Click on the Docs tab.
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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 3
Comments: 16 (7 by maintainers)

Most upvoted comments

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

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

cc @jonniebigodes

+14

shilman on Oct 22, 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.

emilfjellstrom on Dec 11, 2020

Possible workaround: in preview.js, filter out all the controls:

export const parameters = {
  controls: {
    exclude: /^.*?/
  },
};

rdebeasi on Apr 26, 2022

No the PR was closed without merging

shilman on Jul 25, 2021

@chalovega-cs I think you can filter all of them like this: https://storybook.js.org/docs/react/essentials/controls#filtering-controls

shilman on May 5, 2021

For a component:

<Meta
  title=...
  component={...}
  argTypes={{
    foo: { table: { disable: true } }
  }}
/>

For a story:

<Story
  name=...
  argTypes={{
    foo: { table: { disable: true } }
  }}
>
  ...
</Story>

shilman on Oct 24, 2020

How to disable controls for a story in MDX?

mahimachhalani on Oct 23, 2020