From 825f14e8b5137fa9ebb066cb9f747beb9e5c7f33 Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Fri, 12 Jan 2024 22:34:05 +0200
Subject: [PATCH] fix: add whitespace-nowrap for Button, Select, Tab (#266)

* fix(Button): add 'whitespace-nowrap' to base styles

* refactor(Button): use VariantProps for Button Props instead of NonNullable

* fix(Select): add whitespace-nowrap and truncate to SelectTrigger
---
 apps/www/src/lib/registry/default/ui/button/Button.vue   | 9 +++++++--
 apps/www/src/lib/registry/default/ui/button/index.ts     | 2 +-
 .../src/lib/registry/default/ui/select/SelectTrigger.vue | 2 +-
 apps/www/src/lib/registry/new-york/ui/button/Button.vue  | 9 +++++++--
 apps/www/src/lib/registry/new-york/ui/button/index.ts    | 2 +-
 .../lib/registry/new-york/ui/select/SelectTrigger.vue    | 2 +-
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/button/Button.vue b/apps/www/src/lib/registry/default/ui/button/Button.vue
index 5a34b1b8..8bd71364 100644
--- a/apps/www/src/lib/registry/default/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/default/ui/button/Button.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
+interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
+
 interface Props extends PrimitiveProps {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  variant?: ButtonVariantProps['variant']
+  size?: ButtonVariantProps['size']
   as?: string
 }
 
 withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
   as: 'button',
 })
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/button/index.ts b/apps/www/src/lib/registry/default/ui/button/index.ts
index 382c4f4f..93a07008 100644
--- a/apps/www/src/lib/registry/default/ui/button/index.ts
+++ b/apps/www/src/lib/registry/default/ui/button/index.ts
@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
index c7ad6747..bb301915 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        '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',
+        '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 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
         props.class,
       ),
       props.invalid
diff --git a/apps/www/src/lib/registry/new-york/ui/button/Button.vue b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
index 5a34b1b8..8bd71364 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/new-york/ui/button/Button.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
+interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
+
 interface Props extends PrimitiveProps {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  variant?: ButtonVariantProps['variant']
+  size?: ButtonVariantProps['size']
   as?: string
 }
 
 withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
   as: 'button',
 })
 </script>
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
index aa543186..be8da738 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index 15219cd1..00d47131 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :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',
+        '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 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
         props.class,
       ),
       props.invalid