fix: add whitespace-nowrap for Button, Select, Tab

[romanhrynevych]

This PR will add whitespace-nowrap class for Button, Select, Tab components, so there will be no overlapping when resizing, mentioned in #199

Also in this PR I refactored Button component Props to use VariantProps generic instead NonNullable<Parameters<typeof buttonVariants>>

[sadeghbarati]

I'm also working on refactoring components in this PR #241 which I handle button VariantProps in index.ts

Other changes are nice

[romanhrynevych]

I read about VariantProps in issue #199 , you mentioned if someone will make PR to refactor that, but if you already do that you can dismiss that commit 🙂

[sadeghbarati]

The way you handle is ok, If you don't see the Vite overlay screen while you working on the Button in localhost

---

Individual Props types in defineProps macro ✅ https://github.com/joe-bell/cva/blob/main/examples/vue/src/components/Button.vue

Entire Prop type Object in defineProps macro ❌ not yet supported in Vue

[romanhrynevych]

@sadeghbarati need some advice from you, as I mentioned in this comment to make this we need to use tailwind custom grid-template-columns class grid-cols-[minmax(0,1fr)_auto], but I think that it will be not good to handle it like this in code, maybe I will add some custom tailwindcss extends props, what you think?

If thou, how it will be shown, don't know how to make it simple to reuse and understand, grid-cols-minmax-auto maybe?

[romanhrynevych]

In original shadcn there is flex but with [&>span]:line-clamp-1, I think this is worse than truncate because we don't see ..., word just disappear

[sadeghbarati]

That is a demo, user can change the styles of their component

But Yeah we can have truncate

Line clamp is also like truncate but in Y-axis

[romanhrynevych]

Yes, but what about custom TailwindCSS config grid cols, I can add them?

[sadeghbarati]

Do you want to use it in Buttons Source (Registry Styles) or Demos?

[romanhrynevych]

I need to use it inside SelectTrigger.vue component, to limit selected span

[sadeghbarati]

I'm not a CSS Grid ninja but let's keep flex class cause width is auto by default in most elements

[romanhrynevych]

Ahaha, I will try to explain this) when we have fixed block with, for example, width of 180px Button, inside we have 2 elements (Text and Arrow), we know that Arrow is fixed width, but Text can be different width, so when we set display: flex; for Button, when Text will be wider, it will move our Arrow further, so we need to limit Text to all free space, so we add display: grid to Button and grid-templates-columns: minmax(0,1fr) auto;. Minmax make all magic and limit our Text width, and if we add truncate class it will add ... in the end of it. But with flex we cannot make same behaviour.

If you are assured that we can't use grid here, so we will make same as Original shadcn and limit by Y axis, but I think ... is more logical 🤔

P.S. About minmax magic I learned from official TailwindCSS docs, where they use them by default for grid-cols classes, but main problem that predefined classes divide our block to equal width columns, that will not work for us 🥲

[romanhrynevych]

Sorry for some misinformation, just googled some examples, and it can be fixed by min-width: 0 🤯
So we don't need grid for this, later will change everything, flex works fine 🙂

Ref: https://css-tricks.com/flexbox-truncated-text/

[sadeghbarati]

https://twitter.com/t3dotgg/status/1745358867243171939

I'm with min-width : 0 xd

---

First person who tweeted this was Adam Wathan

---

Thanks for the time I'll check your PR next day
Hope you have a great day/night :cheers:

[romanhrynevych]

https://twitter.com/t3dotgg/status/1745358867243171939

I'm with min-width : 0 xd

Just saw this in my feed 5 mins ago 😂

[romanhrynevych]

@sadeghbarati PR is ready for review, added truncate to SelectTrigger, fixed whitespace-nowrap in Button, Tabs already has whitespace-nowrap

[sadeghbarati]

Thanks 🫡