@storybook/addon-controls: howto not auto-generate control for a certain prop

user_189673 0
Viewed 11275

@storybook/addon-controls is fun, however I cannot find a way to disable control generation for a given arg. Lets say I have a component prop that is an event handler and I obviously do not want it to have a control. So I want it to appear in the list of props with the name, type and description, but no control. How do I do that?

storybook reactjs
2 Answers

this was recently added: https://github.com/storybookjs/storybook/pull/11388 Essentially you should be able to use control.disable within argTypes for a given arg.

Suppose you have a story with foo and bar properties (auto-generated or otherwise) and you want to hide the foo row completely and disable controls for the bar row on a specific story:

MyStory.argTypes = {
  foo: { table: { disable: true } },
  bar: { control: { disable: true } },
};

Here's the entry in the docs.

Cheers

user_47737080

About a year ago include and exclude of args was added (link to the PR).

In the documentation it is referred to as "Filtering Controls".

You can choose which arguments to include and/or exclude by string, array or regular expression.

Usage example (from the docs):

const Template = (args) => ({
    // Your template goes here
});

ArrayInclude = Template.bind({})
ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };

RegexInclude = Template.bind({})
RegexInclude.parameters = { controls: { include: /^hello*/ } };

ArrayExclude = Template.bind({})
ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };

RegexExclude = Template.bind({})
RegexExclude.parameters = { controls: { exclude: /^hello*/ } };
user_50965780
Related