From d7dcd5e1e2400782d948d994edd0fb531bce75e2 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Sun, 20 Nov 2022 23:31:29 +0800
Subject: [PATCH] fix(comp:button): the radius of button group always hidden

---
 .../__snapshots__/buttonGroup.spec.ts.snap    |  2 +-
 .../button/__tests__/buttonGroup.spec.ts      |  8 +++----
 packages/components/button/demo/Group.vue     |  4 ++--
 .../components/button/src/ButtonGroup.tsx     |  2 +-
 packages/components/button/src/types.ts       |  2 +-
 packages/components/button/style/index.less   | 24 +++++++++++--------
 6 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/components/button/__tests__/__snapshots__/buttonGroup.spec.ts.snap b/packages/components/button/__tests__/__snapshots__/buttonGroup.spec.ts.snap
index f892bc417..32292d9e5 100644
--- a/packages/components/button/__tests__/__snapshots__/buttonGroup.spec.ts.snap
+++ b/packages/components/button/__tests__/__snapshots__/buttonGroup.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`ButtonGroup > render work 1`] = `
-"<div class=\\"ix-space ix-button-group\\" style=\\"margin-bottom: -0px;\\">
+"<div class=\\"ix-space ix-button-group ix-button-group-compact\\" style=\\"margin-bottom: -0px;\\">
   <div class=\\"ix-space-item\\" style=\\"margin-right: 0px; padding-bottom: 0px;\\"><button class=\\"ix-button ix-button-default ix-button-md\\" type=\\"button\\"><span>default</span></button></div>
   <div class=\\"ix-space-item\\" style=\\"margin-right: 0px; padding-bottom: 0px;\\"><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>primary</span></button></div>
   <div class=\\"ix-space-item\\" style=\\"margin-right: 0px; padding-bottom: 0px;\\"><button class=\\"ix-button ix-button-default ix-button-lg\\" type=\\"button\\"><span>large</span></button></div>
diff --git a/packages/components/button/__tests__/buttonGroup.spec.ts b/packages/components/button/__tests__/buttonGroup.spec.ts
index 9212549c3..c6e402255 100644
--- a/packages/components/button/__tests__/buttonGroup.spec.ts
+++ b/packages/components/button/__tests__/buttonGroup.spec.ts
@@ -28,19 +28,19 @@ describe('ButtonGroup', () => {
   test('gap work', async () => {
     const wrapper = ButtonGroupMount({ props: { gap: 12 } })
 
-    expect(wrapper.classes()).toContain('ix-button-group-with-gap')
+    expect(wrapper.classes()).not.toContain('ix-button-group-compact')
 
     await wrapper.setProps({ gap: 0 })
 
-    expect(wrapper.classes()).not.toContain('ix-button-group-with-gap')
+    expect(wrapper.classes()).toContain('ix-button-group-compact')
 
     await wrapper.setProps({ gap: '0' })
 
-    expect(wrapper.classes()).not.toContain('ix-button-group-with-gap')
+    expect(wrapper.classes()).toContain('ix-button-group-compact')
 
     await wrapper.setProps({ gap: '' })
 
-    expect(wrapper.classes()).not.toContain('ix-button-group-with-gap')
+    expect(wrapper.classes()).toContain('ix-button-group-compact')
   })
 
   test('mode work', async () => {
diff --git a/packages/components/button/demo/Group.vue b/packages/components/button/demo/Group.vue
index 26baa12de..602e63fc2 100644
--- a/packages/components/button/demo/Group.vue
+++ b/packages/components/button/demo/Group.vue
@@ -1,11 +1,11 @@
 <template>
   <IxSpace>
     <IxButtonGroup>
-      <IxButton block>Default</IxButton>
+      <IxButton>Default</IxButton>
       <IxButton icon="setting" shape="square"></IxButton>
     </IxButtonGroup>
     <IxButtonGroup>
-      <IxButton block>Default</IxButton>
+      <IxButton>Default</IxButton>
       <IxButton icon="down" shape="square"></IxButton>
     </IxButtonGroup>
   </IxSpace>
diff --git a/packages/components/button/src/ButtonGroup.tsx b/packages/components/button/src/ButtonGroup.tsx
index 79522241c..2d6af35f6 100644
--- a/packages/components/button/src/ButtonGroup.tsx
+++ b/packages/components/button/src/ButtonGroup.tsx
@@ -25,7 +25,7 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       return normalizeClass({
         [prefixCls]: true,
-        [`${prefixCls}-with-gap`]: !!gap && gap !== '0',
+        [`${prefixCls}-compact`]: !gap || gap === '0',
       })
     })
 
diff --git a/packages/components/button/src/types.ts b/packages/components/button/src/types.ts
index 7f335cf66..8869db239 100644
--- a/packages/components/button/src/types.ts
+++ b/packages/components/button/src/types.ts
@@ -44,7 +44,7 @@ export const buttonGroupProps = {
 } as const
 
 export type ButtonGroupProps = ExtractInnerPropTypes<typeof buttonGroupProps>
-export type ButtonGroupPublicProps = ExtractPublicPropTypes<typeof buttonGroupProps> & SpaceProps
+export type ButtonGroupPublicProps = ExtractPublicPropTypes<typeof buttonGroupProps> & Omit<SpaceProps, 'size'>
 export type ButtonGroupComponent = DefineComponent<
   Omit<HTMLAttributes, keyof ButtonGroupPublicProps> & ButtonGroupPublicProps
 >
diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
index b72f6f02e..567f78926 100644
--- a/packages/components/button/style/index.less
+++ b/packages/components/button/style/index.less
@@ -296,10 +296,6 @@
 }
 
 .@{button-prefix}-group {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
   .@{button-prefix} {
     z-index: auto;
 
@@ -314,15 +310,23 @@
     }
   }
 
-  &:not(&-with-gap) {
-    .@{button-prefix} {
+  &-compact {
+    .@{space-prefix}-item:first-child .@{button-prefix} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .@{space-prefix}-item:last-child .@{button-prefix} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    .@{space-prefix}-item:not(:first-child):not(:last-child) .@{button-prefix} {
       border-radius: 0;
     }
 
-    .@{space-prefix}-item:not(:first-child) {
-      .@{button-prefix} {
-        margin-left: -1px;
-      }
+    .@{space-prefix}-item:not(:last-child) .@{button-prefix} {
+      margin-right: -1px;
     }
   }
 }