From d101b4904e5aef429e0ecd923fffe1e2f84b765e Mon Sep 17 00:00:00 2001 From: lghxuelang <963601654@qq.com> Date: Wed, 1 Jun 2022 12:36:43 +0800 Subject: [PATCH] =?UTF-8?q?fix:checkbox=E7=A6=81=E7=94=A8=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E5=AF=B9=E9=BD=90=E4=BA=91=E8=88=8D=20(#4482)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf:添加选项必填 * fix:checkbox禁用状态对齐云舍 Co-authored-by: liuguihua --- docs/zh-CN/components/form/checkbox.md | 7 +++-- scss/_properties.scss | 8 +++-- scss/components/form/_checks.scss | 42 ++++++++++++++++---------- scss/themes/_cxd-variables.scss | 4 +-- src/components/Checkbox.tsx | 13 ++++++-- 5 files changed, 47 insertions(+), 27 deletions(-) diff --git a/docs/zh-CN/components/form/checkbox.md b/docs/zh-CN/components/form/checkbox.md index 1e9e9425a..0a547d76d 100755 --- a/docs/zh-CN/components/form/checkbox.md +++ b/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": "选项说明" } ] } diff --git a/scss/_properties.scss b/scss/_properties.scss index a0a49c0ea..7426ab5f2 100644 --- a/scss/_properties.scss +++ b/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)}; diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index 2d18a0fb0..2188473a0 100644 --- a/scss/components/form/_checks.scss +++ b/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 { diff --git a/scss/themes/_cxd-variables.scss b/scss/themes/_cxd-variables.scss index 9968a5f94..e2056d0ab 100644 --- a/scss/themes/_cxd-variables.scss +++ b/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)}; diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 5215891dc..718c0aab5 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -74,7 +74,12 @@ export class Checkbox extends React.Component { labelClassName, optionType } = this.props; - + const _checked = typeof checked !== 'undefined' + ? checked + : typeof value === 'undefined' + ? value + : value == trueValue; + return (