Design System: Radio Buttons

[zakhap]

Description

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

Checked: Yes, No
States: Default, Hover, Disabled

Colors:

• If Checked = No and State = Default , color is Neutrals/400
• If Checked = No and State = Hover , color is Primary Blue/600
• If Checked = Yes and State = Default , color is Primary Blue/500
• If Checked = Yes and State = Hover , color is Primary Blue/600
• If State = Disabled, the color of the component will be Neutrals/200 and the background Neutrals/100

Resources:

• Video walkthrough
• Figma designs

Acceptance Criteria

• Component needs to be audited in Storybook with Story options for viewing each state.

[martins87]

Cc @jnaviask @CowMuon @zakhap

This is a simple component but it is not on Mui Base at the moment (WIP on Unstyled components progress mui/base-ui#10)

Current Mui Base unstyled components:

Regarding this component (and more until #27170 is finished and ready to be used), what approach should we take?

Use Material UI and customize the components (heavier)? Build and customize simple HTML + CSS components from scratch (lighter) ?

[CowMuon]

What's the actual ticket status here? Comment history shows a question and then no updates for a solid 2 weeks @martins87 @zakhap

[martins87]

What's the actual ticket status here? Comment history shows a question and then no updates for a solid 2 weeks @martins87 @zakhap

TLDR: PR mui/material-ui#4141 ready to be reviewed.

Regarding the ticket conversation, the doubt was solved in a call between me and Zak. He said to use all mui base components we can, until Unstyled components progress mui/base-ui#10 is done and we can implement all components from scratch from mui base.

[martins87]

This RadioButton won't use mui base for now but instead simple html + css + phosphor icons.