Storybook: Add radiocontrol component

[mkaz]

Description

Adds RadioControl component to Storybook
Related: #17973

How has this been tested?

Run npm run storybook:dev

Types of changes

Storybook addition.

[gziolo]

We no longer can preview Storybook changes from the integration with PR.

Code wise it looks great. As a follow-up we could add a few integrations with knobs.

[mkaz]

I debated including knobs for this one, but there wasn't really any options besides changes the text and number of options being shown. I wasn't sure how useful for understanding the component is by adding different text and/or more or less options.

@ItsJonQ or @gziolo I'd welcome your feedback on what level of knobs do you see useful in this case? Any guidance on this or similar for future components or extending this one further

The with or without help seems to be the only option, and there is another variant story for that.

[ItsJonQ]

@mkaz Thank you for adding this Story!

The only label I can think of would be a text knob for label.

I wish we could set up a knob that syncs better with component state. For example, if you have a knob to control the selected prop. You can change the state of the RadioControl through it 👍 . But, when the user changes it on their own (clicking), you can't update the state of the knob, so it'll go out of sync.

[gziolo]

I wish we could set up a knob that syncs better with component state. For example, if you have a knob to control the selected prop. You can change the state of the RadioControl through it 👍 . But, when the user changes it on their own (clicking), you can't update the state of the knob, so it'll go out of sync.

Yes, this is a known limitation of using useState hook which seems to take precedence with how knobs are implemented. @brentswisher tested it extensively.

@ItsJonQ or @gziolo I'd welcome your feedback on what level of knobs do you see useful in this case? Any guidance on this or similar for future components or extending this one further

I didn't mark it as a blocker because I still don't have a good sense of what we should be integrated with knobs. It feels like it should cover as much as possible, but it produces duplication when you want tot to include several examples. Thinking about it a bit more, how about we spend less time on it until we have all UI components exposed in Storybook and then revisit it by doing one pass? I have a hunch that we might also take a unified approach and do the following:

• the default examples would provide knobs integration for all props offered with the default values provided (even if that would mean: undefined, null, false, []) - in effect the example presented would be equal to having <Example />. In some cases you would also have to configure the mandatory fields which would be also integrated with knobs
• all other examples would be static and serve as a way to present how they can be used with no way to change them with knobs, this would make it easier to code them and developers/designers would quickly learn which story is for experiments
  What do you think?

[mkaz]

@gziolo Thanks, I was checking in to see if I was missing something, but sounds like we're about in the same space of figuring out how knobs should operate. I like the approach to doing a pass after to get a consistent implementation, it's a good idea.