change: kind prop to type in toggle group (#181)

huntabyte · Nov 14, 2023 · b9182d7 · b9182d7
1 parent fcfcacb
commit b9182d7
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/.changeset/purple-carrots-check.md b/.changeset/purple-carrots-check.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+change: `kind` prop to `type` in toggle group
diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
@@ -4,10 +4,9 @@
 	import { toggleVariants } from "@/components/ui/toggle";
 
 	let value: string[] | undefined = undefined;
-	$: console.log(value);
 </script>
 
-<ToggleGroup.Root bind:value kind="multiple">
+<ToggleGroup.Root bind:value type="multiple">
 	<ToggleGroup.Item
 		class={toggleVariants({ variant: "default" })}
 		aria-label="toggle bold"

diff --git a/src/lib/bits/toggle-group/components/ToggleGroup.svelte b/src/lib/bits/toggle-group/components/ToggleGroup.svelte
@@ -6,7 +6,7 @@
 	type T = $$Generic<"single" | "multiple">;
 
 	type $$Props = Props<T>;
-	export let kind: $$Props["kind"] = "single" as T;
+	export let type: $$Props["type"] = "single" as T;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let value: $$Props["value"] = undefined;
@@ -20,7 +20,7 @@
 		updateOption
 	} = setCtx<T>({
 		disabled,
-		type: kind,
+		type,
 		defaultValue: value,
 		loop,
 		orientation,
@@ -43,7 +43,7 @@
 	$: value !== undefined && localValue.set(value);
 	$: updateOption("disabled", disabled);
 	$: updateOption("loop", loop);
-	$: updateOption("type", kind);
+	$: updateOption("type", type);
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;

diff --git a/src/lib/bits/toggle-group/types.ts b/src/lib/bits/toggle-group/types.ts
@@ -10,10 +10,10 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
 
 type Props<T extends "single" | "multiple"> = Expand<
-	OmitValue<CreateToggleGroupProps> & {
+	OmitValue<CreateToggleGroupProps<T>> & {
 		value?: CreateToggleGroupProps<T>["defaultValue"];
 		onValueChange?: OnChangeFn<CreateToggleGroupProps<T>["defaultValue"]>;
-		kind?: T;
+		type?: T;
 	}
 > &
 	AsChild &

diff --git a/src/tests/toggle-group/ToggleGroupMultipleTest.svelte b/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
@@ -17,7 +17,7 @@
 
 <main>
 	<button data-testid="binding" on:click={() => (value = ["4"])}>{value}</button>
-	<ToggleGroup.Root data-testid="root" bind:value {...$$restProps} kind="multiple">
+	<ToggleGroup.Root data-testid="root" bind:value {...$$restProps} type="multiple">
 		{#each items as { value, disabled }}
 			<ToggleGroup.Item {value} {disabled} data-testid="item-{value}">
 				{value}