fix(breadcrumb): prevent wrapping to second line

[tay1orjones]

Closes #8779

Prevent breadcrumbs from wrapping to a second line. I do have some reservations on this change request and would like some feedback:

The initial issue points this out, but the breadcrumb guidance on the webstie states

Breadcrumbs should never wrap onto a second line.

@carbon-design-system/design How literally should we interpret this? I think the intent is that when breadcrumbs would be too long and begin wrapping, consumers should instead switch to the "overflow menu mode". I'm not sure if we should force breadcrumbs to stay on a single line like this and use overflow: hidden to ensure they don't resize when they hit the browser edge on smaller screen sizes.

Changelog

Changed

• breadcrumb: prevent items from wrapping to second line

Testing / Reviewing

Breadcrumb items should not wrap at small screen sizes. Try adding double/triple the amount of breadcrumb item li's and see how it clips the ones that are beyond the browser's edge.

hiding.breadcrumbs.mov

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 140731d

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/60b0117f4b67390007a6f1d7

😎 Browse the preview: https://deploy-preview-8789--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!

🔨 Explore the source changes: f9812ba

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/60b00d8af1ef010007a443e6

😎 Browse the preview: https://deploy-preview-8789--carbon-components-react.netlify.app/iframe

[netlify]

✔️ Deploy Preview for carbon-components-react ready!

🔨 Explore the source changes: 140731d

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/60b0117f1d9e6e0008bae85f

😎 Browse the preview: https://deploy-preview-8789--carbon-components-react.netlify.app/iframe

[jnm2377]

Hmm... I have some initial questions.

• should we have guidelines as to how many breadcrumbs deep we recommend users going to (max limit)? We do this with tabs, which of course isn't the same kind of navigation, but bc of the visual style being similar... might be something that might help prevent this sort of issue.
• if we do want to go with this hidden/scrolling behavior on smaller screens, would we want to add some sort of fade for when it overflows like the way we do with code snippet? To indicate that there's more content?
• or...could we add that overflow menu functionality by default? I feel like I prefer this solution since it's already what we recommend.

[emyarod]

bump @thyhmdo for a visual review and clarification on breadcrumb guidance!

[thyhmdo]

@jnm2377 I thought we have a pretty clear guidance here on using overflow menu: "When space becomes limited, use an overflow menu to truncate the breadcrumbs. The first and last two page links should be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line." Unless this doesn't work on mobile screen size.

We don't have a thought of what number could be good for breadcrumbs right now, but similar to tabs (no more than 6) would be ideal. I think if it comes to user research and testing, the product teams need to see if it's viable for their users.

[tw15egan]

I feel that unless we auto-convert the Breadcrumbs to the overflow menu variant on small screen sizes, they should break into multiple lines. Auto converting to the overflow menu variant is a much larger enhancement and is likely out of scope for this sprint.

[tay1orjones]

@tw15egan Yeah, I agree. Adding the auto-convert to overflow on small sizes would be the ideal solution to this.

I'm good with keeping the existing behavior until we can take that on, in the meantime close this PR and use the contents as a guide for how teams can override the wrapping behavior. I'll update the original issue. 👍