fix(Checkbox): class is reactive including all child components

N00nDay · Oct 14, 2022 · 7fe0de9 · 7fe0de9
1 parent bd9d3e5
commit 7fe0de9
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git a/src/lib/components/checkbox/Checkbox.svelte b/src/lib/components/checkbox/Checkbox.svelte
@@ -24,7 +24,7 @@
 
 	const defaultClass =
 		'checkbox checked:bg-primary dark:checked:bg-primary hover:border-primary dark:hover:border-primary bg-light-surface dark:bg-dark-surface h-6 w-6 text-primary light-border-base dark:dark-border-base rounded-md cursor-pointer';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div class="relative flex items-start">

diff --git a/src/lib/components/checkbox/CheckboxGroup.svelte b/src/lib/components/checkbox/CheckboxGroup.svelte
@@ -9,7 +9,7 @@
 	export let inline = false;
 
 	const defaultClass = 'space-y-5 mt-2';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 
 	setContext(CHECKBOX_GROUP_CONTEXT_ID, {
 		checkbox: true,

diff --git a/src/lib/components/checkbox/Description.svelte b/src/lib/components/checkbox/Description.svelte
@@ -21,7 +21,7 @@
 	const { name }: { name: string } = getContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID);
 
 	const defaultClass = 'text-light-secondary-content dark:text-dark-secondary-content';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 {#if inline}

diff --git a/src/lib/components/checkbox/GroupLabel.svelte b/src/lib/components/checkbox/GroupLabel.svelte
@@ -3,7 +3,7 @@
 
 	const defaultClass =
 		'text-light-secondary-content dark:text-dark-secondary-content font-medium text-sm';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <legend class={finalClass} style={$$props.style}><slot /></legend>
diff --git a/src/lib/components/checkbox/Label.svelte b/src/lib/components/checkbox/Label.svelte
@@ -20,7 +20,7 @@
 	const { name }: { name: string } = getContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID);
 
 	const defaultClass = 'font-medium text-light-content dark:text-dark-content cursor-pointer';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <label for={name} class={finalClass} style={$$props.style}><slot /></label>