USWDS - Button Group: Improve appearance of segmented button text wrapping #5324
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
This was referenced Jun 7, 2023
mahoneycm
suggested changes
Jul 26, 2023
5 tasks
|
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!) |
|
Thanks for submitting this! Closing in favor of #5657, which is an extension of this work. |
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
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.