search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.56k stars 9.3k forks source link

Setting `control: false` for a control doesn't seem to do anything #17969

Open kaiyoma opened 2 years ago

kaiyoma commented 2 years ago

Describe the bug According to the docs, setting control: false in the argTypes should hide a control from the Controls addon, but keep it in the Docs page. However, I can't get this value to do anything, whether specified at the story level or file level.

To Reproduce Set control: false for an arg.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\Node.js\node.EXE
    npm: 8.6.0 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Chrome: 100.0.4896.88
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.39)
  npmPackages:
    @storybook/addon-actions: 6.4.19 => 6.4.19
    @storybook/addon-controls: 6.4.19 => 6.4.19
    @storybook/addon-docs: 6.4.19 => 6.4.19
    @storybook/addons: 6.4.19 => 6.4.19
    @storybook/api: 6.4.19 => 6.4.19
    @storybook/components: 6.4.19 => 6.4.19
    @storybook/core: 6.4.19 => 6.4.19
    @storybook/core-events: 6.4.19 => 6.4.19
    @storybook/react: 6.4.19 => 6.4.19
    @storybook/theming: 6.4.19 => 6.4.19

Additional context Setting table: { disable: true } does work, but removes the arg from docs also, which is not what I want.

kaiyoma commented 2 years ago

I upgraded to the latest Storybook (6.4.22) and I'm still seeing this. Setting table: { disable: true } works, but hides the prop everywhere, which isn't desirable here. Setting control: false does nothing.

kaiyoma commented 2 years ago

This problem is most obvious with function props (e.g. callbacks), where there is no applicable control, so the Control column shows - to begin with, then setting control: false just does the same thing, so it appears nothing is happening.

For clarity, I'm looking for a way to hide the row entirely (from Controls only), since including a row with no control is dumb and just creates noise. I still want all props to appear in Docs, but would like Controls to be more streamlined, to make it really easy (and fun!) to play with the component. Having lots of useless rows in the Controls table makes the Storybook experience more difficult than it should be.

kaiyoma commented 2 years ago

Update: something has changed in Storybook here. Now, if you set table: { disable: true } the prop disappears from Controls, but stays in Docs, which is great for me (exactly the behavior I'm looking for). However, the total count of controls is wrong now:

image

In the above example, I have no idea where 15 is coming from. šŸ¤·

Benjaminlooi commented 2 years ago

Getting the same problem on Angular 13 and storybook 6.5.9