fix: [Checkbo/Radio] style of checked and disabled cardType #319 (#357)

Co-authored-by: chenyuling <[email protected]>

content/input/checkbox/index-en-US.md

@@ -342,12 +342,15 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
         <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
         <Checkbox value={'3'} extra='Checkbox Description' style={{width:280}}>
             Checkbox Title
         </Checkbox>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{width:280}}>
+            Checkbox Title
+        </Checkbox>
     </CheckboxGroup>
 );
 ```

content/input/checkbox/index.md

@@ -327,12 +327,15 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
         <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
         <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
             单选框标题
         </Checkbox>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+            单选框标题
+        </Checkbox>
     </CheckboxGroup>
 );
 ```

packages/semi-foundation/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

packages/semi-foundation/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

packages/semi-foundation/radio/radio.scss

@@ -29,6 +29,7 @@ $inner-width: $width-icon-medium;
         width: 100%;
         height: 100%;
         margin: 0;
+        cursor: pointer;
     }
 
     &:hover {
@@ -46,6 +47,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-hover;
+                border-color: $color-radio_checked-border-hover;
             }
         }
     }
@@ -64,6 +66,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-active;
+                border-color: $color-radio_checked-border-active;
             }
         }
     }
@@ -135,6 +138,29 @@ $inner-width: $width-icon-medium;
         &_checked {
             background: $color-radio_cardRadioGroup-bg-checked;
             border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-active;
+
+            &:hover {
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-hover;
+
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_border-hover;
+                }
+            }
+
+            &:active {
+                background: $color-radio_cardRadioGroup-bg-checked;
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-active;
+
+                .#{$module}-inner-checked {
+                    .#{$module}-inner-display {
+                        border-color: $color-radio_cardRadioGroup_checked_border-active;
+                    }
+
+                    &:hover .#{$module}-inner-display {
+                        background: $color-radio_primary-bg-active;
+                    }
+                }
+            }
         }
 
         &_hover {
@@ -146,6 +172,21 @@ $inner-width: $width-icon-medium;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardRadioGroup  {
+            background: $color-radio_cardRadioGroup_disabled-bg-checked;
+            border: $width-radio_cardRadioGroup_checked_disabled-border solid $color-radio_cardRadioGroup_border_disabled-active;
+
+            .#{$module}-inner-checked .#{$module}-inner-display {
+                border-color: $color-radio_cardRadioGroup_checked_disabled-border-default;
+            }
+            
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_disabled-border-hover;
+                }
+            }
+        }
     }
 
     &.#{$module}-disabled:hover,
@@ -158,6 +199,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_checked-bg-disabled;
+                border-color: $color-radio_checked-border-disabled;
             }
         }
     }
@@ -293,7 +335,7 @@ $inner-width: $width-icon-medium;
             &-display {
                 opacity: 0.75;
                 background: $color-radio_disabled-bg-default;
-                border-color: $color-radio_checked-border-disabled;
+                border-color: $color-radio_default-border-disabled;
 
                 &:hover {
                     background: $color-radio_disabled-bg-hover;
@@ -308,6 +350,7 @@ $inner-width: $width-icon-medium;
 
                 &:hover {
                     background: $color-radio_checked-bg-disabled;
+                    border-color: $color-radio_checked-border-disabled;
                 }
             }
         }

packages/semi-foundation/radio/variables.scss

@@ -3,6 +3,8 @@ $color-radio_default-bg-default: transparent; // 默认态背景颜色
 $color-radio_default-bg-hover: var(--semi-color-fill-0); // 悬浮态背景颜色
 $color-radio_default-bg-active: var(--semi-color-fill-1); // 按下态背景颜色
 $color-radio_default-border-hover: var(--semi-color-focus-border); // 悬浮态描边颜色
+$color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中时悬浮态描边颜色
+$color-radio_checked-border-active: var(--semi-color-primary-active); // 选中时按下态描边颜色
 
 $color-radio_default-text-default: var(--semi-color-text-0); // 选项文本颜色
 $color-radio_extra-text-default: var(--semi-color-text-2); // 辅助文本颜色
@@ -14,7 +16,8 @@ $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景
 $color-radio_primary-text-default: white; // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
-$color-radio_checked-border-disabled: var(--semi-color-border); // 选中项禁用态描边颜色
+$color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
+$color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中项禁用态描边颜色
 
 $color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态背景颜色
 $color-radio_disabled-bg-hover: transparent;
@@ -30,11 +33,17 @@ $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
+$color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
-$color-radio_cardRadioGroup_border-active: var(--semi-color-focus-border); // 卡片样式单选选中态描边颜色
+$color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
+$color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
+$color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态
+$color-radio_cardRadioGroup_border_disabled-active: var(--semi-color-primary-disabled); // 卡片样式单选选中且禁用时的描边颜色
 $color-radio_cardRadioGroup_addon-text-default: var(--semi-color-text-0); // 卡片样式单选标题文字颜色
 $color-radio_cardRadioGroup_extra-text-default: var(--semi-color-text-2); // 卡片样式单选辅助文字颜色
