search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.76k stars 1.8k forks source link

Toggle Switch focus state is truncated when in a container with a hidden overflow #7117

Closed elomt closed 3 years ago

elomt commented 3 years ago

What package(s) are you using?

Detailed description

Describe in detail the issue you're having. When a toggle switch is used inside a container with a hidden or auto overflow set, the box-shadow used to show the focused state is truncated

Is this issue related to a specific component? Toggle Switch What did you expect to happen? What happened instead? What would you like to see changed? To fully show the outline around the control without truncation. Padding around the control is needed to accommodate for the box-shadow/outline

What browser are you working in? Chrome

What version of the Carbon Design System are you using? latest What offering/product do you work on? Any pressing ship or release dates we should be aware of? Cognos Analytics

Steps to reproduce the issue

  1. Go to https://codesandbox.io/s/wispy-smoke-zphrt?file=/index.js
  2. Select the Toggle Switch to show a focused state Observe that the box-shadow around the radio button is cut off below. The right portion will also be truncated if placed at the end of the container

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/wispy-smoke-zphrt?file=/index.jsox

Additional information

image image

dakahn commented 3 years ago

related https://github.com/carbon-design-system/carbon/pull/7133

vpicone commented 3 years ago

I don't think we want to include space around every component to account for focus outline, this would result in a 1px shift misalignment for every toggle, regardless of focus state or not. This is especially true considering the predominant state of the toggle is unfocused.

In the example given, it appears as though there's an inner container (with overflow hidden), and an outer container (with 1rem of padding). My suggestion would be to move the padding to the container with overflow hidden, so that the toggle components outline isn't cut off.

joshblack commented 3 years ago

Going to close this one out based on the above comment from @vpicone. Feel free to comment and we can re-open!