跳到主要内容

Button Icon-Only 交互状态调整（DES-87）

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

2026-06-16 DES-87 Button Icon-Only 交互状态调整（Tertiary / Quaternary）​

问题​

Figma Design System 调整了 Button Icon-Only 的 Tertiary / Quaternary 交互状态背景 token，但前端实现中 tertiary / quaternary 的交互状态对所有尺寸共用一套样式，未区分 Icon-Only，导致 Icon-Only 按钮的 Hover / Clicked 反馈与新版 Figma 不一致：

  • Tertiary Icon-Only Hover 仍用 Gray 系列背景（应为 Tinted 系列）
  • Quaternary Icon-Only Hover / Clicked 仍叠加 Tinted 背景（应移除背景，仅 icon 变色）

改动文件​

  • packages/design/src/components/Button/styles.ts
  • packages/design/src/components/Button/Button.test.tsx
  • packages/design-site/docs/components/atomic/button.mdx

改动内容​

  • 新增 BUTTON_ICON_ONLY_VARIANT_CLASS：仅在 size === 'icon' 时为 tertiary / quaternary 提供专属交互样式，文字按钮（其余尺寸）行为完全不变
    • Tertiary Icon-Only：Hover Grays/Tinted/Default、Clicked Grays/Tinted/Emphasized（替换原 Gray-1 / Gray-2）
    • Quaternary Icon-Only：移除 hover/active 背景，改为 icon 颜色变化——Default Labels/Tertiary → Hover Labels/Primary → Clicked Labels/Secondary
  • getButtonTokenClass 在 size === 'icon' 时优先取 Icon-Only 变体类，未命中回落到通用变体类
  • 补充单测：覆盖 Tertiary / Quaternary Icon-Only 的新状态类，并断言文字尺寸按钮保持原背景
  • design-site Button 文档在 Icon Button 章节补充 Icon-Only 交互状态说明

备注​

（Figma 节点）

  • Tertiary Hover：20935:1573
  • Quaternary Hover：21220:2584
  • Quaternary Clicked：21220:2586

（Linear）

2026-06-16 Button disabled / loading 态恢复 not-allowed 光标​

问题​

BUTTON_DISABLED_CLASS 各变体均已声明 disabled:cursor-not-allowed，但实际不生效：ui 结构层 BUTTON_STRUCTURE_CLASS 始终带 disabled:pointer-events-none（unstyledVisual 只关视觉、保留结构类），pointer-events: none 会让光标样式失效。结果是 disabled 按钮、以及 loading 按钮（loading 会置 disabled 属性）都只显示默认光标，而非 not-allowed。

改动文件​

  • packages/design/src/components/Button/styles.ts
  • packages/design/src/components/Button/Button.test.tsx

改动内容​

  • BUTTON_BASE_CLASS 增加 disabled:pointer-events-auto，经 mergeClass（tailwind-merge）覆盖结构层的 disabled:pointer-events-none，让既有的 disabled:cursor-not-allowed 真正生效；点击仍由原生 disabled 属性拦截
  • disabled 视觉不受影响：Tailwind 中 disabled: 变体在 hover: / active: 之后生成，同优先级下 disabled 仍覆盖 hover/active 颜色
  • loading 与 disabled 共用 disabled 属性，单处修复同时覆盖两种状态
  • 连带修复 link 变体：disabled:pointer-events-auto 重新放开指针事件后，hover link 会触发 hover:underline，导致 disabled/loading 态 hover 时出现下划线。给 link-color / link-gray 的 disabled 类补 disabled:no-underline（disabled: 变体在 hover: 之后生成，覆盖 hover:underline）
  • 补充单测：loading 态断言 disabled:pointer-events-auto + disabled:cursor-not-allowed；primary disabled 用例补充同样两条断言；link 变体 disabled/loading 断言 disabled:no-underline
  • 排查其余交互组件（Input / Textarea / Select / Checkbox / RadioGroup / Switch / Upload / DatePicker / TimePicker / Calendar / Tree / Tabs / DropdownMenu / AiButton 等）：未发现同类「cursor-not-allowed 被 pointer-events-none 抵消」的实际问题（多数走 unstyledVisual 去掉了 ui 层 pointer-events-none，或用 Radix data-disabled 且光标元素无 pointer-events-none），Button 是唯一现存实例