style: Fix the problem of wrong style of ButtonGroup with theme as ou… (#2328)

* style: Fix the problem of wrong style of ButtonGroup with theme as outline

* style: Negative css variables need to add -1 * to prevent DSM recognition errors

packages/semi-foundation/button/button.scss

@@ -387,6 +387,11 @@ $module: #{$prefix}-button;
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
+
+            &-outline:not(:last-child) {
+               border-right-color: transparent;
+               margin-right: -1 * $width-button_outline-border;
+            }
         }
 
         &-line {

packages/semi-foundation/button/constants.ts

@@ -9,7 +9,7 @@ const strings = {
     iconPositions: ['left', 'right'],
     htmlTypes: ['button', 'reset', 'submit'],
     btnTypes: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
-    themes: ['solid', 'borderless', 'light'],
+    themes: ['solid', 'borderless', 'light', 'outline'],
     DEFAULT_ICON_SIZE: 'default',
     DEFAULT_ICON_POSITION: 'left',
 } as const;

packages/semi-ui/button/_story/button.stories.jsx

@@ -135,6 +135,13 @@ export const ButtonGroupDemo = () => (
       <Button>剪切</Button>
     </ButtonGroup>
     <br />
+    <br />
+    <ButtonGroup theme={'outline'}>
+      <Button>拷贝</Button>
+      <Button>查询</Button>
+      <Button>剪切</Button>
+    </ButtonGroup>
+    <br />
   </div>
 );
 

packages/semi-ui/button/buttonGroup.tsx

@@ -8,7 +8,7 @@ import { Type, Size, ButtonProps } from './Button';
 
 import '@douyinfe/semi-foundation/button/button.scss';
 
-export type Theme = 'solid' | 'borderless' | 'light';
+export type Theme = 'solid' | 'borderless' | 'light' | 'outline';
 
 export interface ButtonGroupProps extends BaseProps {
     disabled?: boolean;
@@ -42,14 +42,13 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
 
     getInnerWithLine(inner) {
         const innerWithLine: ReactNode[] = [];
-        let lineCls = `${prefixCls}-group-line`;
         if (inner.length > 1) {
             inner.slice(0, -1).forEach((item, index) => {
                 const isButtonType = get(item, 'type.elementType') === 'Button';
                 const buttonProps = get(item, 'props') as ButtonProps;
-                if (buttonProps) {
-                    const { type, theme, disabled } = buttonProps;
-                    lineCls = classNames(
+                const { type, theme, disabled } = buttonProps ?? {};
+                if (isButtonType && theme !== 'outline') {
+                    const lineCls = classNames(
                         `${prefixCls}-group-line`,
                         `${prefixCls}-group-line-${theme ?? 'light'}`,
                         `${prefixCls}-group-line-${type ?? 'primary'}`,
@@ -57,8 +56,6 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                             [`${prefixCls}-group-line-disabled`]: disabled,
                         }
                     );
-                }
-                if (isButtonType) {
                     innerWithLine.push(item, <span className={lineCls} key={`line-${index}`} />);
                 } else {
                     innerWithLine.push(item);