docs: fix select styles (#705)

huntabyte · Jan 27, 2024 · 82eeed2 · 82eeed2 · vercel · Jan 27, 2024
1 parent 9ffc662
commit 82eeed2
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 11 deletions.
diff --git a/apps/www/src/lib/registry/default/example/cards/report-issue.svelte b/apps/www/src/lib/registry/default/example/cards/report-issue.svelte
@@ -58,7 +58,7 @@
 		<Card.Description>What area are you having problems with?</Card.Description>
 	</Card.Header>
 	<Card.Content class="grid gap-6">
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid sm:grid-cols-2 gap-4">
 			<div class="grid gap-2">
 				<Label for="aria-{id}">Area</Label>
 				<Select.Root selected={areas[1]}>
@@ -77,7 +77,7 @@
 			<div class="grid gap-2">
 				<Label for="security-level-{id}">Security Level</Label>
 				<Select.Root selected={securityLevels[1]}>
-					<Select.Trigger id="security-level-{id}">
+					<Select.Trigger id="security-level-{id}" class="line-clamp-1 w-full truncate">
 						<Select.Value placeholder="Select level" />
 					</Select.Trigger>
 					<Select.Content>

diff --git a/apps/www/src/lib/registry/default/ui/input/input.svelte b/apps/www/src/lib/registry/default/ui/input/input.svelte
@@ -13,7 +13,7 @@
 
 <input
 	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

diff --git a/apps/www/src/lib/registry/default/ui/select/select-trigger.svelte b/apps/www/src/lib/registry/default/ui/select/select-trigger.svelte
@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 line-clamp-1 truncate",
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 		className
 	)}
 	{...$$restProps}

diff --git a/apps/www/src/lib/registry/default/ui/textarea/textarea.svelte b/apps/www/src/lib/registry/default/ui/textarea/textarea.svelte
@@ -11,7 +11,7 @@
 
 <textarea
 	class={cn(
-		"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

diff --git a/apps/www/src/lib/registry/new-york/example/cards/report-issue.svelte b/apps/www/src/lib/registry/new-york/example/cards/report-issue.svelte
@@ -57,7 +57,7 @@
 		<Card.Description>What area are you having problems with?</Card.Description>
 	</Card.Header>
 	<Card.Content class="grid gap-6">
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid sm:grid-cols-2 gap-4">
 			<div class="grid gap-2">
 				<Label for="area-{id}">Area</Label>
 				<Select.Root selected={areas[1]}>
@@ -76,7 +76,7 @@
 			<div class="grid gap-2">
 				<Label for="security-level-{id}">Security Level</Label>
 				<Select.Root selected={securityLevels[1]}>
-					<Select.Trigger id="security-level-{id}">
+					<Select.Trigger id="security-level-{id}" class="line-clamp-1 truncate">
 						<Select.Value placeholder="Select level" />
 					</Select.Trigger>
 					<Select.Content>

diff --git a/apps/www/src/lib/registry/new-york/example/cards/share.svelte b/apps/www/src/lib/registry/new-york/example/cards/share.svelte
@@ -47,7 +47,7 @@
 	<Card.Content>
 		<div class="flex space-x-2">
 			<Input value="http://example.com/link/to/document" readonly />
-			<Button variant="secondary" class="shrink-0">Copy Link</Button>
+			<Button class="shrink-0">Copy Link</Button>
 		</div>
 		<Separator class="my-4" />
 		<div class="space-y-4">

diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -10,7 +10,7 @@ const buttonVariants = tv({
 			destructive:
 				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 			outline:
-				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+				"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
 			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline"

diff --git a/apps/www/src/lib/registry/new-york/ui/input/input.svelte b/apps/www/src/lib/registry/new-york/ui/input/input.svelte
@@ -13,7 +13,7 @@
 
 <input
 	class={cn(
-		"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

diff --git a/apps/www/src/lib/registry/new-york/ui/select/select-trigger.svelte b/apps/www/src/lib/registry/new-york/ui/select/select-trigger.svelte
@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 line-clamp-1 truncate",
+		"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 		className
 	)}
 	{...$$restProps}