fix(radio-group): replaced label with content

[bmdalex]

Radio group

This PR contains:

• replacing label prop with content
• making content accept react nodes as value

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

[codecov]

Codecov Report

Merging #287 into master will increase coverage by 0.05%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #287      +/-   ##
==========================================
+ Coverage   89.49%   89.54%   +0.05%     
==========================================
  Files          62       62              
  Lines        1171     1177       +6     
  Branches      152      175      +23     
==========================================
+ Hits         1048     1054       +6     
  Misses        121      121              
  Partials        2        2

Impacted Files	Coverage Δ
src/components/RadioGroup/RadioGroupItem.tsx	100% <100%> (ø)	⬆️
src/components/RadioGroup/RadioGroup.tsx	95.38% <100%> (+0.46%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ccfdbc0...e6837cb. Read the comment docs.

[kuzhelov]

a bit worrying about semantics behind this nesting here. Do we really want the content (that is quite generic by its nature) to be always a children of Label (and, thus, to always reflect its styles and, what is more important, behavioural and accessibility aspects - for any arbitrary value of content that will be passed in)?

[bmdalex]

I'm not changing the implementation as you can see, just the name of the prop (I should have kept the name of the styles slot to label, will revert that part).

I think this is a legitimate concern, but the nature of the radio button dictates to us that we need an icon with some content after it; maybe we should not use Label to wrap these, any suggestions?

@kuzhelov @mnajdova

[kuzhelov]

yes, I would suggest exactly the same path as you've done - specifically, to not wrap Icon with Label (especially if we would take into account where Icon is used - it is used to 'fill' the circle area of radio input). Then it would be much easier to decouple all these parts from each other.

Not sure if we should do it in this PR or create a dedicated one as a close follow-up, but the most important thing would be, actually, if we all agree on that proposal :)

[bmdalex]

I'd rather do it in another PR; I'll discuss with @jurokapsiar as well to understand what are the concerns (if any) and proceed with removing Label

[kuzhelov]

have we agreed to have this input prop for the Input element (like as it is in SUIR)? We've had some concerns - specifically, the fact that it makes it non-intuitive for the client what input prop of Input component is about. Maybe we should leave it for a dedicated PR?

[bmdalex]

then we won't be able to achieve functionality of RadioGroup items that contain inputs.. Marija told we we're expected to merge a dedicated PR as well; I'm ok with removing it from here but the examples with input in this PR won't work correctly

@kuzhelov @mnajdova

[kuzhelov]

generally agree with the changes made, but it seems that there is more changes than necessary to address the goal of this PR. Would rather suggest to do it step-by-step - or to discuss those additional concepts introduced, as those might raise some concerns (have expressed them in comments)