spectrum-css

spectrum-css copied to clipboard

Description

The new focus ring for buttons renders underneath its neighbor button.

Steps to reproduce

This feature is in v2.18.0, but I don't see it on opensource docs site. Maybe a browser caching issue.

1. Goto http://localhost:3000/docs/logicbutton.html
2. Tab to the first logic button

Expected behavior

New focus-ring style to not render under button next to it. Assuming there should be a margin. I tried 8px and it looked okay.

Screenshots

Environment

• Spectrum CSS version: master (2.18.0) Chrome OSX

Sample code

This is what I did to adjust it.

.spectrum-LogicButton + .spectrum-LogicButton {
  margin-left: 8px;
}

synced to jira: https://jira.corp.adobe.com/browse/CSS-218

Definitely won't have a margin, that's #620

They either need a group, or we need to do some tricks to make the ring appear on top of the other buttons.

probably could just add the margin in the docs. I don't see why two logic buttons would be so close together in the real world.

@Deanna-w1 will look into this to see if it's still needed.