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

package/button/buttonGroup.tsx

@@ -1,9 +1,10 @@
-import React, { isValidElement, cloneElement } from 'react';
+import React, { isValidElement, cloneElement, ReactNode } 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 { Type, Size } from './Button';
+import { get } from 'lodash';
+import { Type, Size, ButtonProps } from './Button';
 
 import '@douyinfe/semi-foundation/button/button.scss';
 
@@ -39,9 +40,41 @@ 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.displayName'), get(item, 'type.name')].includes('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;
+        let inner: ReactNode[];
+        let innerWithLine: ReactNode[] = [];
         const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
@@ -50,7 +83,8 @@ 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}>{inner}</div>;
+        return <div className={cls} role="group" aria-label={ariaLabel}>{innerWithLine}</div>;
     }
 }

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

@@ -1778,6 +1778,10 @@ body {
 .semi-button-block {
   width: 100%;
 }
+.semi-button-group {
+  display: flex;
+  flex-wrap: wrap;
+}
 .semi-button-group > .semi-button {
   margin: 0;
   padding-left: 0;
@@ -1816,13 +1820,46 @@ 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 {
@@ -15309,7 +15346,6 @@ body {
 .semi-select-option-icon {
   width: 12px;
   color: transparent;
-  visibility: hidden;
   margin-right: 8px;
   display: flex;
   justify-content: center;
@@ -15350,7 +15386,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 +17430,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 +17460,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);