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

[catrope]

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:

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:

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.

[catrope]

In another story, I added a custom argType for the text direction, and its description was still rendered in the ghost control:

[shilman]

@yannbf can you please take a look at this?

[tevey]

Any update on this? I have the same issue running Storybook 6.2.9 web-components version.

[graup]

Also it seems to me that include does not automatically exclude everything else.

I would expect this to work like this:

• given: [a,b,c,d]
• include [a,b,c] -> output [a,b,c]
• exclude [a] -> output [b,c,d]

[shilman]

@graup i'd expect that as well--sounds like a regression

[graup]

Here's a silly workaround:

- include: listOfProps
+ include: new RegExp(`^(${listOfProps.join('|')})`)

Surprising that this works. Those two lines really should have the same effect.

[cichyadam]

Hi @catrope, I'm curious how did you manage to group the controls to Props, Attributes and Events? Before knobs were depracated it could be done with passing the third parameter to knob as groupId so to achieve something like this I would do this in React:

import { text } from '@storybook/addon-knobs' 

...

<Card className={text('className', 'text-center', 'Props')}>
  <Card.Body>
    <Card.Title>{text('Title', 'Card Title', 'Texts')}</Card.Title>
    <Card.Text>{text('Text', 'Card Text', 'Texts')}</Card.Text>
    <Button>{text('Action', 'Go somewhere', 'Texts')}</Button>
  </Card.Body>
</Card>

And I'm trying to achieve similar things with controls and based on your screenshots it looks like you managed to do it?

[catrope]

It happens automatically when you use the Vue plugin (@storybook/vue). But you should also be able to do it by setting the .table.category property in an argType to your story as follows:

export default {
    title: 'Foo',
    // (other stuff)
    argTypes: {
        disabled: {
            control: 'boolean',
            table: {
                category: 'Attributes'
            }
        }
        // (other argtypes)
};

See the documentation here: https://storybook.js.org/docs/react/writing-docs/doc-blocks#grouping