Skip to main content

Breadcrumb title truncation (DES-93)

Pre-release · Type: ✨ Feature

DES-93 (sub issue of DES-92 Breadcrumb)

Problem​

The Breadcrumb item.title was laid out directly inside the flex container with no width constraint, so an overly long title would stretch the breadcrumb indefinitely. The Label text node of Figma's Breadcrumbs Base is spec'd as maxWidth: 260 + textTruncation: ENDING (truncate with a trailing ellipsis beyond 260px), which the component did not implement.

Changed Files​

  • src/components/Breadcrumb/styles.ts
  • src/components/Breadcrumb/Breadcrumb.tsx
  • src/components/Breadcrumb/Breadcrumb.test.tsx
  • src/components/Breadcrumb/Breadcrumb.visual.spec.tsx (new)
  • scripts/visual-diff-config.ts
  • eslint.config.js
  • packages/design-site/docs/components/atomic/breadcrumb.mdx (en + zh-CN)

Changes​

  • Added BREADCRUMB_TITLE_CLASS (max-w-[260px] truncate); when rendering via the items API, the title is wrapped in a truncation span (a flex container cannot itself produce an ellipsis—truncation must land on the text node). For string-typed titles, the native title attribute is also set so the full text can be viewed on hover.
  • Added truncation assertions to the unit tests (truncation class, native tooltip, no tooltip for non-string titles), and fixed the getByText assertion that broke because the title now has an extra span layer.
  • Added the visual test Breadcrumb.visual.spec.tsx with 5 cases: count-2 / count-4 / collapsed (4+ collapsed) / long-title (truncation + scrollWidth overflow assertion) / long-title-hover.
  • Added a Breadcrumb mapping to visual-diff-config.ts (count-2 → Text variants 21179:795 + 21179:792); count-4 / collapsed / long-title have no standalone Figma node.
  • Added playwright/.cache to eslint.config.js ignores (after running visual tests locally, the Playwright CT cache artifacts would break lint).
  • Code review fix: added the semantic class plaud-breadcrumb-title to the truncation span (test selectors now use it instead of relying on the .truncate utility class); supplemented the design-site breadcrumb.mdx (en + zh-CN) with an explanation and example of long-title truncation.
  • Code review improvement: styles.ts exports the BREADCRUMB_TITLE_MAX_WIDTH = 260 constant for test assertions (the Tailwind class still needs a literal value; a comment notes the two places must stay in sync); clipShot was extracted from the Button / Breadcrumb visual specs into the shared playwright/visual-utils.ts.

Root Cause​

The composition mode (children passed through directly) is unaffected—callers control it themselves; only the default render path of the items API takes over truncation.