Addon-controls: Add custom user-defined controls

We are currently documenting our React components in Storybook, and decided to go straight to version 6.0 to make use of the new Args and Controls addons. During that work, we realised that the choice of controls is very limited.

Here are some examples:

• We want users to select from a pre-defined list of colors. The "select" control can only display text but we want to preview the color next to it.
• We want users to select from a list of icons. The control should display a list of all icons and clicking on an icon selects it.
• One prop may allow for string[], so we want to allow the user to add strings to the list, or remove existing strings.

Any chance to allow users to specify custom controls in argTypes that are not built into addon-controls?

Here’s how this could look like in React code, where ColorPicker is a custom control we’d build:

const ColorPicker = ({ value, setValue }) => {
  return (
    <select value={value} onChange={setValue}>
      <option>red</option>
      <option>blue</option>
    </select>
  );
}

export default {
  title: "ExampleComponent",
  component: ExampleComponent,
  argTypes: {
    color: {
      control: ColorPicker,
    },
  },
};

[nathanielks]

One generic thing that would be good is nested controls.

I would also be interested in adding controls for args with nested properties.

[WebTerminator]

is there any update on this? Thank you