USWDS - Button Group: Improve appearance of segmented button text wrapping#5324
Closed
aduth wants to merge 3 commits intouswds:developfrom
Closed
USWDS - Button Group: Improve appearance of segmented button text wrapping#5324aduth wants to merge 3 commits intouswds:developfrom
aduth wants to merge 3 commits intouswds:developfrom
Conversation
This was referenced Jun 7, 2023
mahoneycm
suggested changes
Jul 26, 2023
Contributor
mahoneycm
left a comment
There was a problem hiding this comment.
I'm getting inconsistent results with multiple line break buttons above mobile-lg (480px).
It does look great on smaller sizes or where the text doesn't break
5 tasks
Contributor
Author
|
Hey @mahoneycm , apologies for the delayed response. Just wanted to drop a note that I've seen your feedback, but have been rather busy to take a look. I'll plan to try to find a fix for large viewport styling when time permits. (Or I'm also totally okay with pushes directly to my branch!) |
Contributor
|
Thanks for submitting this! Closing in favor of #5657, which is an extension of this work. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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
Improve appearance of segmented button text wrapping. When segmented button group text wraps, the height of all buttons will now update to match.
Preview link
Local storybook link: http://localhost:6006/?path=/story/components-button-group--test-text-wrapping
Problem statement
Currently, if a segmented Button Group includes buttons with text long enough to wrap, only the button with the longer text will wrap, which prevents the segmented group from appearing as a single grouped collection. This is particularly noticeable at small viewport sizes.
Example: 18F/identity-idp#8542
Solution
Add flex and grid styling to force buttons to grow together and align text as vertically centered.
This is not intended to have any other visual impact on the current appearance of segmented buttons beyond text wrapping.