fix:checkbox禁用状态对齐云舍 (#4482)

* perf:添加选项必填

* fix:checkbox禁用状态对齐云舍

Co-authored-by: liuguihua <liuguihua@baidu.com>

docs/zh-CN/components/form/checkbox.md

@@ -41,7 +41,8 @@ order: 8
         {
             "name": "checkbox",
             "type": "checkbox",
-            "label": "勾选框"
+            "label": "勾选框",
+            "option": "选项说明"
         }
     ]
 }
@@ -58,6 +59,7 @@ order: 8
             "name": "checkbox",
             "type": "checkbox",
             "label": "勾选框",
+            "option": "选项说明",
             "trueValue": 1,
             "falseValue": 0
         }
@@ -81,8 +83,7 @@ order: 8
             "trueValue": true,
             "falseValue": false,
             "optionType": "button",
-            "option": "选项说明",
-            "value": true
+            "option": "选项说明"
         }
     ]
 }

scss/_properties.scss

@@ -494,10 +494,12 @@
   --Checkbox-size: #{px2rem(16px)};
   --Checkbox-inner-size: calc(var(--Checkbox-size) / 2);
   --Checkbox-onHover-color: var(--info);
-  --Checkbox-onDisabled-bg: #e5e7eb;
-  --Checkbox-onDisabled-color: var(--text--muted-color);
+  --Checkbox-onDisabled-bg: #f7f7f9;
+  --Checkbox-onDisabled-color: #b8babf;
   --Checkbox-inner-onDisabled-bg: #d4d6d9;
-  --Checkbox-disabled-unchecked-bg: #f2f3f3;
+  --Checkbox-inner-onDisabled-color: #ffffff;
+  --Checkbox-disabled-unchecked-bg: #f7f7f9;
+  --Checkbox-inner-disabled-checked-bg: #e8e9eb;
   --Checkbox-border-width: var(--Form-input-borderWidth);
   --Checkbox-paddingX: #{px2rem(12px)};
   --Checkbox-button-height: #{px2rem(32px)};

scss/components/form/_checks.scss

@@ -164,24 +164,20 @@
       }
 
       &[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
-        background: var(--FileControl-onDisabled-bg);
+        border-color: var(--Checkbox-color);
+        background: var(--Checkbox-onDisabled-bg);
       }
 
       &[disabled]:checked + i {
         &:before {
           border-color: var(--Checkbox-onDisabled-color);
+          background: var(--Checkbox-onDisabled-bg);
         }
       }
 
       &:checked[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
-        background: var(--FileControl-onDisabled-bg);
-
-        &:before {
-          background: var(--FileControl-onDisabled-bg);
-          border-color: var(--Checkbox-inner-onDisabled-bg);
-        }
+        border-color: var(--Checkbox-color);
+        background: var(--Checkbox-onDisabled-bg);
       }
     }
 
@@ -256,6 +252,7 @@
 
     &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
+      border-color: var(--Checkbox-onHover-color);
     }
 
     &:hover {
@@ -292,7 +289,7 @@
           left: 0;
           width: var(--Checkbox--full-inner-size);
           height: calc(var(--Checkbox--full-inner-size) / 2);
-          transform: translate(-80%, -160%) rotate(-50deg);
+          transform: translate(-80%, -160%) rotate(-50deg) scale(0.8);
           background: transparent;
         }
       }
@@ -307,9 +304,13 @@
 
       &:checked[disabled] + i {
         background: transparent;
-        border-width: px2rem(8px);
-        border-color: var(--Checkbox-onHover-color) transparent transparent
-          var(--Checkbox-onHover-color);
+        border-width: px2rem(7px);
+        border-color: var(--Checkbox-inner-disabled-checked-bg) transparent
+          transparent var(--Checkbox-inner-disabled-checked-bg);
+          &:before {
+            background: transparent;
+            border-color: var(--Checkbox-inner-onDisabled-color) !important;
+          }
       }
     }
     > i {
@@ -342,9 +343,18 @@
       color: var(--Switch-checked-onHover-bgColor);
     }
   }
-  &--button--disabled--unchecked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--full {
-    i {
-      background: var(--FileControl-onDisabled-bg);
+  &--button--disabled--unchecked.#{$ns}Checkbox--checkbox {
+    background: var(--Checkbox-disabled-unchecked-bg);
+    border-color: var(--Checkbox-color);
+    &:hover {
+      border-color: var(--Checkbox-color) !important;
+    }
+  }
+  &--button--disabled--checked.#{$ns}Checkbox--checkbox {
+    background: var(--Checkbox-onDisabled-bg);
+    border-color: var(--Checkbox-color) !important;
+    &:hover {
+      border-color: var(--Checkbox-color) !important;
     }
   }
   &--radio {

scss/themes/_cxd-variables.scss

@@ -217,8 +217,8 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Number-handler--up-transform: rotate(180deg);
   --Number-handler--down-content: '\e6dd';
 
-  --Checkbox-onDisabled-color: #ebebeb;
-  --Checkbox-onDisabled-bg: #cccccc;
+  --Checkbox-onDisabled-bg: #F7F7F9;
+  --Checkbox-onDisabled-color: #B8BABF;
 
   --Checkbox-inner-size: #{px2rem(8px)};
   --Checkbox--full-inner-size: #{px2rem(8px)};

src/components/Checkbox.tsx

@@ -74,7 +74,12 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       labelClassName,
       optionType
     } = this.props;
-
+    const _checked = typeof checked !== 'undefined'
+      ? checked
+      : typeof value === 'undefined'
+      ? value
+      : value == trueValue;
+    
     return (
       <label
         className={cx(`Checkbox Checkbox--${type}`, className, {
@@ -82,9 +87,11 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
           // 'Checkbox--partial': partial
           [`Checkbox--${size}`]: size,
           'Checkbox--button': optionType === 'button',
-          'Checkbox--button--checked': optionType === 'button' && checked,
+          'Checkbox--button--checked': optionType === 'button' && _checked,
           'Checkbox--button--disabled--unchecked':
-            optionType === 'button' && disabled && !checked
+            optionType === 'button' && disabled && !_checked,
+          'Checkbox--button--disabled--checked':
+            optionType === 'button' && disabled && _checked
         })}
       >
         <input