Ensure primary button in button group has its border appear #2583
Conversation
This file contains hidden or 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
default button it's next to this leads to a more consistent-looking button group also color-matches the left border of the button to the primary button's right to the primary button's border color, so that when transitioning on hover the transition happens from the primary border color to the default hover border color, rather than from the default border color.
|
Would be a good one to add to Storybook. |
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.
Changes
Adds a couple CSS rules that make a primary button in a button group show up above a secondary button next to it, which allows the primary button's border to show on its right side instead of the secondary button's border.
Also color-matches the left border of the button to the primary button's right to the primary button's border color, so that when transitioning on hover the transition happens from the primary border color to the default hover border color, rather than from the default border color.1
Screenshots
Footnotes
This isn't quite perfect: because this just sets the border color, there's a 45 degree angle on the top and bottom of the left border that's visible for however long the animation takes, but this is ~half a pixel and only visible for a moment. ↩