refactor: checkbox layout (#1073)

packages/semi-foundation/checkbox/checkbox.scss

@@ -11,13 +11,14 @@ $module: #{$prefix}-checkbox;
     // box-sizing: border-box;
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
     border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
     transform: scale($transform_scale-checkbox);
+    column-gap: $spacing-checkbox_label-paddingLeft;
 
     input[type="checkbox"] {
         position: absolute;
@@ -29,11 +30,17 @@ $module: #{$prefix}-checkbox;
         opacity: 0;
     }
 
+    &-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-checkbox_extra-marginTop;
+    }
+
     &-addon {
         display: flex;
         flex: 1;
         align-items: center;
-        padding-left: $spacing-checkbox_label-paddingLeft;
         color: $color-checkbox_label-text-default;
         line-height: $font-checkbox_label-lineHeight;
         user-select: none;
@@ -192,7 +199,6 @@ $module: #{$prefix}-checkbox;
                 background: $color-checkbox_cardType_inner-bg-default;
             }
 
-            margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
 
@@ -202,7 +208,6 @@ $module: #{$prefix}-checkbox;
             // input focus/blur cannot take effect when display: none
             opacity: 0;
             width: 0;
-            margin-right: 0;
         }
 
         .#{$module}-addon {
@@ -210,8 +215,6 @@ $module: #{$prefix}-checkbox;
             font-size: $font-checkbox_cardType_addon-size;
             line-height: $font-checkbox_cardType_addon-lineHeight;
             color: $color-checkbox_cardType_addon-text-default;
-            margin-left: 0;
-            padding-left: 0;
         }
 
         .#{$module}-extra {
@@ -219,7 +222,6 @@ $module: #{$prefix}-checkbox;
             font-size: $font-checkbox_cardType_extra-size;
             line-height: $font-checkbox_cardType_extra-lineHeight;
             color: $color-checkbox_cardType_extra-text-default;
-            padding-left: 0;
 
             &.#{$module}-cardType_extra_noChildren {
                 margin-top: 0;
@@ -359,9 +361,7 @@ $module: #{$prefix}-checkbox;
         flex-grow: 1;
         flex-basis: 100%;
         box-sizing: border-box;
-        padding-left: $spacing-checkbox_extra-paddingLeft;
         color: $color-checkbox_extra-text-default;
-        margin-top: $spacing-checkbox_extra-marginTop;
     }
 
     &-focus {
@@ -385,28 +385,28 @@ $module: #{$prefix}-checkbox;
     }
 
     &-horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $spacing-checkbox_group_horizontal-marginRight;
+
         .#{$module} {
-            margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
-
-            &:last-of-type {
-                margin-right: 0;
-            }
         }
     }
 
     &-vertical {
-        .#{$module} {
-            margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-checkbox_group_vertical_item-marginBottom;
 
-            &:last-of-type {
-                margin-bottom: 0;
-            }
+        &-cardType {
+            row-gap: $spacing-checkbox_card_group_vertical-marginBottom;
         }
 
-        &-cardType {
+
+        &-pureCardType {
             .#{$module} {
-                margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
+                column-gap: 0;
             }
         }
     }

packages/semi-foundation/checkbox/rtl.scss

@@ -10,45 +10,9 @@ $inner-width: $width-icon-medium;
             left: auto;
             right: 0;
         }
-
-        &-addon {
-            padding-left: 0;
-            padding-right: $spacing-checkbox_label-paddingLeft;
-        }
-
-        &-extra {
-            padding-left: 0;
-            padding-right: $spacing-checkbox_extra-paddingLeft;
-        }
-
-        &-cardType {
-            .#{$module}-inner {
-                margin-right: 0;
-                margin-left: $spacing-checkbox_cardType_inner-marginRight;
-            }
-    
-            .#{$module}-addon {
-                margin-right: 0;
-                padding-right: 0;
-            }
-
-            .#{$module}-extra {
-                padding-right: 0;
-            }
-        }
     }
 
     .#{$module}Group {
         direction: rtl;
-
-        &-horizontal {
-            .#{$module} {
-                margin-right: 0;
-                margin-left: $spacing-checkbox_group_horizontal-marginRight;
-                &:last-of-type {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 }

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

@@ -31,6 +31,8 @@ export const CheckboxDefault = () => {
       </Checkbox>
       <br />
       <Checkbox indeterminate>indeterminate</Checkbox>
+      <Checkbox onChange={e => console.log(e)} value={1} onChange={v => console.log(v)}>
+      </Checkbox>
     </div>
   );
 };

packages/semi-ui/checkbox/checkbox.tsx

@@ -235,20 +235,27 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         const name = inGroup && this.context.checkboxGroup.name;
         const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
 
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
-                        {children}
-                    </span>
-                ) : null}
-                {extra ? (
-                    <div id={extraId} className={extraCls} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
+        const renderContent = () => {
+            if (!children && !extra) {
+                return null;
+            }
+
+            return (
+                <div className={`${prefix}-content`}>
+                    {children ? (
+                        <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
+                            {children}
+                        </span>
+                    ) : null}
+                    {extra ? (
+                        <div id={extraId} className={extraCls} x-semi-prop="extra">
+                            {extra}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        };
+
         return (
             // label is better than span, however span is here which is to solve gitlab issue #364
             <span
@@ -276,11 +283,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    props.isCardType ?
-                        <div>{renderContent()}</div> :
-                        renderContent()
-                }
+                {renderContent()}
             </span>
         );
     }

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -120,6 +120,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
             [`${prefix }-wrapper`]: true,
             [`${prefix }-${ direction}`]: direction,
             [`${prefix}-${direction}-cardType`]: direction && isCardType,
+            [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType,
         }, className);
 
         const realValue = this.state.value.slice();