feat(breadcrumb): sm size

[ariellalgilmore]

Closes #18356

worked with @Gururajj77 !

Add new prop size to breadcrumb

Changelog

New

• sm breadcrumb option
• new styles for sm breadcrumb
• web component need to pass down size prop to breadcrumb-item otherwise wouldn't be able to change breadcrumb-overflow-menu size
• new tests for react

Changed

• tooltip styles
  • added a text wrap because if you added a definition tooltip inside breadcrumb then it wouldn't wrap and just get cut off

Testing / Reviewing

Go to breadcrumb stories for both react and wc. Change the control size to sm and compare to specs

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	acce2eb
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67bf8c0aa4a14700082bffd1
😎 Deploy Preview	https://deploy-preview-18665--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	acce2eb
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67bf8c0a31592d0008a8ba31
😎 Deploy Preview	https://deploy-preview-18665--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	acce2eb
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67bf8c0ac0ff940008f35e8c
😎 Deploy Preview	https://deploy-preview-18665--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.34%. Comparing base (1d57a3a) to head (acce2eb).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18665   +/-   ##
=======================================
  Coverage   84.34%   84.34%           
=======================================
  Files         408      408           
  Lines       14645    14645           
  Branches     4791     4791           
=======================================
  Hits        12352    12352           
  Misses       2131     2131           
  Partials      162      162           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sunny-babbar]

@ariellalgilmore

Thank you to work on this and it is looking really great!

Here are some things I noticed:

Deploy preview for web-components:

1. Overflow - open state:

• Currently if you open the overflow the drop down is missing a caret and does not look like the drop down component
• The hover state is missing the tooltip of "Options"

Example:

Deploy preview for React:

1. Overflow icon color

• Currently the icon color is $text-primary and should be at #link-primary

Example:

2. Hover tooltip placement

• Currently the hover tooltip placement is top aligned to the overflow icon, it should be bottom aligned under the overflow icon

Example:

FYI @laurenmrice

[ariellalgilmore]

@sunny-babbar thanks for the review! just pushed some fixes! React should be updated at the next deploy preview. For web components the caret/hover issue should be fixed as part of the parity work here: #18414.

[sunny-babbar]

@ariellalgilmore Great thank you for the update on bug fixes!

[tay1orjones]

Super cool that you were able to include react & wc updates here in one PR 🔥

[tay1orjones]

This and the other size-related styling is fine as-is but just as a heads up we'll eventually want this component to take advantage of the contextual layout tokens, #13923

[tay1orjones]

Could we add a react VRT test for the small breadcrumb? We should be able to pass controls/args to the snapshot helper function(s) to set size to sm

[laurenmrice]

Hey @ariellalgilmore this is looking really good, I also saw a small bug here:

Breadcrumb With Overflow Menu story

• The focus border around the “…” should have a 1px stroke and not 2px stroke.
• The focus box should be the same height as when the focus is on a text breadcrumb.

[laurenmrice]

Spoke with Ari, and we will make a separate issue for the overflow bugs because it is unrelated to the small breadcrumb changes. Looks good to me!