USWDS - Breadcrumb: Allow text to wrap on wrap variants

[amyleadem]

Summary

Fixed a bug that prevented text from wrapping to a new line in the .usa-breadcrumb--wrap variant.

Breaking change

This is not a breaking change.

Related issue

Closes #5257

Related pull requests

Changelog PR

Preview link

• Breadcrumb component
• Breadcrumb component - Wrap variant

Problem statement

In the breadcrumb component, all list items (regardless of variant) receive a white-space: nowrap rule. This enables the expected behavior in the standard variant, but prevents text from wrapping In the .usa-breadcrumb--wrap variant.

Solution

By removing the blanket white-space: nowrap rule from list items and instead relying only on the "no-wrap" rule applied to .usa-breadcrumb__list in the standard variant, we can re-enable text wrapping in the .usa-breadcrumb--wrap variant.

Testing and review

In a variety of browsers:

• Confirm that the breadcrumb text wraps as expected:
  1. Open the breadcrumb wrap variant
  2. Resize the window to ~550px wide
  3. Confirm that text wraps to a new line in the wrap variant and does not extend beyond the container.
• Confirm that there are no regressions in the standard variant.

[amyleadem]

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]

Made the text longer to better demonstrate the text wrap

[mejiaj]

Looks good. Tested both variants in:

• Safari 16.6
• Firefox 118
• Chromium 116

[mahoneycm]

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!