storybookjs/storybook

Hiding controls with include/exclude results in empty rows and sections

Open

#14,739 创建于 2021年4月28日

在 GitHub 查看
 (8 评论) (11 反应) (0 负责人)TypeScript (89,909 star) (10,058 fork)batch import
addon: controlsbughelp wantedtriage:reviewed

描述

Describe the bug If I hide all but one of a story's controls using the include or exclude configuration fields (as documented here), the controls panel looks weird:

Screenshot from 2021-04-27 18-53-47

Note the various empty rows, some of which contain controls (whose values don't seem to get passed to the story), and the empty "Attributes" section. The full list of controls (if I don't use include or exclude at all) looks like this:

Screenshot from 2021-04-27 18-53-57

Note the similarity: the "Events" section disappeared completely, as did the header of the "Props" section, but every row just seems to have been blanked out rather than being hidden.

It doesn't matter whether I use include to only show the controls I want, or exclude to hide the ones I don't, the result is the same.

To Reproduce Hide any number of controls using include or exclude. Hiding even just one control causes this problem. The one exception seems to be that hiding a control that is a boolean toggle doesn't trigger the bug.

https://gerrit.wikimedia.org/r/c/wvui/+/683116 reproduces this, both the screenshot shown above and similar issues with other stories (screenshots of those below)

System

$ npx sb@next info

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 10.15.2 - ~/.nvm/versions/node/v10.15.2/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.2/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
  npmPackages:
    @storybook/addon-a11y: 6.2.9 => 6.2.9 
    @storybook/addon-actions: 6.2.9 => 6.2.9 
    @storybook/addon-backgrounds: 6.2.9 => 6.2.9 
    @storybook/addon-controls: 6.2.9 => 6.2.9 
    @storybook/addon-docs: 6.2.9 => 6.2.9 
    @storybook/addon-links: 6.2.9 => 6.2.9 
    @storybook/addon-storysource: 6.2.9 => 6.2.9 
    @storybook/addon-viewport: 6.2.9 => 6.2.9 
    @storybook/vue: 6.2.9 => 6.2.9 

Additional context I had been hiding controls like this:

MyStory.argTypes = {
    propName: {
        table: {
            disable: true
        }
    }
};

which works just fine, and which I will continue to do. But it gets cumbersome when hiding a lot of controls, or when hiding all but one or two, which is why I was excited to try the include and exclude features.

贡献者指南