@douyinfe/semi-ui 2.19.0-beta.0 → 2.19.1-alpha.2

package/avatar/index.tsx

@@ -31,7 +31,6 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: noop,
     };
 
-    static elementType: string;
     static propTypes = {
         children: PropTypes.node,
         color: PropTypes.oneOf(colorSet),
@@ -193,7 +192,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             const finalProps = clickable ? { ...props, ...a11yFocusProps } : props;
             content = (
                 <span className={`${prefixCls}-content`}>
-                    <span {...finalProps} x-semi-prop="children">{children}</span>
+                    <span {...finalProps}  x-semi-prop="children">{children}</span>
                 </span>
             );
         }
@@ -235,4 +234,3 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         );
     }
 }
-Avatar.elementType = 'Avatar';

package/button/buttonGroup.tsx

@@ -1,10 +1,9 @@
-import React, { isValidElement, cloneElement, ReactNode } from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
-import { get } from 'lodash';
-import { Type, Size, ButtonProps } from './Button';
+import { Type, Size } from './Button';
 
 import '@douyinfe/semi-foundation/button/button.scss';
 
@@ -40,41 +39,9 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         size: 'default',
     };
 
-    getInnerWithLine(inner) {
-        const innerWithLine: ReactNode[] = [];
-        let lineCls = `${prefixCls}-group-line`;
-        if (inner.length > 1) {
-            inner.slice(0, -1).forEach(item => {
-                const isButtonType = get(item, 'type.elementType') === 'Button';
-                const buttonProps = get(item, 'props') as ButtonProps;
-                if (buttonProps) {
-                    const { type, theme, disabled } = buttonProps;
-                    lineCls = classNames(
-                        `${prefixCls}-group-line`,
-                        `${prefixCls}-group-line-${theme ?? 'light'}`, 
-                        `${prefixCls}-group-line-${type ?? 'primary'}`, 
-                        {
-                            [`${prefixCls}-group-line-disabled`]: disabled,
-                        }
-                    );
-                }
-                if (isButtonType) {
-                    innerWithLine.push(item, <span className={lineCls} />);
-                } else {
-                    innerWithLine.push(item);
-                }
-            });
-            innerWithLine.push(inner.slice(-1));
-            return innerWithLine;
-        } else {
-            return inner;
-        }
-    }
-
     render() {
         const { children, disabled, size, type, className, 'aria-label': ariaLabel, ...rest } = this.props;
-        let inner: ReactNode[];
-        let innerWithLine: ReactNode[] = [];
+        let inner;
         const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
@@ -83,8 +50,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                     ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
                     : itm
             ));
-            innerWithLine = this.getInnerWithLine(inner);
         }
-        return <div className={cls} role="group" aria-label={ariaLabel}>{innerWithLine}</div>;
+        return <div className={cls} role="group" aria-label={ariaLabel}>{inner}</div>;
     }
 }

package/button/index.tsx

@@ -18,7 +18,6 @@ class Button extends React.PureComponent<ButtonProps> {
         ...BaseButton.propTypes,
         ...IconButton.propTypes,
     };
-    static elementType: string;
     constructor(props = {}) {
         super(props);
     }
@@ -35,6 +34,5 @@ class Button extends React.PureComponent<ButtonProps> {
         }
     }
 }
-Button.elementType = 'Button';
 
 export default Button;

package/checkbox/_story/checkbox.stories.js

@@ -31,8 +31,6 @@ 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

@@ -81,8 +81,6 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: noop,
         type: 'default',
     };
-    static elementType: string;
-
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;
 
@@ -237,27 +235,20 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         const name = inGroup && this.context.checkboxGroup.name;
         const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
 
-        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>
-            );
-        };
-
+        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}
+            </>
+        );
         return (
             // label is better than span, however span is here which is to solve gitlab issue #364
             <span
@@ -285,11 +276,15 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {renderContent()}
+                {
+                    props.isCardType ?
+                        <div>{renderContent()}</div> :
+                        renderContent()
+                }
             </span>
         );
     }
 }
