跳到主要内容

Select / MultiSelect 新增图标支持、menuItemVariant 与搜索图标开关(WEB-1075、WEB-1076、WEB-1118)

版本: 0.6.0 · 类型: ✨ 新功能

WEB-1075 · WEB-1076 · WEB-1118

问题

Figma Select 设计系统更新了多选与搜索规范,代码层未跟进:

  1. Chip 缺少 Hover(灰底)和 Selected/Active(深灰底 + 黑边框)视觉状态;Menu Item 缺少 Checkbox、左置 Checkmark 风格变体;MultiSelect 无法切换下拉项的选中视觉风格
  2. 可搜索 trigger 的前导搜索图标无法关闭
  3. checkbox 变体是纯视觉 span 实现,未复用 Checkbox 组件

改动文件

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

改动内容

  1. Chip 状态MULTI_SELECT_CHIP_CLASS 新增 hover(灰底 Grays-Gray-1 + 边框 Separators-Emphasized)与 selected/active/focus-visible(深灰底 Grays-Gray-2 + 黑边框 Labels-Primary)状态样式
  2. SearchableOptionItem 新增 variant prop'checkmark-right' | 'checkmark' | 'checkbox',默认 'checkmark-right',向后兼容;checkbox 变体由 selected / disabled 直接驱动
  3. 新增 icon prop — 可选前导图标(对应 Figma Show Icon)
  4. MultiSelect 新增 menuItemVariant prop'checkmark-right'(默认)| 'checkbox',透传至 SearchableOptionItem
  5. 新增导出 SelectItemVariant 类型
  6. Select 新增 showSearchIcon prop(默认 true),控制可搜索 trigger 是否展示前导搜索图标
  7. SearchableOptionItemcheckbox 变体改为渲染共享 Checkbox 组件,不再手写视觉 span
  8. Input 边框新增 hover 态hover:border-(--Labels-Primary)
  9. 下拉项默认文字色确认为 text-(--Labels-Primary),同步更新设计规范文档、样式注释与单测断言
  10. 文档站 select.mdx(中英文)新增 Menu Item Variants 展示示例与 menuItemVariant Props 说明

Token 对齐

状态属性Token
Chip HoverBackgroundGrays-Gray-1 (#EBEBEB)
Chip HoverBorderSeparators-Emphasized (#CCCCCC)
Chip SelectedBackgroundGrays-Gray-2 (#D6D6D6)
Chip SelectedBorderLabels-Primary (#000000)
Checkbox UnselectedBorderSeparators-Default
Checkbox SelectedFillLabels-Primary (#000000)
Checkbox Disabled UnselectedBorder + BGSeparators-Emphasized + Grays-Gray-1
Checkbox Disabled SelectedFillGrays-Gray-2 (#D6D6D6)