feat: button can set icon size (#135)

ikun-svelte · Aug 23, 2023 · d7cb31f · d7cb31f
1 parent 6ba748f
commit d7cb31f
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 30 deletions.
diff --git a/components/Button/__test__/__snapshots__/button.spec.ts.snap b/components/Button/__test__/__snapshots__/button.spec.ts.snap
@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KButton > props: button lg size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--lg\\" aria-hidden=\\"true\\">  </button>"`;
+exports[`Test: KButton > props: button lg size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--lg\\" aria-hidden=\\"true\\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 28px; height: 28px;\\"></div></div>  </button>"`;
 
-exports[`Test: KButton > props: button md size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\">  </button>"`;
+exports[`Test: KButton > props: button md size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 24px; height: 24px;\\"></div></div>  </button>"`;
 
-exports[`Test: KButton > props: button size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--large\\" aria-hidden=\\"true\\">  </button>"`;
-
-exports[`Test: KButton > props: button sm size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--sm\\" aria-hidden=\\"true\\">  </button>"`;
+exports[`Test: KButton > props: button sm size 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--sm\\" aria-hidden=\\"true\\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 16px; height: 16px;\\"></div></div>  </button>"`;
 
 exports[`Test: KButton > props: circle 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--circle\\" aria-hidden=\\"true\\">  </button>"`;
 
 exports[`Test: KButton > props: disabled 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-cur-disabled k-button--disabled\\" aria-hidden=\\"true\\">  </button>"`;
 
 exports[`Test: KButton > props: icon 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"icon-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 24px; height: 24px;\\"></div></div>  </button>"`;
 
+exports[`Test: KButton > props: iconSize 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"i-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 10086px; height: 10086px;\\"></div></div>  </button>"`;
+
 exports[`Test: KButton > props: isBorder 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--primary__border\\" aria-hidden=\\"true\\">  </button>"`;
 
 exports[`Test: KButton > props: round 1`] = `"<button style=\\"border-radius: 30px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\">  </button>"`;

diff --git a/components/Button/__test__/button.spec.ts b/components/Button/__test__/button.spec.ts
@@ -159,36 +159,54 @@ 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();
 	});
 
 	test('props: button sm size', async () => {
 		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();
 	});
 
 	test('props: button lg size', async () => {
 		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
@@ -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
+	}
 </script>
 
 <svelte:element
@@ -55,12 +62,11 @@
 	{...attrsInner}
 	{...$$restProps}>
 	{#if icon}
-		<KIcon {icon} color={`k-button--${type}__icon`} />
+		<KIcon {icon} color={`k-button--${type}__icon`} width={`${iconSizeInner}px`}  height={`${iconSizeInner}px`}/>
 	{/if}
 
 	{#if $$slots.default && icon}
-		<div class="ml-2" />
+		<div class="ml-1" />
 	{/if}
-
 	<slot />
 </svelte:element>
diff --git 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`.
 
 <demo src="../../../../example/button/size.svelte" github='Button'></demo>
 
 ## 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.
 
 <demo src="../../../../example/button/isBorder.svelte" github='Button'></demo>
 
@@ -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
@@ -3,9 +3,9 @@
 </script>
 
 <div class="flex items-center flex-wrap">
-	<KButton type="info" cls="mx-2" size="lg">lg</KButton>
-	<KButton type="error" cls="mx-2" size="md">md</KButton>
-	<KButton type="success" cls="mx-2" size="sm">sm</KButton>
+	<KButton type="info" cls="mx-2" size="lg">lg size</KButton>
+	<KButton type="error" cls="mx-2" size="md">md size</KButton>
+	<KButton type="success" cls="mx-2" size="sm">sm size</KButton>
 </div>
 
 <div class="flex items-center mt-3 flex-wrap">

diff --git a/preset/src/shortcuts/button.ts b/preset/src/shortcuts/button.ts
@@ -1,11 +1,12 @@
 export const buttonShortcuts: Record<string, string> = {
-  // 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',