fix(Radio): class is reactive including child components

N00nDay · Oct 12, 2022 · 24ada7d · 24ada7d
1 parent f79255e
commit 24ada7d
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/src/lib/components/radio/Description.svelte b/src/lib/components/radio/Description.svelte
@@ -20,7 +20,7 @@
 	const { id }: { id: string } = getContext(RADIO_GROUP_RADIO_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>
 
 <span id={id ? `${id}-description` : undefined} class={finalClass} style={$$props.style}

diff --git a/src/lib/components/radio/GroupLabel.svelte b/src/lib/components/radio/GroupLabel.svelte
@@ -14,7 +14,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 for={name} class={finalClass} style={$$props.style}><slot /></legend>
diff --git a/src/lib/components/radio/Label.svelte b/src/lib/components/radio/Label.svelte
@@ -20,7 +20,7 @@
 	const { id }: { id: string } = getContext(RADIO_GROUP_RADIO_CONTEXT_ID);
 
 	const defaultClass = 'font-medium cursor-pointer text-light-content dark:text-dark-content';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <label for={id ? id : undefined} class={finalClass} style={$$props.style}><slot /></label>
diff --git a/src/lib/components/radio/Radio.svelte b/src/lib/components/radio/Radio.svelte
@@ -35,13 +35,15 @@
 		$selected = value;
 	}
 
-	let defaultClass =
-		'radio bg-light-surface dark:bg-dark-surface text-light-surface dark:text-dark-surface light-border dark:dark-border checked:bg-none border checked:border-primary group-hover:border-primary dark:checked:border-primary dark:group-hover:border-primary group-focus:border-primary dark:group-focus:border-primary active:border-primary dark:active:border-primary focus:active:border-primary dark:focus:active:border-primary rounded-full cursor-pointer h-6 w-6';
-	if (type === 'pill') {
+	let defaultClass = '';
+	if (type === 'default') {
+		defaultClass =
+			'radio bg-light-surface dark:bg-dark-surface text-light-surface dark:text-dark-surface light-border dark:dark-border checked:bg-none border checked:border-primary group-hover:border-primary dark:checked:border-primary dark:group-hover:border-primary group-focus:border-primary dark:group-focus:border-primary active:border-primary dark:active:border-primary focus:active:border-primary dark:focus:active:border-primary rounded-full cursor-pointer h-6 w-6';
+	} else if (type === 'pill') {
 		defaultClass =
 			'group relative border light-border dark:dark-border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium sm:flex-1 cursor-pointer focus:outline-none';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 {#if type === 'default'}

diff --git a/src/lib/components/radio/RadioGroup.svelte b/src/lib/components/radio/RadioGroup.svelte
@@ -22,11 +22,11 @@
 
 	let defaultClass = 'mt-1 grid-cols-4 gap-2';
 	if (type === 'default') {
-		defaultClass += ' space-y-4';
+		defaultClass = defaultClass + ' space-y-4';
 	} else if (type === 'pill') {
-		defaultClass += ' grid';
+		defaultClass = defaultClass + ' grid';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div>