+$color-radio_cardRadioGroup_checked_disabled-border-default: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 默认态
+$color-radio_cardRadioGroup_checked_disabled-border-hover:  var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 悬浮态
 $color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
 $color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
 $color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
@@ -44,6 +53,7 @@ $radius-radio_addon_buttonRadio: var(--semi-border-radius-small); // 按钮式
 $radius-radio_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆角大小
 
 $width-radio_cardRadioGroup_checked-border: 1px; // 卡片式单选描边宽度
+$width-radio_cardRadioGroup_checked_disabled-border: 1px; // 卡片式单选选中且禁用时的描边宽度
 $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮态
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态

packages/semi-ui/checkbox/__test__/checkboxGroup.test.js

@@ -136,13 +136,45 @@ describe('CheckboxGroup', () => {
     });
 
     it('checkboxGroup card style', () => {
-        const checkbox = getCG({ type: 'card' });
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        const checkboxGroup = getCG({ type: 'card' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'card', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
     });
 
     it('checkboxGroup pure card style', () => {
-        const checkbox = getCG({ type: 'pureCard' });
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        const checkboxGroup = getCG({ type: 'pureCard' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'pureCard', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
     });
 });

packages/semi-ui/checkbox/_story/checkbox.stories.js

@@ -574,12 +574,12 @@ export const CheckboxGroupCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
-      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
@@ -767,12 +767,12 @@ export const CheckboxGroupPureCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup type="pureCard" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
-      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>

packages/semi-ui/checkbox/checkbox.tsx

@@ -154,6 +154,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
             [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
             [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
+            [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
             [className]: Boolean(className),
         });
 

packages/semi-ui/radio/__test__/radioGroup.test.jsx

@@ -131,20 +131,55 @@ describe('RadioGroup', () => {
     });
 
     it('radioGroup card style', () => {
-        const radio = mount(
+        const radioGroup = mount(
             createRadioGroup({ type: 'card' })
         );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        radioGroup.unmount();
+
+        const disabledRadioGroup = mount(
+            createRadioGroup({ type: 'card', disabled: true, defaultValue: 'A' })
+        );
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(0)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(1)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(false);
+        disabledRadioGroup.unmount();
     });
 
     it('radioGroup pure card style', () => {
-        const radio = mount(
+        const radioGroup = mount(
             createRadioGroup({ type: 'pureCard' })
         );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
-    });
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
+        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
+        radioGroup.unmount();
 
+        const disabledRadioGroup = mount(
+            createRadioGroup({ type: 'pureCard', disabled: true, defaultValue: 'A' })
+        );
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(0)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledRadioGroup
+                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
+                .at(1)
+                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
+        ).toEqual(false);
+        disabledRadioGroup.unmount();
+    });
 
     it('The buttonSize of the button type radio', () => {
         const smallRadio = mount(

packages/semi-ui/radio/_story/radio.stories.js

@@ -481,10 +481,10 @@ export const RadioGroupCardStyle = () => (
     <br />
     <div>radio disabled</div>
     <RadioGroup type="card" defaultValue={1}>
-      <Radio value={1} disabled extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
       <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
@@ -495,13 +495,13 @@ export const RadioGroupCardStyle = () => (
     <br />
     <div>radioGroup disabled</div>
     <RadioGroup type="card" disabled defaultValue={1}>
-      <Radio value={1} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={3} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
     </RadioGroup>
@@ -678,10 +678,10 @@ export const RadioGroupPureCardStyle = () => (
     <br />
     <div>radio disabled</div>
     <RadioGroup type="pureCard" defaultValue={1}>
-      <Radio value={1} disabled extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
       <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
@@ -692,13 +692,13 @@ export const RadioGroupPureCardStyle = () => (
     <br />
     <div>radioGroup disabled</div>
     <RadioGroup type="pureCard" disabled defaultValue={1}>
-      <Radio value={1} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={1} extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={2} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={2} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
-      <Radio value={3} extra="Semi Design" style={{ width: 280 }}>
+      <Radio value={3} extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Radio>
     </RadioGroup>

packages/semi-ui/radio/radio.tsx

@@ -193,6 +193,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-cardRadioGroup`]: isCardRadioGroup,
             [`${prefix}-cardRadioGroup_disabled`]: isDisabled && isCardRadioGroup,
             [`${prefix}-cardRadioGroup_checked`]: isCardRadioGroup && realChecked && !isDisabled,
+            [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
             [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
             [className]: Boolean(className),
         });