Umbraco.UI icon indicating copy to clipboard operation
Umbraco.UI copied to clipboard

Better use of controls in storybook for properties with specific values

Open bjarnef opened this issue 2 years ago • 1 comments

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

bjarnef avatar Jul 18 '23 14:07 bjarnef

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!

iOvergaard avatar Jul 18 '23 14:07 iOvergaard