search

dequelabs / cauldron

https://cauldron.dequelabs.com/
Mozilla Public License 2.0
87 stars 20 forks source link

Sync RadioGroup radio items with UXPin #1034

Open scurker opened 1 year ago

scurker commented 1 year ago

Pattern Library

RadioGroup radio items in different states, light mode

RadioGroup radio items in different states, dark mode

Light: https://preview.uxpin.com/design-system/c933c74928e2195cc540/6764532,light-form-radio-regular Dark: https://preview.uxpin.com/design-system/c933c74928e2195cc540/6771800,dark-form-radio-regular (note: hard to see, but you can get the styles)

Pattern Library: https://preview.uxpin.com/520e80315786a67ba43a3ca50598e6d69782627c#/pages/161666306/simulate/no-panels?mode=i

The focus ring has changed, the disabled state has a more muted color in dark mode. The icons can be pulled from the above uxpins.

bobbyomari commented 1 year ago

@scurker let's be sure to set each radio group accordingly:

Radios without descriptions

Set each radio item margin-top: 0; and margin-bottom: 8px; (currently they are set to be the opposite for margin-top and margin-bottom). Set last radio group with margin-bottom: 0;.

Radios with descriptions

Set each radio item margin-top: 0; and margin-bottom: 16px;. Set last radio group with margin-bottom: 0;.

yhafez commented 1 year ago

Implemented focus state (without slight glow), active state, disabled state, and font weight on label, as well as other refactors and styles. Pending UI for focus state glow.

scurker commented 11 months ago

This needs to set the active background color for the radio on "active" state of the label and set the input width to 1px to allow the label to set hover correctly.