feat(button): 增加 circle 配置项 (#733)

components/button/__tests__/button-733.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FButton from '../button';
+
+describe('FButton circle prop (#733)', () => {
+    it('circle prop not passed → fes-btn-circle class NOT present', () => {
+        const wrapper = mount(FButton, {
+            props: {},
+            slots: { default: 'Button' },
+        });
+        expect(wrapper.classes()).not.toContain('fes-btn-circle');
+    });
+
+    it('circle true → fes-btn-circle class IS present', () => {
+        const wrapper = mount(FButton, {
+            props: { circle: true },
+            slots: { default: 'Button' },
+        });
+        expect(wrapper.classes()).toContain('fes-btn-circle');
+    });
+
+    it('circle true with type=primary → both fes-btn-type-primary and fes-btn-circle present', () => {
+        const wrapper = mount(FButton, {
+            props: { circle: true, type: 'primary' },
+            slots: { default: 'Button' },
+        });
+        expect(wrapper.classes()).toContain('fes-btn-type-primary');
+        expect(wrapper.classes()).toContain('fes-btn-circle');
+    });
+
+    it('circle true with size=small → both fes-btn-small and fes-btn-circle present', () => {
+        const wrapper = mount(FButton, {
+            props: { circle: true, size: 'small' },
+            slots: { default: 'Button' },
+        });
+        expect(wrapper.classes()).toContain('fes-btn-small');
+        expect(wrapper.classes()).toContain('fes-btn-circle');
+    });
+});

components/button/button.tsx

@@ -52,6 +52,10 @@ export const buttonProps = {
         type: String as PropType<'left' | 'right'>,
         default: 'left',
     },
+    circle: {
+        type: Boolean,
+        default: false,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>;
@@ -101,6 +105,7 @@ export default defineComponent({
             props.long && `${prefixCls}-long`,
             props.size !== 'middle' && `${prefixCls}-${props.size}`,
             props.loading && 'is-loading',
+            props.circle && `${prefixCls}-circle`,
         ]);
 
         return () => (
@@ -120,4 +125,4 @@ export default defineComponent({
             </button>
         );
     },
-});
+});

components/button/style/index.less

@@ -254,11 +254,20 @@
         --f-btn-height: @btn-height-lg;
         --f-btn-font-size: calc(var(--f-font-size-base) + 2px);
     }
-    &-small {
+        &-small {
         --f-btn-min-width: @btn-min-width-sm;
         --f-btn-height: @btn-height-sm;
         --f-btn-padding: @btn-padding-sm;
         --f-btn-font-size: calc(var(--f-font-size-base) - 2px);
         --f-btn-border-radius: var(--f-btn-border-radius-sm);
     }
+
+    &-circle {
+        border-radius: 50%;
+        padding: 0;
+    }
+}
+        --f-btn-font-size: calc(var(--f-font-size-base) - 2px);
+        --f-btn-border-radius: var(--f-btn-border-radius-sm);
+    }
 }