跳到主要内容

Breadcrumb title 超长截断（DES-93）

Pre-release · 类型： ✨ 新功能

DES-93（sub issue of DES-92 Breadcrumb）

问题​

Breadcrumb 的 item.title 直接平铺在 flex 容器里，没有宽度限制，超长标题会把面包屑无限撑宽。Figma Breadcrumbs Base 的 Label 文本节点规格为 maxWidth: 260 + textTruncation: ENDING（超过 260px 末尾省略号截断），组件未实现。

改动文件​

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

改动内容​

  • 新增 BREADCRUMB_TITLE_CLASS（max-w-[260px] truncate）；items API 渲染时 title 包一层截断 span（flex 容器自身无法产生 ellipsis，截断必须落在文本节点上），string 类型 title 同步设置原生 title 属性供 hover 查看全文
  • 单测补充截断断言（截断 class、原生 tooltip、非 string title 不设 tooltip），并修正因 title 多一层 span 而失效的 getByText 断言
  • 新增视觉测试 Breadcrumb.visual.spec.tsx：count-2 / count-4 / collapsed（4+ 折叠）/ long-title（截断 + scrollWidth 溢出断言）/ long-title-hover 共 5 个 case
  • visual-diff-config.ts 增加 Breadcrumb 映射（count-2 → Text 变体 21179:795 + 21179:792）；count-4 / collapsed / long-title 无独立 Figma 节点
  • eslint.config.js ignores 补 playwright/.cache（本地跑过视觉测试后 Playwright CT 缓存产物会打挂 lint）
  • code review 修复：截断 span 增加语义 class plaud-breadcrumb-title（测试选择器改用它，不再依赖 .truncate utility class）；design-site breadcrumb.mdx（en + zh-CN）补充「超长 title 截断」说明与示例
  • code review 优化：styles.ts 导出 BREADCRUMB_TITLE_MAX_WIDTH = 260 常量供测试断言（Tailwind class 仍需字面量，注释标明两处同步）；clipShot 从 Button / Breadcrumb visual spec 提取到共享 playwright/visual-utils.ts

根因​

组合模式（children 直传）不受影响，使用方自行控制；仅 items API 默认渲染路径接管截断。