storybookjs / react-native

📓 Storybook for React Native!
https://storybook.js.org
MIT License
995 stars 142 forks source link

Add 'check' option in @storybook/addon-ondevice-controls #541

Open simonadenic opened 5 months ago

simonadenic commented 5 months ago

Is your feature request related to a problem? Please describe. I have a need for a property to choose on/off from multiple options. Example: component has fontWeight property, which can be 'bold' or undefined. I need to have a selection between those two. This could only be properly represented by checking the 'bold' or unchecking it (as a value).

Describe the solution you'd like I would like type:'check' in controls addon, just like on the web

Describe alternatives you've considered I've considered using some of the options available such as 'select', but none of these match my use-case.

Are you able to assist bring the feature to reality? No

Additional context No additional context.

dannyhw commented 5 months ago

@simonadenic we have the boolean type, maybe that can work? However we can definitely add the check control type

simonadenic commented 5 months ago

I tried the boolean type, but it doesn't correspond to my needs (since fontWeight true or false would need to be mapped to fontWeight='bold' or fontWeight=undefined in the component render). The type of my property is fontWeight?: 'bold'. Its defined like this to support future fontWeights planned (fontWeight?: 'bold' | 'bolder' | 'boldest' or something similar).

Anyhow, it seems that every optional property in the component would require the check type, rather than select, radio or any other :)

dannyhw commented 5 months ago

what you can do is map the type to the appropriate value by having a render function, though I understand that it would be better to add the control type. I will do that soon after v7 probably

dannyhw commented 4 months ago

So I've implemented something for this but I don't really know if it does what you want, it returns an array of the selected options, how would that work for your case?

dannyhw commented 4 months ago

please check https://github.com/storybookjs/react-native/pull/553 if you want to see the implementation, it's basically a copy of the web component