Updates to ChoiceBox; Checkbox, Radio components - Githubissues

mitodl / mit-open

BSD 3-Clause "New" or "Revised" License

0 stars 2 forks source link

Updates to ChoiceBox; Checkbox, Radio components #1174

Closed jonkafton closed 3 months ago

jonkafton commented 3 months ago

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/4661

Description (What does it do?)

Updates the styles and hover states for the ChoiceBox and its field grid.

Also:

Provides a Checkbox and Radio in ol-components
Exports styles for reuse (applies to the SearchDisplay course-search-utils overrides).
Adds Storybook stories for ChoiceBox.
Removes the hidden input control in ChoiceBox (accessibility concern) to style directly.
Upgrades Storybook.

Screenshots (if appropriate):

How can this be tested?

While authenticated, navigate to /onboarding and step through the onboarding screens.
See also the ChoiceBox, ChoiceBoxField and Checkbox stories in Storybook
- /?path=/story/ol-components-choicebox--checkbox
- /?path=/story/ol-components-choiceboxfield--checkbox
- /?path=/story/ol-components-checkbox--simple

ChristopherChudzicki commented 3 months ago

Adding this as a requested change... I do think we should do something about this alignment issue:

Screenshot 2024-06-27 at 12 18 19 PM

I manually edited a title, there, but note alignment on Figma dashboard page.

jonkafton commented 3 months ago

These changes also pushed:

Style the title (fieldset legend) to match designs
Remove the label+input center alignment and restyle so the input control remains anchored top for multiline labels