Storybook: addon-controls - Better documentation for custom options controls

[SebDuf]

Is your feature request related to a problem? Please describe.
I was playing around the new addon-controls, but I had trouble finding how to implement a custom radio control for a prop with limited options

Describe the solution you'd like
An example of how to use the options controls, I had to dig into the tests to find out how to use them properly (eg: a combination of controlType', type and options)

Describe alternatives you've considered
An example in the addon-controls doc that shows a custom option control scenario

Are you able to assist bring the feature to reality?
Not for a PR, but here's my working story for inspiration:

export const Primary = (args) =>{
  return <Button {...args} >Button</Button>;
};

Primary.argTypes = {
  variant: {
    control: {
      controlType: 'radio',
      options: [
        'primary',
        'secondary',
        'outlined',
        'text-only',
      ],
      type: 'options'
    },
    defaultValue: 'primary',
  }
};

Additional context
https://github.com/storybookjs/storybook/blob/bf1b95564053aacc8d4b00479485beb655ef21b4/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts#L142-L152

[sami616]

Yes, this issue helped me figure out how to use this too. Is it documented anywhere on how to exclude props from the output too?

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.20 containing PR #11003 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

@SebDuf i actually changed the API in #11003 ... there were unfinished changes and I finished those and added a bit of documentation

[shilman]

@sami616 There are include/exclude properties on the Props component if you're using MDX (list of fields or regex). If you're using typescript, you can actually configure this via propFilter on the loader, see: https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md#L36

[sami616]

@shilman is there a way to exclude from the controls, but keep in the prop table?

[shilman]

@sami616 If your stories don't use args, the controls won't show up. There probably should be a prop for that as well.

[shilman]

@sami616 I added a way to selectively disable controls & rows https://github.com/storybookjs/storybook/pull/11388

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.39 containing PR #11388 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.