Carbon: [Carbon 10: Radio button] styling issues

Created on 10 Apr 2019  ·  5Comments  ·  Source: carbon-design-system/carbon

Detailed description

Describe in detail the issue you're having.

I don't believe the following are intended

  1. there isn't a hover state when the user mouses over the label or input
  2. vertical radio buttons are center aligned

Is this issue related to a specific component?

Radio button

What did you expect to happen? What happened instead? What would you like to see changed?

  1. there should be a hover state to inform the user they are hovering over the input (or label)
  2. the radio button inputs are aligned with each other when using the vertical modifier

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v10.0.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Watson Health Pattern & Asset Library (PAL)

Additional information

Vertical alignment
Screen Shot 2019-04-10 at 4 04 06 PM

Use case when a label wraps to multiple lines (both horizontal and vertical layouts)
Screen Shot 2019-04-10 at 4 21 01 PM

good first issue 👋 low react 3 a11y ♿ bug 🐛

Most helpful comment

  • Radio buttons intentionally do NOT have a hover.
  • Vertically stacked radio button should be left aligned.

All 5 comments

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

@aagonzales can you speak to radio buttons with vertical layouts?

  • Radio buttons intentionally do NOT have a hover.
  • Vertically stacked radio button should be left aligned.

A workaround seems to be align-items: flex-start to .bx--radio-buttton-group.

Hi there! :wave: If you're wondering why this issue was moved, we're currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: [email protected]. Thanks!

Was this page helpful?
0 / 5 - 0 ratings