style: modify style and code format of button components. (#144)

* style(Button): modify style and code format of button components. 1.code format, complete missing symbols; 2.style modify, modify the size of the button icon. * test: updated test snap --------- Co-authored-by: baiwusanyu-c <[email protected]>
ikun-svelte · Aug 28, 2023 · 52fadcd · 52fadcd
1 parent 2179449
commit 52fadcd
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 54 deletions.
diff --git a/components/Button/__test__/__snapshots__/button.spec.ts.snap b/components/Button/__test__/__snapshots__/button.spec.ts.snap
@@ -1,16 +1,16 @@
 // 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\\"><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 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: 20px; height: 20px;\\"></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\\"><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 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: 16px; height: 16px;\\"></div></div>  </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: 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: 12px; height: 12px;\\"></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: 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: 16px; height: 16px;\\"></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>"`;
 

diff --git a/components/Button/__test__/button.spec.ts b/components/Button/__test__/button.spec.ts
@@ -168,7 +168,7 @@ describe('Test: KButton', () => {
 		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;"'
+				'k-button--primary__icon" style="width: 16px; height: 16px;"'
 			)
 		).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
@@ -186,7 +186,7 @@ describe('Test: KButton', () => {
 		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;"'
+				'k-button--primary__icon" style="width: 12px; height: 12px;"'
 			)
 		).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
@@ -204,7 +204,7 @@ describe('Test: KButton', () => {
 		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;"'
+				'k-button--primary__icon" style="width: 20px; height: 20px;"'
 			)
 		).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();

diff --git a/components/Button/src/index.svelte b/components/Button/src/index.svelte
@@ -1,70 +1,76 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
-	import { KIcon } from '@ikun-ui/icon'
-	import { extend } from 'baiwusanyu-utils'
-	import { createCls, type IKunTypePro } from '@ikun-ui/utils'
-	export let to: HTMLAnchorElement['href'] = ''
-	export let icon = ''
-	export let round: string | number = ''
-	export let circle = false
-	export let cls = ''
-	export let attrs = {}
-	export let type: IKunTypePro = 'primary'
-	export let disabled = false
-	export let iconSize: null | number = null
-	export let size: 'md' | 'sm' | 'lg' = 'md'
-	export let isBorder = false
+	import { createEventDispatcher } from 'svelte';
+	import { KIcon } from '@ikun-ui/icon';
+	import { extend } from 'baiwusanyu-utils';
+	import { createCls, type IKunTypePro } from '@ikun-ui/utils';
+	export let to: HTMLAnchorElement['href'] = '';
+	export let icon = '';
+	export let round: string | number = '';
+	export let circle = false;
+	export let cls = '';
+	export let attrs = {};
+	export let type: IKunTypePro = 'primary';
+	export let disabled = false;
+	export let iconSize: null | number = null;
+	export let size: 'md' | 'sm' | 'lg' = 'md';
+	export let isBorder = false;
 
-	let btnRef:null | HTMLElement = null
-	let animationCls = ''
+	let btnRef: null | HTMLElement = null;
+	let animationCls = '';
 	const handleAnimation = () => {
-		if(btnRef as HTMLElement){
-			animationCls = `k-button--${type}__animate`
+		if (btnRef as HTMLElement) {
+			animationCls = `k-button--${type}__animate`;
 			setTimeout(() => {
 				animationCls = '';
 			}, 310);
 		}
-	}
+	};
 
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher();
 	const handleClick = (e: Event) => {
 		if (disabled) {
-			e.preventDefault()
+			e.preventDefault();
 		}
 		if (!to && !disabled) {
-			dispatch('click', e)
-			handleAnimation()
+			dispatch('click', e);
+			handleAnimation();
 		}
-	}
+	};
 
-	$: prefixCls = `k-button--${type}`
+	$: prefixCls = `k-button--${type}`;
 	$: cnames = createCls(
 		'k-button--base',
 		prefixCls,
 		{
 			[`${prefixCls}__active ${prefixCls}__focus ${prefixCls}__hover`]: !disabled,
 			'k-cur-disabled k-button--disabled': disabled,
 			'k-button--circle': circle,
-      'k-button--circle--sm': circle && size === 'sm',
-      'k-button--circle--lg': circle && size === 'lg',
+			'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
 		},
-    {
-      'k-button--sm': size === 'sm',
-      'k-button--lg': size === 'lg'
-    },
-    {
-      [`k-button--${type}__border`]: isBorder
-    },
 		cls
-	)
+	);
 
-	$: attrsInner = extend(attrs, to ? { href: to } : {})
+	$: attrsInner = extend(attrs, to ? { href: to } : {});
+
+	enum EButtonIconSize {
+		'lg' = 20,
+		'md' = 16,
+		'sm' = 12
+	}
 
-	let iconSizeInner = 24
-	$: if(iconSize){
-		iconSizeInner = iconSize
-	}else{
-		iconSizeInner = size === 'md' ? 24 : size === 'sm' ? 16 : 28
+	let iconSizeInner = EButtonIconSize.md;
+	$: if (iconSize) {
+		iconSizeInner = iconSize;
+	} else {
+		iconSizeInner = size && EButtonIconSize[size] ? EButtonIconSize[size] : EButtonIconSize.md;
 	}
 </script>
 
@@ -76,12 +82,15 @@
 	aria-hidden="true"
 	on:click={handleClick}
 	{...attrsInner}
-	{...$$restProps}>
+	{...$$restProps}
+>
 	{#if icon}
-		<KIcon {icon}
-			   color={`k-button--${type}__icon`}
-			   width={`${iconSizeInner}px`}
-			   height={`${iconSizeInner}px`}/>
+		<KIcon
+			{icon}
+			color={`k-button--${type}__icon`}
+			width={`${iconSizeInner}px`}
+			height={`${iconSizeInner}px`}
+		/>
 	{/if}
 
 	{#if $$slots.default && icon}