docs: update command input & select multiple-selection styles (#1235)

Co-authored-by: Davis SHYAKA <[email protected]>
huntabyte · Feb 21, 2025 · f6df8ef · f6df8ef
1 parent 19b63ac
commit f6df8ef
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/docs/src/lib/components/demos/command-demo-dialog.svelte b/docs/src/lib/components/demos/command-demo-dialog.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Command, Dialog } from "bits-ui";
-	import Sticker from "phosphor-svelte/lib/Sticker";
+	import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
 	import CodeBlock from "phosphor-svelte/lib/CodeBlock";
 	import Palette from "phosphor-svelte/lib/Palette";
-	import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
 	import RadioButton from "phosphor-svelte/lib/RadioButton";
+	import Sticker from "phosphor-svelte/lib/Sticker";
 	import Textbox from "phosphor-svelte/lib/Textbox";
 
 	let dialogOpen = $state(false);
@@ -43,7 +43,7 @@
 				class="divide-border border-muted bg-background flex h-full w-full flex-col divide-y self-start overflow-hidden rounded-xl border"
 			>
 				<Command.Input
-					class="focus-override h-input bg-background placeholder:text-foreground-alt/50 focus:outline-hidden inline-flex w-[296px] truncate rounded-xl px-4 text-sm transition-colors focus:ring-0"
+					class="focus-override h-input bg-background placeholder:text-foreground-alt/50 focus:outline-hidden inline-flex truncate rounded-xl px-4 text-sm transition-colors focus:ring-0"
 					placeholder="Search for something..."
 				/>
 				<Command.List class="max-h-[280px] overflow-y-auto overflow-x-hidden px-2 pb-2">

diff --git a/docs/src/lib/components/demos/command-demo.svelte b/docs/src/lib/components/demos/command-demo.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { Command } from "bits-ui";
-	import Sticker from "phosphor-svelte/lib/Sticker";
+	import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
 	import CodeBlock from "phosphor-svelte/lib/CodeBlock";
 	import Palette from "phosphor-svelte/lib/Palette";
-	import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
 	import RadioButton from "phosphor-svelte/lib/RadioButton";
+	import Sticker from "phosphor-svelte/lib/Sticker";
 	import Textbox from "phosphor-svelte/lib/Textbox";
 </script>
 
 <Command.Root
 	class="divide-border border-muted bg-background flex h-full w-full flex-col divide-y self-start overflow-hidden rounded-xl border"
 >
 	<Command.Input
-		class="focus-override h-input bg-background placeholder:text-foreground-alt/50 focus:outline-hidden inline-flex w-[296px] truncate rounded-xl px-4 text-sm transition-colors focus:ring-0"
+		class="focus-override h-input placeholder:text-foreground-alt/50 focus:outline-hidden bg-background inline-flex truncate rounded-xl px-4 text-sm transition-colors focus:ring-0"
 		placeholder="Search for something..."
 	/>
 	<Command.List class="max-h-[280px] overflow-y-auto overflow-x-hidden px-2 pb-2">

diff --git a/docs/src/lib/components/demos/select-demo-multiple.svelte b/docs/src/lib/components/demos/select-demo-multiple.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Select } from "bits-ui";
+	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
+	import CaretDoubleUp from "phosphor-svelte/lib/CaretDoubleUp";
+	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
 	import Check from "phosphor-svelte/lib/Check";
 	import Palette from "phosphor-svelte/lib/Palette";
-	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
-	import CaretDoubleUp from "phosphor-svelte/lib/CaretDoubleUp";
-	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
 
 	const themes = [
 		{ value: "light-monochrome", label: "Light Monochrome" },
@@ -46,7 +46,9 @@
 		aria-label="Select a theme"
 	>
 		<Palette class="text-muted-foreground mr-[9px] size-6" />
-		{selectedLabel}
+		<span class="w-[calc(296px-11px-11px-9px)] truncate text-start">
+			{selectedLabel}
+		</span>
 		<CaretUpDown class="text-muted-foreground ml-auto size-6" />
 	</Select.Trigger>
 	<Select.Portal>