Better use of controls in storybook for properties with specific values

[bjarnef]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.3.0

Bug summary

Use specific components in storybook like radiobuttons and dropdown.

For some properties the components have specific valid options/values.
https://uui.umbraco.com/?path=/story/uui-color-picker--inline

E.g. in format and size properties of color picker.

Could we specific the storybook controls to use instead?
https://storybook.js.org/docs/7.0/react/essentials/controls

Specifics

No response

Steps to reproduce

Notice the properties for format and size properties of color picker is just shown as raw text input.
https://uui.umbraco.com/?path=/story/uui-color-picker--inline

Expected result / actual result

No response

[iOvergaard]

Great suggestion. Feel free to add more of them. As you have discovered, we are already customizing a few of them. In earlier versions of Storybook, the regex setup in preview.js didn't work for Web Components, but there is better support nowadays. I found that sometimes it depends on how the jsdocs is set up for properties because that will be written into the custom-elements.json file which we then serve to Storybook. For example the @type keyword in jsdocs has shown to be really tricky with Storybook. This is an obvious area for improvement, so please fix what you see!