Radio button usage updates

[kingtraceyj]

Closes #2096

Updating usage docs to the new templates

Changelog

New sections added

• Added Content
• Added Behaviors
• Added Related
• Added References

Updated sections

• Updated all images
• Updated Overview page—added when to use and when not to use
• Updated Formatting page—added anatomy, alignment, and placement sections

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-design-system/carbondesignsystem/GgLxN6n747C8NcxKfzukEzxC2ut9
✅ Preview: https://carbondesignsy-git-fork-kingtraceyj-radio-button-usage-u-a71985.vercel.app

[tw15egan]

LGTM 👍 ✅

[tay1orjones]

Looks good to me! 🚀

[janchild]

@kingtraceyj for the description can we change the end of the sentence to read "only one selection from the group can be made." Sorry I didn't pick that up earlier. Reviewing the rest now.

[janchild]

@kingtraceyj This looks fantastic. I love the Related section. I just had a couple of very minor content tweaks. Otherwise it's fab!

[janchild]

🥂

[jeanservaas]

Great job Tracey, just a couple of things!

In this image in particular, I noticed that you have two scales represented, e.g. the header bar is even smaller than that input field at the bottom of the image. So I would try to align the scale of the page content with the header so it looks more realistic as an in-context usage image.

You could either show the whole UI like Lauren does with checkbox and just scale the xlg design down to fit (I have a percentage for the 8 column images in that production file)

or just make sure you're show part of a real UI, so if any scaling is done, it's done together

Here's an example from button usage:

I'd also give these examples a little more room...

I'd match the size of the canvas to this one so it can breathe a little more

Otherwise looks great!

[jeanservaas]

Looks great!

@kingtraceyj This is the tiniest little change:

Right now the input field looks like it's the same height as the header bar... which would make the input field 48px when it would actually be 40px. To get the relationship right, I'd just grab both an input field and a header bar from the kit and scale them down proportionally just to get that relationship right.

I'm going to approve because I'll be out next week, but just that little update and it'll be perfect!!!

[jeanservaas]

Looks great!

@kingtraceyj This is the tiniest little change:

Right now the input field looks like it's the same height as the header bar... which would make the input field 48px when it would actually be 40px. To get the relationship right, I'd just grab both an input field and a header bar from the kit and scale them down proportionally just to get that relationship right.

I'm going to approve because I'll be out next week, but just that little update and it'll be perfect!!!

[jeanservaas]

Looks great!

@kingtraceyj This is the tiniest little change:

Right now the input field looks like it's the same height as the header bar... which would make the input field 48px when it would actually be 40px. To get the relationship right, I'd just grab both an input field and a header bar from the kit and scale them down proportionally just to get that relationship right.

I'm going to approve because I'll be out next week, but just that little update and it'll be perfect!!!

[jeanservaas]

i had one little tweak and you made it! Great work!