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

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]

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

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