fix: Right border of removable tag #650
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jonnybel
changed the title
|
I've added a fix to the focus styles for the [x] button to improve its a11y. |
montezume
approved these changes
Apr 5, 2019
| @@ -247,7 +266,8 @@ const Tag = props => ( | |||
| background: inherit; | |||
| border-style: solid; | |||
| border-width: 1px 1px 1px 1px; | |||
| &:hover { | |||
| &:hover, | |||
jonnybel
commented
Apr 5, 2019
| @@ -283,10 +284,6 @@ const Tag = props => ( | |||
| `, | |||
| props.isDisabled && | |||
| css` | |||
| &:hover { | |||
There was a problem hiding this comment.
This isn't needed because when a button is disabled in the HTML, the hover and focus states are not triggered.
tdeekens
approved these changes
Apr 5, 2019
emmenko
approved these changes
Apr 5, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #638
(GIF compression messing those colours 🧐)
Description
Using a regular
borderdoesn't fit the design because the border takes space and would add a little edge or a flicker between the tag and the removal button.The easiest alternative would be using
box-shadowto emulate the border, just on the right side, but when the tag has an onClick prop, it has a box-shadow of its own when hovered, so this new box-shadow border would have to be merged with the current box-shadow and added to the design tokens.I didn't like where this was going so I tried another approach:
So I used an absolutely positioned
:afterpseudo-element, and it does the job.