From d7cb31f2225b9d4e677a879287edb3f11e843f0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Wed, 23 Aug 2023 10:00:43 +0800 Subject: [PATCH] feat: button can set icon size (#135) --- .../__snapshots__/button.spec.ts.snap | 10 +++--- components/Button/__test__/button.spec.ts | 35 +++++++++++++++++++ components/Button/src/index.svelte | 18 ++++++---- docs/components/KButton.md | 30 ++++++++-------- docs/example/button/size.svelte | 6 ++-- preset/src/shortcuts/button.ts | 5 +-- 6 files changed, 74 insertions(+), 30 deletions(-) diff --git a/components/Button/__test__/__snapshots__/button.spec.ts.snap b/components/Button/__test__/__snapshots__/button.spec.ts.snap index d43da5a1..747c3e8a 100644 --- a/components/Button/__test__/__snapshots__/button.spec.ts.snap +++ b/components/Button/__test__/__snapshots__/button.spec.ts.snap @@ -1,12 +1,10 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Test: KButton > props: button lg size 1`] = `""`; +exports[`Test: KButton > props: button lg size 1`] = `""`; -exports[`Test: KButton > props: button md 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: button sm size 1`] = `""`; exports[`Test: KButton > props: circle 1`] = `""`; @@ -14,6 +12,8 @@ exports[`Test: KButton > props: disabled 1`] = `""`; +exports[`Test: KButton > props: iconSize 1`] = `""`; + exports[`Test: KButton > props: isBorder 1`] = `""`; exports[`Test: KButton > props: round 1`] = `""`; diff --git a/components/Button/__test__/button.spec.ts b/components/Button/__test__/button.spec.ts index bc762601..1d5ca3e5 100644 --- a/components/Button/__test__/button.spec.ts +++ b/components/Button/__test__/button.spec.ts @@ -159,12 +159,18 @@ describe('Test: KButton', () => { const instance = new KButton({ target: host, props: { + icon: 'i-carbon-settings', 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 as HTMLElement)!.innerHTML.includes( + 'k-button--primary__icon" style="width: 24px; height: 24px;"' + ) + ).toBeTruthy(); expect(host.innerHTML).matchSnapshot(); }); @@ -172,11 +178,17 @@ describe('Test: KButton', () => { const instance = new KButton({ target: host, props: { + icon: 'i-carbon-settings', size: 'sm' } }); expect(instance).toBeTruthy(); expect((host as HTMLElement)!.innerHTML.includes('k-button--sm')).toBeTruthy(); + expect( + (host as HTMLElement)!.innerHTML.includes( + 'k-button--primary__icon" style="width: 16px; height: 16px;"' + ) + ).toBeTruthy(); expect(host.innerHTML).matchSnapshot(); }); @@ -184,11 +196,17 @@ describe('Test: KButton', () => { const instance = new KButton({ target: host, props: { + icon: 'i-carbon-settings', size: 'lg' } }); expect(instance).toBeTruthy(); expect((host as HTMLElement)!.innerHTML.includes('k-button--lg')).toBeTruthy(); + expect( + (host as HTMLElement)!.innerHTML.includes( + 'k-button--primary__icon" style="width: 28px; height: 28px;"' + ) + ).toBeTruthy(); expect(host.innerHTML).matchSnapshot(); }); @@ -205,6 +223,23 @@ describe('Test: KButton', () => { expect(host.innerHTML).matchSnapshot(); }); + test('props: iconSize', async () => { + const instance = new KButton({ + target: host, + props: { + icon: 'i-carbon-settings', + iconSize: 10086 + } + }); + expect(instance).toBeTruthy(); + expect( + (host as HTMLElement)!.innerHTML.includes( + 'k-button--primary__icon" style="width: 10086px; height: 10086px;"' + ) + ).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 396c6cf1..8bcfd406 100644 --- a/components/Button/src/index.svelte +++ b/components/Button/src/index.svelte @@ -11,9 +11,9 @@ 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 + export let iconSize: null | number = null + export let size: 'md' | 'sm' | 'lg' = 'md' + export let isBorder = false const dispatch = createEventDispatcher() const handleClick = (e: Event) => { @@ -44,6 +44,13 @@ cls ) $: attrsInner = extend(attrs, to ? { href: to } : {}) + + let iconSizeInner = 24 + $: if(iconSize){ + iconSizeInner = iconSize + }else{ + iconSizeInner = size === 'md' ? 24 : size === 'sm' ? 16 : 28 + } {#if icon} - + {/if} {#if $$slots.default && icon} -
+
{/if} - diff --git a/docs/components/KButton.md b/docs/components/KButton.md index abc70885..febbdf4c 100644 --- a/docs/components/KButton.md +++ b/docs/components/KButton.md @@ -46,15 +46,14 @@ 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". +Use the `size` property to control the button size. +It supports enumerations such as `md`, `sm`, and `lg`. ## Button Border -Use the 'isBorder' property to determine if the button is bordered. -It accepts a "Boolean" value. +Use the `isBorder` property to determine if the button is bordered. @@ -74,16 +73,19 @@ Use the `to` attribute to set a specific url that you can click to jump to. ## Button Props -| Name | Type | Default | Description | -| -------- | ------------------ | ----------------------------------------------------- | --------------------------------------------------------- | -| icon | `string` | `-` | The class name of the icon, following the unocss standard | -| circle | `boolean` | `false` | Determine whether it's a circle button | -| to | `string` | `-` | Determine whether it's a link button | -| round | `string \| number` | `-` | Button's border radius | -| disabled | `boolean` | `false` | Disable the button | -| type | `enum` | `'success' / 'error' / 'warning' / 'info'/ 'primary'` | Button type | -| cls | `string` | `-` | Additional class for | -| attrs | `any` | `{}` | Additional attributes | +| Name | Type | Default | Description | +| -------- | ----------------------------------------------------- | ---------- | --------------------------------------------------------- | +| icon | `string` | `-` | The class name of the icon, following the unocss standard | +| circle | `boolean` | `false` | Determine whether it's a circle button | +| to | `string` | `-` | Determine whether it's a link button | +| round | `string \| number` | `-` | Button's border radius | +| disabled | `boolean` | `false` | Disable the button | +| type | `'success' / 'error' / 'warning' / 'info'/ 'primary'` | `primary'` | Button type | +| size | `'sm' / 'md' / 'lg'` | `md` | Button size | +| type | `boolean` | `false` | Border style button | +| iconSize | `number` | `24` | The icon size of the button | +| cls | `string` | `-` | Additional class for | +| attrs | `any` | `{}` | Additional attributes | ## Button Events diff --git a/docs/example/button/size.svelte b/docs/example/button/size.svelte index 5f330fc5..66e96cb1 100644 --- a/docs/example/button/size.svelte +++ b/docs/example/button/size.svelte @@ -3,9 +3,9 @@
- lg - md - sm + lg size + md size + sm size
diff --git a/preset/src/shortcuts/button.ts b/preset/src/shortcuts/button.ts index 9f09e66a..1b3cba10 100644 --- a/preset/src/shortcuts/button.ts +++ b/preset/src/shortcuts/button.ts @@ -1,11 +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', + // button-size '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--sm': '!rounded-full !p-2', 'k-button--circle--lg': '!rounded-full !p-3', 'k-button--primary': 'bg-ikun-primary-100 text-ikun-primary border-ikun-primary-100',