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

[novellac]

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:

0. 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

[VladimirCores]

How to completely hide control for prop from Controls pane?

[cbojaca]

How can we hide a property from the controls page?

[shilman]

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

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

cc @jonniebigodes

[mahimachhalani]

How to disable controls for a story in MDX?

[shilman]

For a component:

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

For a story:

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

[FilipMessa]

Is it possible to do the opposite? I mean, I set the controls to hide by default and then enable what I want to see?

[shilman]

In MDX the ArgsTable block has an include prop that does what you want. But not for the other use case unfortunately @FilipMessa

[emilfjellstrom]

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.

[shilman]

@rayzoor12 it's an open issue #12693

[chalovega]

is there a way to disable all controls for a story? (without having to disable one by one with table: {disable:true}). I want to have one interactive story (with controls) and the other stories just as read only use cases.

[shilman]

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

[JokerDang]

Hi @shilman, How can I conditionally disable a control in Storybook based on the value of another argument?

[shilman]

@JokerDang unfortunately you can't

[JokerDang]

@shilman , I saw you created PR for similar this feature. https://github.com/storybookjs/storybook/pull/13890

so it work now ?

[shilman]

No the PR was closed without merging

[rdebeasi]

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

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