跳到主要内容

Select 左置对勾选项变体，MultiSelect prop 重命名（WEB-1310）

版本： 0.9.0 · 类型： ✨ 新功能（⚠️ 含破坏性重命名）

WEB-1310

问题​

单选 Select 的组合式 SelectContent/SelectItem（也被声明式非 searchable options 分支复用）选中态对勾一直固定显示在右侧，无法配置到左侧。Ghost trigger 菜单项 Figma 变体默认演示的正是左置对勾，searchable 单选与 MultiSelect 也早已通过 SearchableOptionItem 的 variant 支持左置——唯独组合式 / 声明式非 searchable 这条路径缺失该能力，导致 Ghost trigger 的 Select 无法搭配左置对勾菜单使用。

另外，MultiSelect 已有的同类 prop 叫 menuItemVariant——但下拉里的一行数据模型是 SelectOptionItem，不是"菜单项"，这个名字本身取错了。本次一并改名为 optionItemVariant，让 Select 与 MultiSelect 共用同一套命名。

改动文件​

  • packages/design/src/components/Select/Select.tsx
  • packages/design/src/components/Select/MultiSelect.tsx
  • packages/design/src/components/Select/styles.ts
  • packages/design/src/components/Select/__tests__/Select.test.tsx
  • packages/design/src/components/Select/__tests__/MultiSelect.test.tsx
  • packages/design/src/components/Select/SelectDesignSpec.md
  • packages/design/src/components/Select/SelectTriggerGhostDesignSpec.md
  • packages/design-site/docs/components/select.mdx
  • packages/design-site/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/select.mdx

改动内容​

  1. 破坏性变更：MultiSelect.menuItemVariant 重命名为 optionItemVariant（含义、可选值、默认值 'checkmark' 均不变）。已确认本仓库（apps/、web3/）内没有消费方引用旧名字。
  2. styles.ts：把原先写死右侧对勾的 SELECT_ITEM_TOKEN_CLASS / SELECT_ITEM_INDICATOR_TOKEN_CLASS 拆成按新增 SelectOptionItemVariant（'checkmark' | 'checkmark-right'）分派的 getSelectItemTokenClass(variant) / getSelectItemIndicatorTokenClass(variant)：checkmark-right（默认）保留原 right-(--Spacing_16) 定位 + pr-[calc(var(--Spacing_16)+28px)] 预留右侧空间；新增的 checkmark 改用 left-(--Spacing_16) + pl-[calc(var(--Spacing_16)+28px)] 预留左侧空间。
  3. Select.tsx：optionItemVariant 不放在 SelectItem 自身上，而是加在 SelectContent 上（默认 'checkmark-right'，零回归），通过内部 context（SelectOptionItemVariantContext）下发给面板内渲染的每个 SelectItem——同一下拉面板内所有选项必须共享同一个对勾位置（Figma 没有同一菜单内左右混搭的变体），若做成每个 SelectItem 各自设置的 prop，调用方漏设一项就会静默产生左右不一致的菜单。
  4. SelectProps 新增同名 optionItemVariant prop（默认 'checkmark-right'），透传到声明式非 searchable 分支渲染的 SelectContent。
  5. 测试：Select.test.tsx 新增 3 条单测（默认右置对勾断言、SelectContent optionItemVariant="checkmark" 对面板内多个 item 同时生效的断言、声明式 optionItemVariant="checkmark" 透传断言）；MultiSelect.test.tsx 既有用例同步改为新 prop 名。
  6. 文档站补充左置对勾 demo（中英双语）；同步更新 SelectDesignSpec.md / SelectTriggerGhostDesignSpec.md，记录破坏性重命名、Context 设计取舍，并勾选此前遗留的 Ghost trigger 菜单项待办项。

影响面​

  • 破坏性变更：MultiSelect.menuItemVariant → optionItemVariant。本仓库内无消费方；若已发布版本的外部消费方引用了旧名字，需同步改名。
  • Select 新增的 optionItemVariant 纯新增，checkmark-right 仍为默认值且输出不变，所有既有 Select 用法视觉与行为零回归。
  • 仅影响组合式 SelectContent/SelectItem 与声明式非 searchable 分支——searchable 单选不受影响（已通过 SearchableOptionItem 支持左/右置对勾）。