feat: add button disable token

DouyinFE · Nov 10, 2023 · 34ac893 · 34ac893
1 parent a517205
commit 34ac893
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 5 deletions.
diff --git a/packages/semi-foundation/button/button.scss b/packages/semi-foundation/button/button.scss
@@ -43,6 +43,12 @@ $module: #{$prefix}-button;
       border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
       transform: scale($transform-scale-button_danger);
 
+        &-disabled{
+            background-color: $color-button_disabled-bg-danger;
+            &.#{$module}-light{
+                background-color: $color-button_disabled_light-bg-danger;
+            }
+        }
 
         &:hover {
             background-color: $color-button_danger-bg-hover;
@@ -64,7 +70,12 @@ $module: #{$prefix}-button;
       transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
       border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
       transform:scale($transform_scale-button_warning);
-
+        &-disabled{
+            background-color: $color-button_disabled-bg-warning;
+            &.#{$module}-light{
+                background-color: $color-button_disabled_light-bg-warning;
+            }
+        }
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
@@ -85,7 +96,12 @@ $module: #{$prefix}-button;
       transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
       border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
       transform:scale($transform_scale_button_tertiary);
-
+        &-disabled{
+            background-color: $color-button_disabled-bg-tertiary;
+            &.#{$module}-light{
+                background-color: $color-button_disabled_light-bg-tertiary;
+            }
+        }
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
@@ -103,7 +119,12 @@ $module: #{$prefix}-button;
         transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
         border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
       transform:scale($transform_scale-button_primary);
-
+        &-disabled{
+            background-color: $color-button_disabled-bg-primary;
+            &.#{$module}-light{
+                background: $color-button_disabled_light-bg-primary;
+            }
+        }
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -123,6 +144,12 @@ $module: #{$prefix}-button;
       transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
       border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
       transform:scale($transform_scale-button_secondary);
+        &-disabled{
+            background-color: $color-button_disabled-bg-secondary;
+            &.#{$module}-light{
+                background-color: $color-button_disabled_light-bg-secondary;
+            }
+        }
 
         &:hover {
             background-color: $color-button_secondary-bg-hover;
@@ -138,10 +165,8 @@ $module: #{$prefix}-button;
     }
     &-disabled {
         color: $color-button_disabled_solid-text-default;
-        background-color: $color-button_disabled-bg-default;
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
-            background-color: $color-button_disabled-bg-hover;
         }
         cursor: not-allowed;
 

diff --git a/packages/semi-foundation/button/variables.scss b/packages/semi-foundation/button/variables.scss
@@ -82,6 +82,13 @@ $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
 $color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
+$color-button_disabled-bg-primary: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
+$color-button_disabled-bg-secondary: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
+$color-button_disabled-bg-danger: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
+$color-button_disabled-bg-warning: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
+$color-button_disabled-bg-tertiary: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
+
+
 
 // light
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
@@ -92,6 +99,12 @@ $color-button_light-border-hover: $color-button_light-border-default; // 浅色
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
 $width-button_light-border: 0; // 浅色按钮描边宽度
 
+$color-button_disabled_light-bg-primary: $color-button_light-bg-default; // 禁用 light primary 按钮背景颜色
+$color-button_disabled_light-bg-secondary: $color-button_light-bg-default; // 禁用 light secondary 按钮背景颜色
+$color-button_disabled_light-bg-danger: $color-button_light-bg-default; // 禁用 light danger 按钮背景颜色
+$color-button_disabled_light-bg-warning: $color-button_light-bg-default; // 禁用 light warning 按钮背景颜色
+$color-button_disabled_light-bg-tertiary: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
+
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮

diff --git a/packages/semi-ui/button/Button.tsx b/packages/semi-ui/button/Button.tsx
@@ -106,6 +106,7 @@ export default class Button extends PureComponent<ButtonProps> {
                     [`${prefixCls}-block`]: block,
                     [`${prefixCls}-circle`]: circle,
                     [`${prefixCls}-borderless`]: theme === 'borderless',
+                    [`${prefixCls}-${type}-disabled`]: disabled && type,
                 },
                 className
             ),