From a25fdf6ee95d9f83647fe0dc20ee2980fbf38d99 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:09:02 -0800
Subject: [PATCH] feat(elements): allow setting size of checkbox to be smaller

---
 src/lib/elements/forms/inputCheckbox.svelte            |  3 +++
 .../project-[project]/overview/keys/checkbox.svelte    | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index e2c09629c..ba4d1037f 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -11,6 +11,7 @@
         element?: HTMLInputElement | undefined;
         indeterminate?: boolean;
         wrapperTag?: FormItemTag;
+        size?: 'small' | 'medium';
     }
 
     export let id: string;
@@ -20,6 +21,7 @@
     export let disabled = false;
     export let element: HTMLInputElement | undefined = undefined;
     export let wrapperTag: FormItemTag = 'li';
+    export let size: $$Props['size'] = 'medium';
     let error: string;
 
     const handleInvalid = (event: Event) => {
@@ -44,6 +46,7 @@
                 {disabled}
                 {required}
                 {...$$restProps}
+                class:is-small={size === 'small'}
                 type="checkbox"
                 bind:this={element}
                 bind:checked
diff --git a/src/routes/console/project-[project]/overview/keys/checkbox.svelte b/src/routes/console/project-[project]/overview/keys/checkbox.svelte
index cad6cd09c..4e4553957 100644
--- a/src/routes/console/project-[project]/overview/keys/checkbox.svelte
+++ b/src/routes/console/project-[project]/overview/keys/checkbox.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
     export let indeterminate = false;
     export let checked = false;
+    export let fontSize: $$Props['fontSize'] = 'medium';
 
     interface $$Props extends Partial<HTMLInputElement> {
         indeterminate?: boolean;
         checked?: boolean;
+        fontSize?: 'small' | 'medium';
     }
 </script>
 
-<input type="checkbox" bind:checked {...$$restProps} bind:indeterminate on:change />
+<input
+    class:is-small={fontSize === 'small'}
+    type="checkbox"
+    bind:checked
+    {...$$restProps}
+    bind:indeterminate
+    on:change />