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 @@
- Default
+ Default
- Default
+ Default
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
-export type ButtonGroupPublicProps = ExtractPublicPropTypes & SpaceProps
+export type ButtonGroupPublicProps = ExtractPublicPropTypes & Omit
export type ButtonGroupComponent = DefineComponent<
Omit & 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;
}
}
}