跳到主要内容

Select ghost 触发器变体 (WEB-1277)

版本： 0.9.0 · 类型： ✨ 新功能

WEB-1277

问题​

Select 此前只有一种触发器形态——表单型（outline）：有边框、w-full 占满容器、值左对齐。行内 / 工具栏 / 弱视觉权重的选择场景（如内联的「按周 / 按月」切换器）需要一种无边框、内容自适应、值右对齐的紧凑触发器，现状无法表达。

改动文件​

  • packages/design/src/components/Select/styles.ts
  • packages/design/src/components/Select/Select.tsx
  • packages/design/src/components/ui/select.tsx
  • packages/design/src/components/Select/__tests__/Select.test.tsx
  • packages/design-site/src/icons/plaud-icon-registry.tsx（SortIcon 中性态改 currentColor）
  • packages/design-site/docs/components/select.mdx（新增普通块级流示例）
  • packages/design-site/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/select.mdx

改动内容​

  • Select / SelectTrigger 新增 variant prop（'outline' | 'ghost'），默认 'outline'，现有用法零回归。
  • variant="ghost" 渲染无边框、内容自适应、值右对齐的触发器，带尾部 sort（上下）双向箭头，hover / open 时显示 Grays/Gray-1 灰底；文字色为 Labels/Tertiary，disabled 态降为 Labels/Disabled。
  • ui/select.tsx 的 SelectTrigger 新增可选 icon prop，用于覆盖默认的 ChevronDownIcon（内部能力透传）；不传 icon 时行为与改动前一致。
  • SortIcon 中性态（sortDirection === null）由写死的 Labels/Tertiary 改为 currentColor 渲染，使图标跟随父级文字色——从而让 ghost disabled 态的箭头正确变灰。asc / desc 激活态高亮逻辑不变。
  • 修复宽度 bug：ghost base class 此前只覆盖了宽度（w-full → w-auto），未覆盖 display。底层 ui/select.tsx primitive 是块级 flex 容器，仅 width: auto 在脱离 flex/grid 父容器时仍会撑满父宽度，导致 hover/focus 灰底横跨整行。在 w-auto 旁追加 inline-flex，使触发器在任意布局上下文中都能真正按内容宽度收缩。

影响​

  • 纯新增 API；variant 默认 'outline'，所有现有 Select 用法视觉与行为均不变。
  • 下拉面板与菜单项完全复用现有 SelectContent——ghost 只改触发器。
  • SortIcon 中性态改动已对全部中性态消费点（Table / TimePicker / Calendar / routine 选择器）逐一核实：生效色均为 Labels/Tertiary 或与之同 hex 的 Labels/Placeholder，无视觉回归。