USWDS - Breadcrumb: Allow text to wrap on wrap variants #5497
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
This was referenced Sep 12, 2023
amyleadem
commented
Sep 12, 2023
| @@ -87,7 +87,6 @@ $breadcrumb-back-icon-aspect: ( | |||
| .usa-breadcrumb__list-item { | |||
| @include sr-only; | |||
| @include u-display("inline"); | |||
| @include u-white-space("no-wrap"); | |||
There was a problem hiding this comment.
This appears to be unnecessary for the standard variant because no-wrap is already declared on the .usa-breadcrumb__list element in line 71. The line 71 rule is applied only to :not(.usa-breadcrumb--wrap), so no override is necessary.
amyleadem
commented
Sep 12, 2023
| @@ -16,7 +16,7 @@ | |||
| </a> | |||
| </li> | |||
| <li class="usa-breadcrumb__list-item usa-current" aria-current="page"> | |||
| <span>Women-owned small business federal contracting program</span> | |||
| <span>Economically disadvantaged women-owned small business federal contracting program</span> | |||
There was a problem hiding this comment.
Made the text longer to better demonstrate the text wrap
mejiaj
approved these changes
Sep 12, 2023
mahoneycm
approved these changes
Sep 14, 2023
There was a problem hiding this comment.
LGTM!
- Wrap variant properly wraps across different browsers
- No visual regression on standard variant across browsers
Chrome visual quirk
On chrome, I noticed a visual quirk in the standard variant where the ellipses overlaps the breadcrumb chevron. The same behavior exists on develop so I don't think it should be a blocker for this PR. I was unable to reproduce on Firefox or Safari.
Let me know if you'd like me to create a new issue to track this!
thisisdano
approved these changes
Sep 28, 2023
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.
Summary
Fixed a bug that prevented text from wrapping to a new line in the
.usa-breadcrumb--wrapvariant.Breaking change
This is not a breaking change.
Related issue
Closes #5257
Related pull requests
Changelog PR
Preview link
Problem statement
In the breadcrumb component, all list items (regardless of variant) receive a
white-space: nowraprule. This enables the expected behavior in the standard variant, but prevents text from wrapping In the.usa-breadcrumb--wrapvariant.Solution
By removing the blanket
white-space: nowraprule from list items and instead relying only on the "no-wrap" rule applied to.usa-breadcrumb__listin the standard variant, we can re-enable text wrapping in the.usa-breadcrumb--wrapvariant.Testing and review
In a variety of browsers: