USWDS - Button Group: Improve appearance of buttons with wrapping text #5657
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
- Stretch all button group items above mobile-lg breakpoint. - Allow buttons to take full height. - Add default variant example
mejiaj
added
Type: Enhancement
Context: Sass
mahoneycm
suggested changes
Dec 6, 2023
5 tasks
mahoneycm
approved these changes
Dec 15, 2023
amyleadem
approved these changes
Jan 3, 2024
There was a problem hiding this comment.
This is looking good. The usa-button elements inside the button group appear to be the same height regardless of their content, and the content is vertically centered.
Important
My only note is that I'd like to mark this as a potentially breaking change since the default button group will no longer wrap at "desktop" widths. I think it would be helpful to warn users to check their implementations.
Tests
After pulling in jm-enhancement-button-icons from #5398, I confirmed the following in Chrome, Safari, and Firefox:
- Confirm that all elements in a button group are the same height regardless of content height
- Confirm that text is vertically centered inside the
usa-buttonelements (in both regular and button group)- Mobile view
- Desktop view
- Confirm that icons are vertically centered inside button group elements
- Confirm that
nowrapwill not cause any unexpected breaks - Confirm that this works with both links and buttons
Screenshots
Mobile view
Before (mobile)
After (mobile)
Desktop view
Before (desktop)
After (desktop)
With icons
I also tested this with icons (to confirm compatibility with #5398) and it worked as expected:
thisisdano
approved these changes
Feb 27, 2024
This was referenced Feb 28, 2024
Merged
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.
Important
This work is strictly to match button height in button-group. Changes in #5398 address the text alignment issue noted in #5657 (review).
Summary
Improved the appearance of button groups when button text wraps to multiple lines. Now, every button in the group will be the same height.
Extending work from #5324. Thanks @aduth!
Breaking change
This is not a breaking change.
Flex-wrap was explicitly added on
mobile-lg, but it follows the current behavior of stacking on mobile and grouping abovemobile-lg.Additional information
With this implementation the button does not wrap on desktop sizes.
Before
After
As noted by @amyleadem in #5657 (review).
Related issue
N/A for this issue. Semi-related #5398.
Related pull requests
Extension of #5324.
Changelog PR: uswds/uswds-site#2498.
Preview link
Preview link: Button group text wrap preview →
Problem statement
Summarize the problem this PR solves in a clear and concise statement.
Solution
Above
mobile-lgbreakpoint button groups will:Testing and review