Hide auto-generated controls for properties on web components

[tigrr]

Is your feature request related to a problem? Please describe Storybook shows a ton of auto-generated controls for all the properties (including even private ones), attributes, slots, CSS shadow parts and events of a custom element. This creates a lot of noise for testing a component.

Describe the solution you'd like Add an option to disable rendering of the auto-generated controls.

Describe alternatives you've considered The only other method I know is to whitelist the wanted controls in parameters: { controls: { include: [ ... ] } }. But that's a lot of unnecessary double-typing.

Are you able to assist to bring the feature to reality? no

[tigrr]

One small improvement on the workaround I offered above for those who are looking for a solution now.

Given you have a story MyComponent with args property on it, add:

MyComponent.parameters = {
    controls: {
        include: Object.keys(MyComponent.args),
    },
}

This will whitelist and show only the controls defined in MyComponent.args.

[didnotwant]

@tigrr — good point, even though my opinion is that the properties shown in the Storybook may be considered as quite good-looking docs page. I was looking for something else: to just collapse all the unnecessary tables by default in the UI – unfortunately I didn't find an easy way to do that. Maybe it's worth to ask on their Discord about the possibilities.

[jrencz]

@tigrr if those are web-components then I guess you have them generated into custom-elements.json from where it's set via setCustomElementsManifest from @storybook/web-components;

You have at least 2 places where you can intervene

• on custom-elements.json level (how it's generated)
• by doing a wrapper to setCustomElementsManifest

In my setup I did both.

I get custom-elements.json generated via @custom-elements-manifest/analyzer so I can use cem plugins - those that are there available publicly, as well as some custom I wrote (they are fairly easy to write)

In a wrapper over setCustomElementsManifest I do a variation of what I found https://github.com/storybookjs/storybook/issues/15436#issuecomment-1272769983

I hope those will help you achieve what you aim for :)

[tigrr]

@jrencz , that would remove those properties entirely. I want them (among other uses) to appear in the Docs page, which is automatically generated by Storybook. And @didnotwant , that is exactly where I want all the properties to be listed, the Docs page, and not the story controls.

[jrencz]

@tigrr ok, now I get it.

BTW: I think about it the other way around as of now - I want only the essentials in docs page and full set (or a dedicated subset) in stories.

It seems like the solution that would fit your need and mine is more of a "cookbook recipe" (possibly in a form of a higher order function to be applied onto stories - a decorator?) than a feature to be baked into storybook

[seanmaisch]

I would like to reiterate the desire to disable automatically generated controls via inferred argTypes from components. Some of my components are using MUI components that I would like to "lock" the props on, but Storybook is inferring these props automatically and surfacing them to our stories, rendering a lot of controls that I don't want developers or contributors to have visibility of.

It's really not ideal to have to go in and set dozens of properties to table: { disable: true } within each story, so having the ability to turn off automatically generated controls would be great. Even further, it'd be great to have that sort of control on a story by story level, rather than some sort of preview.js/.ts parameter.