diff --git a/components/button/__tests__/button-733.spec.ts b/components/button/__tests__/button-733.spec.ts new file mode 100644 index 00000000..bc44ad50 --- /dev/null +++ b/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'); + }); +}); \ No newline at end of file diff --git a/components/button/button.tsx b/components/button/button.tsx index 96ef040b..1562ca3c 100644 --- a/components/button/button.tsx +++ b/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; @@ -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({ ); }, -}); +}); \ No newline at end of file diff --git a/components/button/style/index.less b/components/button/style/index.less index 30538713..0aea9466 100644 --- a/components/button/style/index.less +++ b/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); + } }