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 <[email protected]>
ikun-svelte · Aug 23, 2023 · 6ba748f · 6ba748f
1 parent 01d57d3
commit 6ba748f
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 4 deletions.
diff --git 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`] = `"<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 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 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: 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: 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>"`;
 
 exports[`Test: KButton > props: to 1`] = `"<a 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\\" href=\\"https://github.com/ikun-svelte/ikun-ui\\">  </a>"`;

diff --git 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
@@ -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
@@ -44,6 +44,20 @@ Use the icon attribute to add icon.
 
 <demo src="../../../../example/button/icon.svelte" github='Button'></demo>
 
+## Button Size
+
+Use the 'size' property to control the button size.
+It supports enumerations such as "normal", "large", and "small".
+
+<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.
+
+<demo src="../../../../example/button/isBorder.svelte" github='Button'></demo>
+
 ## 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
@@ -0,0 +1,33 @@
+<script>
+	import { KButton } from '@ikun-ui/button';
+</script>
+
+<div class="flex items-center flex-wrap">
+	<KButton type="info" cls="mx-2" isBorder>large</KButton>
+	<KButton type="error" cls="mx-2" isBorder>normal</KButton>
+	<KButton type="success" cls="mx-2" isBorder>small</KButton>
+</div>
+
+<div class="flex items-center mt-3 flex-wrap">
+	<KButton icon="i-carbon-settings" type="info" cls="mx-2" isBorder>settings</KButton>
+	<KButton icon="i-carbon-logo-svelte" type="error" cls="mx-2" isBorder>svelte</KButton>
+	<KButton icon="i-carbon-logo-wechat" type="success" cls="mx-2" isBorder>wechat</KButton>
+</div>
+
+<div class="flex items-center mt-3 flex-wrap">
+	<KButton icon="i-carbon-settings" type="info" round="20" cls="mx-2" isBorder>
+		settings
+	</KButton>
+	<KButton icon="i-carbon-logo-svelte" type="error" round="20" cls="mx-2" isBorder>
+		svelte
+	</KButton>
+	<KButton icon="i-carbon-logo-wechat" type="success" round="20" cls="mx-2" isBorder>
+		wechat
+	</KButton>
+</div>
+
+<div class="flex items-center mt-3 flex-wrap">
+	<KButton icon="i-carbon-settings" type="info" circle cls="mx-2" isBorder></KButton>
+	<KButton icon="i-carbon-logo-svelte" type="error" circle cls="mx-2" isBorder></KButton>
+	<KButton icon="i-carbon-logo-wechat" type="success" circle cls="mx-2" isBorder></KButton>
+</div>
diff --git a/docs/example/button/size.svelte b/docs/example/button/size.svelte
@@ -0,0 +1,33 @@
+<script>
+	import { KButton } from '@ikun-ui/button';
+</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>
+</div>
+
+<div class="flex items-center mt-3 flex-wrap">
+	<KButton icon="i-carbon-settings" type="info" cls="mx-2" size="lg">settings</KButton>
+	<KButton icon="i-carbon-logo-svelte" type="error" cls="mx-2" size="md">svelte</KButton>
+	<KButton icon="i-carbon-logo-wechat" type="success" cls="mx-2" size="sm">wechat</KButton>
+</div>
+
+<div class="flex items-center mt-3 flex-wrap">
+	<KButton icon="i-carbon-settings" type="info" round="20" cls="mx-2" size="lg">
+		settings
+	</KButton>
+	<KButton icon="i-carbon-logo-svelte" type="error" round="20" cls="mx-2" size="md">
+		svelte
+	</KButton>
+	<KButton icon="i-carbon-logo-wechat" type="success" round="20" cls="mx-2" size="sm">
+		wechat
+	</KButton>
+</div>
+
+<div class="flex items-center mt-3 flex-wrap">
+	<KButton icon="i-carbon-settings" type="info" circle cls="mx-2" size="lg"></KButton>
+	<KButton icon="i-carbon-logo-svelte" type="error" circle cls="mx-2" size="md"></KButton>
+	<KButton icon="i-carbon-logo-wechat" type="success" circle cls="mx-2" size="sm"></KButton>
+</div>
diff --git a/preset/src/shortcuts/button.ts b/preset/src/shortcuts/button.ts
@@ -1,40 +1,48 @@
 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',
+	'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',
 	'k-button--primary__focus':
 		'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',
 	'k-button--success__focus':
 		'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',
 	'k-button--warning__focus':
 		'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'
 };