跳到主要内容

菜单项存在前导 icon 时选中 indicator 移到右侧(WEB-1174)

版本: 0.6.5 · 类型: 🐛 Bug Fix

WEB-1174

问题

按 Figma 规范(Select Menu/Select Menu Item),菜单项存在前导 iconShow Icon=True)时,选中 indicator 必须移到右侧,让 icon 占据左侧位置:[icon][text][indicator]

checkbox 变体已经实现了这个位移,但内部的 checkmark(左置)变体在有 icon 时仍把 checkmark 留在左侧,与 Figma 不一致。文档站也缺少一个能体现该规则的 case。

Figma 规则

StyleShow Icon布局Indicator
CheckmarkFalse[Check][Content]
CheckmarkTrue[icon][Content][Check]
CheckboxFalse[Checkbox][Content]
CheckboxTrue[icon][Content][Checkbox]
Checkmark Right任意[Content][Check]

改动文件

  • packages/design/src/components/Select/SearchableOptionItem.tsx
  • packages/design/src/components/Select/styles.ts
  • packages/design/src/components/Select/__tests__/MultiSelect.test.tsx
  • packages/design/src/components/Select/__tests__/SearchableOptionItem.test.tsx
  • packages/design-site/docs/components/select.mdx

改动内容

  1. SearchableOptionItem 中「有 icon → indicator 在右」的逻辑从只覆盖 checkbox 泛化到 checkmark 变体(此前仅 checkbox 生效)。
  2. 确认右侧 indicator 支持两种形态 —— checkmark(checkmark-right)和 checkbox(checkbox),均可通过 MultiSelect.menuItemVariant 搭配前导 icon 触达。
  3. 文档站新增 "Indicator Position with Icons" case,同时展示右侧两种形态(带 icon 的 checkmark + checkbox),并保留左侧 checkbox 作对比。