跳到主要内容

Button 禁用状态视觉效果修复（WEB-1203）

版本： 0.7.0 · 类型： 🐛 Bug Fix

WEB-1203

问题​

当 Button 处于 disabled 状态时，点击或悬停仍然可能触发视觉效果（边框颜色变化、背景偏移、ring 效果），这是因为 CSS 伪类选择器（如 hover:、active:）的优先级或泄露跨过了 disabled: 状态。这在具有明确边框的变体（secondary、destructive-outline）中尤其明显，禁用 + 点击状态会显示意外的样式变化。

根本原因：禁用按钮启用了 pointer-events-auto（用于显示 cursor-not-allowed），这允许 hover 和 active 伪类匹配，尽管按钮处于禁用状态。如果没有显式的 disabled:hover: 和 disabled:active: 防护，基础 hover/active 样式仍可能被应用。

改动文件​

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

改动内容​

  1. 在 BUTTON_BASE_CLASS 中添加 disabled:hover:no-underline 和 disabled:active:no-underline 作为链接类按钮的通用防护。
  2. 为 BUTTON_DISABLED_CLASS 中的每个变体添加显式的 disabled:hover: 和 disabled:active: 防护：
    • primary / destructive：disabled:hover:bg-<disabled-bg>、disabled:active:bg-<disabled-bg>、disabled:active:ring-0
    • secondary：disabled:hover:bg-<disabled-bg>、disabled:active:bg-<disabled-bg>（防止点击时边框/背景变化）
    • tertiary / quaternary：disabled:hover:bg-transparent、disabled:active:bg-transparent
    • destructive-outline：disabled:hover:bg-transparent、disabled:active:bg-transparent（防止边框颜色泄露）
    • link-color / link-gray：disabled:hover:no-underline、disabled:active:no-underline
  3. 这些防护覆盖任何 hover/active 伪类效果，确保禁用按钮在用户交互时保持一致的视觉状态。

影响​

  • 禁用按钮现在提供明确、清晰的视觉反馈，表明无法交互
  • 点击/悬停时不再有视觉闪烁或意外的样式变化
  • 所有按钮变体上的禁用外观保持一致