storybook-design-token icon indicating copy to clipboard operation
storybook-design-token copied to clipboard

Allow Control Types Config (ArgTypes)

Open lukethacoder opened this issue 1 year ago • 1 comments

Would be awesome if we could configure the input types, especially for the Colors.

Proposing a similar setup to the standard Storybook ArgTypes

Thinking that config per @presenter type would be ideal, but would be nice to add custom control types on a per-design token basis too.

Presenter Config

const parameters = {
  designToken: {
    controls: {
      // config per `@presenter` type here
      Colors: {
        type: 'color', presetColors: ['#ff0000', '#00ff00', '#0000ff']
      },
      BorderRadius: {
        type: 'radio', options: ['0px', '4px', '8px', '16px'] }
    }
  }
}

Specific Design Hook Override Config

const parameters = {
  designToken: {
    controls: {
      // object of design token specific overrides. Handy for enforcing specific values on specific tokens
      overrides: {
        '--theme-button-background': {
          type: 'select', options: ['#ff0000', '#00ff00', '#0000ff']
        }
      }
    }
  }
}

lukethacoder avatar May 06 '23 02:05 lukethacoder

Hey. Open for a PR if you would like to give it a try. I won't get to it anytime soon, unfortunately.

Sqrrl avatar Jun 16 '23 13:06 Sqrrl