@douyinfe/semi-ui 2.19.0-alpha.7 → 2.19.0-alpha.8

package/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>
   );
 };

package/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>
         );
     }

package/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();

package/dist/css/semi.css

@@ -3508,7 +3508,7 @@ body {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   font-size: 14px;
   line-height: 20px;
@@ -3516,6 +3516,7 @@ body {
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   transform: scale(var(--semi-transform_scale-none));
+  column-gap: 8px;
 }
 .semi-checkbox input[type=checkbox] {
   position: absolute;
@@ -3526,11 +3527,16 @@ body {
   margin: 0;
   opacity: 0;
 }
+.semi-checkbox-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
 .semi-checkbox-addon {
   display: flex;
   flex: 1;
   align-items: center;
-  padding-left: 8px;
   color: var(--semi-color-text-0);
   line-height: 20px;
   user-select: none;
@@ -3633,7 +3639,6 @@ body {
 }
 .semi-checkbox-cardType .semi-checkbox-inner {
   position: relative;
-  margin-right: 8px;
   flex-shrink: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-inner-display {
@@ -3642,22 +3647,18 @@ body {
 .semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
   opacity: 0;
   width: 0;
-  margin-right: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-addon {
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-0);
-  margin-left: 0;
-  padding-left: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-extra {
   font-weight: normal;
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-2);
-  padding-left: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren {
   margin-top: 0;
@@ -3759,9 +3760,7 @@ body {
   flex-grow: 1;
   flex-basis: 100%;
   box-sizing: border-box;
-  padding-left: 24px;
   color: var(--semi-color-text-2);
-  margin-top: 4px;
 }
 .semi-checkbox-focus {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -3779,21 +3778,24 @@ body {
 .semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {
   margin-bottom: 16px;
 }
+.semi-checkboxGroup-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
 .semi-checkboxGroup-horizontal .semi-checkbox {
-  margin-right: 16px;
   display: inline-flex;
 }
-.semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
-  margin-right: 0;
-}
-.semi-checkboxGroup-vertical .semi-checkbox {
-  margin-bottom: 12px;
+.semi-checkboxGroup-vertical {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
 }
-.semi-checkboxGroup-vertical .semi-checkbox:last-of-type {
-  margin-bottom: 0;
+.semi-checkboxGroup-vertical-cardType {
+  row-gap: 16px;
 }
-.semi-checkboxGroup-vertical-cardType .semi-checkbox {
-  margin-bottom: 16px;
+.semi-checkboxGroup-vertical-pureCardType .semi-checkbox {
+  column-gap: 0;
 }
 
 .semi-rtl .semi-checkbox,
@@ -3805,43 +3807,10 @@ body {
   left: auto;
   right: 0;
 }
-.semi-rtl .semi-checkbox-addon,
-.semi-portal-rtl .semi-checkbox-addon {
-  padding-left: 0;
-  padding-right: 8px;
-}
-.semi-rtl .semi-checkbox-extra,
-.semi-portal-rtl .semi-checkbox-extra {
-  padding-left: 0;
-  padding-right: 24px;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-inner,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-inner {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-addon,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-addon {
-  margin-right: 0;
-  padding-right: 0;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-extra,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-extra {
-  padding-right: 0;
-}
 .semi-rtl .semi-checkboxGroup,
 .semi-portal-rtl .semi-checkboxGroup {
   direction: rtl;
 }
-.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox,
-.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox {
-  margin-right: 0;
-  margin-left: 16px;
-}
-.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type,
-.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
-  margin-left: 0;
-}
 
 .semi-collapse-item {
   border-bottom: 1px solid var(--semi-color-border);