@douyinfe/semi-ui 2.19.0-alpha.2 → 2.19.0-alpha.3

package/checkbox/checkbox.tsx

@@ -235,8 +235,12 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         const name = inGroup && this.context.checkboxGroup.name;
         const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
 
+        if (!children && !extra) {
+            return null;
+        }
+
         const renderContent = () => (
-            <>
+            <div className={`${prefix}-content`}>
                 {children ? (
                     <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
                         {children}
@@ -247,7 +251,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                         {extra}
                     </div>
                 ) : null}
-            </>
+            </div>
         );
         return (
             // label is better than span, however span is here which is to solve gitlab issue #364
@@ -276,11 +280,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

@@ -6,7 +6,7 @@ import { checkboxGroupClasses as css, strings } from '@douyinfe/semi-foundation/
 import CheckboxGroupFoundation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/checkbox/checkboxGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { Context } from './context';
-import { get, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 import Checkbox, { CheckboxEvent } from './checkbox';
 
 export type CheckboxDirection = 'horizontal' | 'vertical';
@@ -136,7 +136,6 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                             disabled={this.props.disabled}
                             value={option}
                             prefixCls={prefixCls}
-                            type={type}
                         >
                             {option}
                         </Checkbox>
@@ -153,7 +152,6 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                             className={option.className}
                             style={option.style}
                             onChange={option.onChange}
-                            type={type}
                         >
                             {option.label}
                         </Checkbox>
@@ -161,14 +159,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                 }
             });
         } else if (children) {
-            inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => {
-                const props: Record<string, any> = { key: index, role: 'listitem' };
-                const isCheckboxComp = ['Checkbox', 'CheckboxWithGroup'].some(comp => [get(itm, 'type.displayName'), get(itm, 'type.name')].includes(comp));
-                if (isCheckboxComp) {
-                    props.type = type;
-                }
-                return React.cloneElement(itm, props);
-            });
+            inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => React.cloneElement(itm, { key: index, role: 'listitem' }));
         }
 
         return (

package/dist/css/semi.css

@@ -3471,7 +3471,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;
@@ -3479,6 +3479,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;
@@ -3489,11 +3490,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;
@@ -3722,9 +3728,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);
@@ -15309,7 +15313,6 @@ body {
 .semi-select-option-icon {
   width: 12px;
   color: transparent;
-  visibility: hidden;
   margin-right: 8px;
   display: flex;
   justify-content: center;
@@ -15350,7 +15353,6 @@ body {
   font-weight: 600;
 }
 .semi-select-option-selected .semi-select-option-icon {
-  visibility: visible;
   color: var(--semi-color-text-2);
 }
 .semi-select-option-focused {
@@ -17395,10 +17397,14 @@ body {
   display: inline-block;
   width: 16px;
   height: 16px;
-  cursor: pointer;
   vertical-align: middle;
   text-align: center;
 }
+.semi-table .semi-table-column-sorter-wrapper {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
 .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down {
   height: 0;
   display: block;
@@ -17421,11 +17427,11 @@ body {
   display: inline-flex;
   cursor: pointer;
   color: var(--semi-color-text-2);
-  vertical-align: middle;
+  align-items: center;
 }
 .semi-table .semi-table-column-filter svg {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 .semi-table .semi-table-column-filter.on {
   color: var(--semi-color-primary);