Select / MultiSelect 新增图标支持、menuItemVariant 与搜索图标开关(WEB-1075、WEB-1076、WEB-1118)
版本: 0.6.0 · 类型: ✨ 新功能
问题
Figma Select 设计系统更新了多选与搜索规范,代码层未跟进:
- Chip 缺少 Hover(灰底)和 Selected/Active(深灰底 + 黑边框)视觉状态;Menu Item 缺少
Checkbox、左置Checkmark风格变体;MultiSelect无法切换下拉项的选中视觉风格 - 可搜索 trigger 的前导搜索图标无法关闭
checkbox变体是纯视觉 span 实现,未复用Checkbox组件
改动文件
packages/design/src/components/Select/styles.tspackages/design/src/components/Select/SearchableOptionItem.tsxpackages/design/src/components/Select/MultiSelect.tsxpackages/design/src/components/Select/Select.tsxpackages/design/src/components/Select/index.tspackages/design/src/components/Select/SelectDesignSpec.mdpackages/design/src/components/Input/styles.tspackages/design/src/components/Select/__tests__/MultiSelect.test.tsxpackages/design/src/components/Select/__tests__/Select.test.tsxpackages/design-site/docs/components/select.mdx
改动内容
- Chip 状态 —
MULTI_SELECT_CHIP_CLASS新增 hover(灰底Grays-Gray-1+ 边框Separators-Emphasized)与 selected/active/focus-visible(深灰底Grays-Gray-2+ 黑边框Labels-Primary)状态样式 SearchableOptionItem新增variantprop —'checkmark-right' | 'checkmark' | 'checkbox',默认'checkmark-right',向后兼容;checkbox变体由selected/disabled直接驱动- 新增
iconprop — 可选前导图标(对应 Figma Show Icon) MultiSelect新增menuItemVariantprop —'checkmark-right'(默认)|'checkbox',透传至SearchableOptionItem- 新增导出
SelectItemVariant类型 Select新增showSearchIconprop(默认true),控制可搜索 trigger 是否展示前导搜索图标SearchableOptionItem的checkbox变体改为渲染共享Checkbox组件,不再手写视觉 spanInput边框新增 hover 态(hover:border-(--Labels-Primary))- 下拉项默认文字色确认为
text-(--Labels-Primary),同步更新设计规范文档、样式注释与单测断言 - 文档站
select.mdx(中英文)新增 Menu Item Variants 展示示例与menuItemVariantProps 说明
Token 对齐
| 状态 | 属性 | Token |
|---|---|---|
| Chip Hover | Background | Grays-Gray-1 (#EBEBEB) |
| Chip Hover | Border | Separators-Emphasized (#CCCCCC) |
| Chip Selected | Background | Grays-Gray-2 (#D6D6D6) |
| Chip Selected | Border | Labels-Primary (#000000) |
| Checkbox Unselected | Border | Separators-Default |
| Checkbox Selected | Fill | Labels-Primary (#000000) |
| Checkbox Disabled Unselected | Border + BG | Separators-Emphasized + Grays-Gray-1 |
| Checkbox Disabled Selected | Fill | Grays-Gray-2 (#D6D6D6) |