refactor: button group line (#1065)

* refactor: button group line

* fix: Button add elementType static property

packages/semi-foundation/button/button.scss

@@ -202,6 +202,9 @@ $module: #{$prefix}-button;
     }
 
     &-group {
+        display: flex;
+        flex-wrap: wrap;
+
         & > .#{$module} {
             margin: 0;
             padding-left: 0;
@@ -257,16 +260,50 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
-            &:not(:last-child) {
-                .#{$prefix}-button-content {
-                    border-right: $width-button_group-border $color-button_group-border-default solid;
-                }
-            }
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
         }
+
+        &-line {
+            display: inline-flex;
+            align-items: center;
+            background-color: $color-button_group-border-default;
+
+            &-primary {
+                background-color: $color-button_primary-bg-default;
+            }
+            &-secondary {
+                background-color: $color-button_secondary-bg-default;
+            }
+            &-tertiary {
+                background-color: $color-button_tertiary-bg-default;
+            }
+            &-warning {
+                background-color: $color-button_warning-bg-default;
+            }
+            &-danger {
+                background-color: $color-button_danger-bg-default;
+            }
+            &-disabled {
+                background-color: $color-button_disabled-bg-default;
+            }
+            &-light {
+                background-color: $color-button_light-bg-default;
+            }
+            &-borderless {
+                background-color: transparent;
+            }
+
+            &::before {
+                display: block;
+                content: '';
+                width: $width-button_group-border;
+                height: $height-button_group_line_default;
+                background-color: $color-button_group-border-default;
+            }
+        }
     }
 }
 

packages/semi-foundation/button/variables.scss

@@ -141,6 +141,7 @@ $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
+$height-button_group_line_default: 20px; // 分割线高度 - 默认
 
 $width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小

packages/semi-ui/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.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;
+        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>;
     }
 }

packages/semi-ui/button/index.tsx

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