-Checkbox.elementType = 'Checkbox';
+
 
 export default Checkbox;

package/checkbox/checkboxGroup.tsx

@@ -120,7 +120,6 @@ 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

@@ -1778,10 +1778,6 @@ body {
 .semi-button-block {
   width: 100%;
 }
-.semi-button-group {
-  display: flex;
-  flex-wrap: wrap;
-}
 .semi-button-group > .semi-button {
   margin: 0;
   padding-left: 0;
@@ -1820,46 +1816,13 @@ body {
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
+.semi-button-group > .semi-button:not(:last-child) .semi-button-content {
+  border-right: 1px var(--semi-color-border) solid;
+}
 .semi-button-group > .semi-button:last-child {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
 }
-.semi-button-group-line {
-  display: inline-flex;
-  align-items: center;
-  background-color: var(--semi-color-border);
-}
-.semi-button-group-line-primary {
-  background-color: var(--semi-color-primary);
-}
-.semi-button-group-line-secondary {
-  background-color: var(--semi-color-secondary);
-}
-.semi-button-group-line-tertiary {
-  background-color: var(--semi-color-tertiary);
-}
-.semi-button-group-line-warning {
-  background-color: var(--semi-color-warning);
-}
-.semi-button-group-line-danger {
-  background-color: var(--semi-color-danger);
-}
-.semi-button-group-line-disabled {
-  background-color: var(--semi-color-disabled-bg);
-}
-.semi-button-group-line-light {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-button-group-line-borderless {
-  background-color: transparent;
-}
-.semi-button-group-line::before {
-  display: block;
-  content: "";
-  width: 1px;
-  height: 20px;
-  background-color: var(--semi-color-border);
-}
 
 .semi-rtl .semi-button,
 .semi-portal-rtl .semi-button {
@@ -3508,7 +3471,7 @@ body {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: wrap;
   font-size: 14px;
   line-height: 20px;
@@ -3516,7 +3479,6 @@ 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;
@@ -3527,16 +3489,11 @@ 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;
@@ -3639,6 +3596,7 @@ body {
 }
 .semi-checkbox-cardType .semi-checkbox-inner {
   position: relative;
+  margin-right: 8px;
   flex-shrink: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-inner-display {
@@ -3647,18 +3605,22 @@ 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;
@@ -3760,7 +3722,9 @@ 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);
@@ -3778,24 +3742,21 @@ 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-vertical {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+.semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
+  margin-right: 0;
 }
-.semi-checkboxGroup-vertical-cardType {
-  row-gap: 16px;
+.semi-checkboxGroup-vertical .semi-checkbox {
+  margin-bottom: 12px;
 }
-.semi-checkboxGroup-vertical-pureCardType .semi-checkbox {
-  column-gap: 0;
+.semi-checkboxGroup-vertical .semi-checkbox:last-of-type {
+  margin-bottom: 0;
+}
+.semi-checkboxGroup-vertical-cardType .semi-checkbox {
+  margin-bottom: 16px;
 }
 
 .semi-rtl .semi-checkbox,
@@ -3807,10 +3768,43 @@ 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);
@@ -14627,8 +14621,9 @@ body {
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: relative;
   display: inline-flex;
-  column-gap: 8px;
+  flex-wrap: wrap;
   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);
   min-height: 20px;
   min-width: 16px;
@@ -14677,7 +14672,6 @@ body {
   border-radius: var(--semi-border-radius-small);
 }
 .semi-radio-buttonRadioGroup {
-  position: relative;
   padding: 4px;
   border-radius: var(--semi-border-radius-small);
   line-height: 16px;
@@ -14702,6 +14696,8 @@ body {
   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);
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
+  position: relative;
+  margin-right: 8px;
   flex-shrink: 0;
 }
 .semi-radio-cardRadioGroup .semi-radio-inner-display {
@@ -14712,6 +14708,8 @@ body {
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-0);
+  margin-left: 0;
+  padding-left: 0;
 }
 .semi-radio-cardRadioGroup .semi-radio-extra {
   font-weight: normal;
@@ -14768,18 +14766,19 @@ body {
   border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
-  display: inline-flex;
-  margin-top: 2px;
-  position: relative;
+  position: absolute;
+  display: inline-block;
+  top: 2px;
+  left: 0;
   width: 16px;
   height: 16px;
   vertical-align: sub;
   user-select: none;
 }
 .semi-radio-inner-display {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
@@ -14789,14 +14788,11 @@ body {
   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);
 }
 .semi-radio-inner-display .semi-icon {
+  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 14px;
 }
-.semi-radio-content {
-  display: flex;
-  flex-direction: column;
-}
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
 }
@@ -14805,11 +14801,14 @@ body {
 }
 .semi-radio-addon {
   user-select: none;
+  padding-left: 8px;
+  margin-left: 16px;
   color: var(--semi-color-text-0);
   display: inline-flex;
   align-items: center;
 }
 .semi-radio-addon-buttonRadio {
+  margin-left: 0;
   text-align: center;
   border-radius: var(--semi-border-radius-small);
   font-weight: 600;
@@ -14893,7 +14892,11 @@ body {
   color: var(--semi-color-disabled-text);
 }
 .semi-radio-extra {
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-shrink: 0;
   color: var(--semi-color-text-2);
+  padding-left: 24px;
   box-sizing: border-box;
 }
 .semi-radio-focus {
@@ -14908,21 +14911,25 @@ body {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.semi-radioGroup-vertical {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+.semi-radioGroup-vertical .semi-radio:last-of-type {
+  margin-bottom: 0;
 }
 .semi-radioGroup-vertical-default .semi-radio {
-  display: flex;
+  display: block;
+  margin-bottom: 12px;
 }
 .semi-radioGroup-vertical-card .semi-radio {
   display: flex;
+  margin-bottom: 16px;
 }
-.semi-radioGroup-horizontal {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 16px;
+.semi-radioGroup-horizontal .semi-radio {
+  margin-right: 16px;
+}
+.semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-right: 0;
+}
+.semi-radioGroup-horizontal-default {
+  display: inline-block;
 }
 .semi-radioGroup-buttonRadio {
   display: inline-block;
@@ -14946,10 +14953,59 @@ body {
 .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
   padding-left: 0;
 }
+.semi-rtl .semi-radio-inner,
+.semi-portal-rtl .semi-radio-inner {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-inner-display,
+.semi-portal-rtl .semi-radio-inner-display {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-addon,
+.semi-portal-rtl .semi-radio-addon {
+  padding-left: 0;
+  margin-left: 0;
+  padding-right: 8px;
+  margin-right: 16px;
+}
+.semi-rtl .semi-radio-addon-buttonRadio,
+.semi-portal-rtl .semi-radio-addon-buttonRadio {
+  margin-right: 0;
+}
+.semi-rtl .semi-radio-extra,
+.semi-portal-rtl .semi-radio-extra {
+  padding-left: 0;
+  padding-right: 24px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-inner,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-addon,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
+  margin-right: 0;
+  padding-right: 0;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-extra,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
+  padding-right: 0;
+}
 .semi-rtl .semi-radioGroup,
 .semi-portal-rtl .semi-radioGroup {
   direction: rtl;
 }
+.semi-rtl .semi-radioGroup-horizontal .semi-radio,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-left: 0;
+}
 
 .semi-rating {
   display: inline-block;
@@ -15779,7 +15835,6 @@ body {
 .semi-sidesheet-body {
   padding: 0 24px;
   flex: 1;
-  overflow: auto;
 }
 .semi-sidesheet-content {
   height: 100%;
@@ -19618,9 +19673,6 @@ body {
   user-select: none;
   cursor: not-allowed;
 }
-.semi-tree-option-list .semi-checkboxGroup-vertical {
-  row-gap: 0;
-}
 
 .semi-tree-option-list-block .semi-tree-option:hover {
   background-color: var(--semi-color-fill-0);