From 6ba748f98064d673e26d913aacb6b43d4c8d8582 Mon Sep 17 00:00:00 2001 From: jobs <53618422+jobsofferings@users.noreply.github.com> Date: Wed, 23 Aug 2023 09:19:37 +0800 Subject: [PATCH] feat: Button add button size and isBorder (#112) * feat: Button add button size and isBorder * feat: Button add button size and isBorder * fix: change size enum * fix: change ui * fix: change ui --------- Co-authored-by: Jobs --- .../__snapshots__/button.spec.ts.snap | 10 ++++ components/Button/__test__/button.spec.ts | 50 +++++++++++++++++++ components/Button/src/index.svelte | 13 ++++- docs/components/KButton.md | 14 ++++++ docs/example/button/isBorder.svelte | 33 ++++++++++++ docs/example/button/size.svelte | 33 ++++++++++++ preset/src/shortcuts/button.ts | 14 ++++-- 7 files changed, 163 insertions(+), 4 deletions(-) create mode 100644 docs/example/button/isBorder.svelte create mode 100644 docs/example/button/size.svelte diff --git a/components/Button/__test__/__snapshots__/button.spec.ts.snap b/components/Button/__test__/__snapshots__/button.spec.ts.snap index 9632651b..d43da5a1 100644 --- a/components/Button/__test__/__snapshots__/button.spec.ts.snap +++ b/components/Button/__test__/__snapshots__/button.spec.ts.snap @@ -1,11 +1,21 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`Test: KButton > props: button lg size 1`] = `""`; + +exports[`Test: KButton > props: button md size 1`] = `""`; + +exports[`Test: KButton > props: button size 1`] = `""`; + +exports[`Test: KButton > props: button sm size 1`] = `""`; + exports[`Test: KButton > props: circle 1`] = `""`; exports[`Test: KButton > props: disabled 1`] = `""`; exports[`Test: KButton > props: icon 1`] = `""`; +exports[`Test: KButton > props: isBorder 1`] = `""`; + exports[`Test: KButton > props: round 1`] = `""`; exports[`Test: KButton > props: to 1`] = `" "`; diff --git a/components/Button/__test__/button.spec.ts b/components/Button/__test__/button.spec.ts index 7927a71f..bc762601 100644 --- a/components/Button/__test__/button.spec.ts +++ b/components/Button/__test__/button.spec.ts @@ -155,6 +155,56 @@ describe('Test: KButton', () => { expect(host.innerHTML).matchSnapshot(); }); + test('props: button md size', async () => { + const instance = new KButton({ + target: host, + props: { + size: 'md' + } + }); + expect(instance).toBeTruthy(); + expect(!(host as HTMLElement)!.innerHTML.includes('k-button--sm')).toBeTruthy(); + expect(!(host as HTMLElement)!.innerHTML.includes('k-button--lg')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: button sm size', async () => { + const instance = new KButton({ + target: host, + props: { + size: 'sm' + } + }); + expect(instance).toBeTruthy(); + expect((host as HTMLElement)!.innerHTML.includes('k-button--sm')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: button lg size', async () => { + const instance = new KButton({ + target: host, + props: { + size: 'lg' + } + }); + expect(instance).toBeTruthy(); + expect((host as HTMLElement)!.innerHTML.includes('k-button--lg')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + + test('props: isBorder', async () => { + const instance = new KButton({ + target: host, + props: { + isBorder: true, + type: 'primary' + } + }); + expect(instance).toBeTruthy(); + expect((host as HTMLElement)!.innerHTML.includes('k-button--primary__border')).toBeTruthy(); + expect(host.innerHTML).matchSnapshot(); + }); + test('event: should trigger click event', async () => { const mockFn = vi.fn(); const instance = new KButton({ diff --git a/components/Button/src/index.svelte b/components/Button/src/index.svelte index bffae4a0..396c6cf1 100644 --- a/components/Button/src/index.svelte +++ b/components/Button/src/index.svelte @@ -11,6 +11,8 @@ export let attrs = {} export let type: IKunTypePro = 'primary' export let disabled = false + export let size: 'md' | 'sm' | 'lg' = 'md' + export let isBorder = false // todo: button size const dispatch = createEventDispatcher() @@ -28,8 +30,17 @@ { [`${prefixCls}__active ${prefixCls}__focus ${prefixCls}__hover`]: !disabled, 'k-cur-disabled k-button--disabled': disabled, - 'k-button--circle': circle + 'k-button--circle': circle, + 'k-button--circle--sm': circle && size === 'sm', + 'k-button--circle--lg': circle && size === 'lg', }, + { + 'k-button--sm': size === 'sm', + 'k-button--lg': size === 'lg' + }, + { + [`k-button--${type}__border`]: isBorder + }, cls ) $: attrsInner = extend(attrs, to ? { href: to } : {}) diff --git a/docs/components/KButton.md b/docs/components/KButton.md index 758fadb3..abc70885 100644 --- a/docs/components/KButton.md +++ b/docs/components/KButton.md @@ -44,6 +44,20 @@ Use the icon attribute to add icon. +## Button Size + +Use the 'size' property to control the button size. +It supports enumerations such as "normal", "large", and "small". + + + +## Button Border + +Use the 'isBorder' property to determine if the button is bordered. +It accepts a "Boolean" value. + + + ## Button Group Displayed as a button group, can be used to group a series of similar operations. diff --git a/docs/example/button/isBorder.svelte b/docs/example/button/isBorder.svelte new file mode 100644 index 00000000..c57ffd85 --- /dev/null +++ b/docs/example/button/isBorder.svelte @@ -0,0 +1,33 @@ + + +
+ large + normal + small +
+ +
+ settings + svelte + wechat +
+ +
+ + settings + + + svelte + + + wechat + +
+ +
+ + + +
diff --git a/docs/example/button/size.svelte b/docs/example/button/size.svelte new file mode 100644 index 00000000..5f330fc5 --- /dev/null +++ b/docs/example/button/size.svelte @@ -0,0 +1,33 @@ + + +
+ lg + md + sm +
+ +
+ settings + svelte + wechat +
+ +
+ + settings + + + svelte + + + wechat + +
+ +
+ + + +
diff --git a/preset/src/shortcuts/button.ts b/preset/src/shortcuts/button.ts index 59075180..9f09e66a 100644 --- a/preset/src/shortcuts/button.ts +++ b/preset/src/shortcuts/button.ts @@ -1,9 +1,12 @@ export const buttonShortcuts: Record = { - // button + // button 'k-button--disabled': 'opacity-50', - 'k-button--base': 'rounded k-border cursor-pointer f-c px-2 py-1 text-base w-fit', + 'k-button--sm': 'text-sm px-1.5 py-0.8', + 'k-button--lg': 'text-lg px-3 py-2', 'k-button--circle': '!rounded-full p-2', + 'k-button--circle--sm': '!rounded-full !p-1', + 'k-button--circle--lg': '!rounded-full !p-3', 'k-button--primary': 'bg-ikun-primary-100 text-ikun-primary border-ikun-primary-100', 'k-button--primary__active': 'active:border-ikun-primary active:k-btn-shadow--primary', @@ -11,6 +14,7 @@ export const buttonShortcuts: Record = { 'focus-visible:border-ikun-primary focus-visible:k-btn-shadow--primary', 'k-button--primary__hover': 'hover:border-ikun-primary', 'k-button--primary__icon': 'text-ikun-primary', + 'k-button--primary__border': 'border-ikun-primary', 'k-button--success': 'bg-ikun-success-100 text-ikun-success border-ikun-success-100', 'k-button--success__active': 'active:border-ikun-success active:k-btn-shadow--success', @@ -18,12 +22,14 @@ export const buttonShortcuts: Record = { 'focus-visible:border-ikun-success focus-visible:k-btn-shadow--success', 'k-button--success__hover': 'hover:border-ikun-success', 'k-button--success__icon': 'text-ikun-success', + 'k-button--success__border': 'border-ikun-success', 'k-button--error': 'bg-ikun-error-100 text-ikun-error border-ikun-error-100', 'k-button--error__active': 'active:border-ikun-error active:k-btn-shadow--error', 'k-button--error__focus': 'focus-visible:border-ikun-error focus-visible:k-btn-shadow--error', 'k-button--error__hover': 'hover:border-ikun-error', 'k-button--error__icon': 'text-ikun-error', + 'k-button--error__border': 'border-ikun-error', 'k-button--warning': 'bg-ikun-warning-100 text-ikun-warning border-ikun-warning-100', 'k-button--warning__active': 'active:border-ikun-warning active:k-btn-shadow--warning', @@ -31,10 +37,12 @@ export const buttonShortcuts: Record = { 'focus-visible:border-ikun-warning focus-visible:k-btn-shadow--warning', 'k-button--warning__hover': 'hover:border-ikun-warning', 'k-button--warning__icon': 'text-ikun-warning', + 'k-button--warning__border': 'border-ikun-warning', 'k-button--info': 'bg-ikun-info-100 text-ikun-info border-ikun-info-100', 'k-button--info__active': 'active:border-ikun-info active:k-btn-shadow--info', 'k-button--info__focus': 'focus-visible:border-ikun-info focus-visible:k-btn-shadow--info', 'k-button--info__hover': 'hover:border-ikun-info', - 'k-button--info__icon': 'text-ikun-info' + 'k-button--info__icon': 'text-ikun-info', + 'k-button--info__border': 'border-ikun-info' };