fix(comp:button): the radius of button group always hidden (#1290)

IDuxFE · Nov 21, 2022 · 714f588 · 714f588
1 parent 5a9eb9d
commit 714f588
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     }
   }
 }