Theo's Typesafe Cult•2y ago

CVA Boolean type enables

I have a table cell component that I am working on, and im trying to do a couple of styles that can be triggered in a boolean type as they can be mixed with my main variants i basically want to add the styling of link when link: true is passed in as a prop

const cell = cva('whitespace-nowrap px-3 py-4 text-sm font-normal',
  {
    variants: {
      variant: {
        date: 'text-blue-500',
        primary: 'font-semibold text-slate-900',
      },
      link: 'underline text-red-900 hover:text-slate-700',
      alignment: {
        right: 'text-right',
        left: 'text-left',
        center: 'text-center',
      },
    },
  });

const cell = cva('whitespace-nowrap px-3 py-4 text-sm font-normal',
  {
    variants: {
      variant: {
        date: 'text-blue-500',
        primary: 'font-semibold text-slate-900',
      },
      link: 'underline text-red-900 hover:text-slate-700',
      alignment: {
        right: 'text-right',
        left: 'text-left',
        center: 'text-center',
      },
    },
  });

and in the template (its Vue)

<td :class="cell({ link, alignment, variant })">

<td :class="cell({ link, alignment, variant })">

any help is appreciated also fine with alternative patterns if its out of scope of CVA, can also use something else other than CVA if need be

Solution:

figured it out thanks to https://youtu.be/T-Zv73yZ_QI?t=475 code is ```ts const cell = cva('whitespace-nowrap px-3 py-4 text-sm font-normal',...

Vercel

YouTube

Tru Narla: Building a design system in Next.js with Tailwind

Learn how to set up a design system in a Next.js application, and how to build an accessible and easily customizable user interface with Tru Narla, Software Engineer at Discord. Design at the moment of inspiration: https://vercel.fyi/WEIb8yH Speaker: https://twitter.com/trunarla

Jump to solution

1 Reply

Solution

needmorewood•2y ago

figured it out thanks to https://youtu.be/T-Zv73yZ_QI?t=475 code is

const cell = cva('whitespace-nowrap px-3 py-4 text-sm font-normal',
  {
    variants: {
      variant: {
        date: 'text-blue-500',
        primary: 'font-semibold text-slate-900',
      },
      link: {
        true: 'underline text-red-900 hover:text-slate-700',
      },
      alignment: {
        right: 'text-right',
        left: 'text-left',
        center: 'text-center',
      },
    },
  });

const cell = cva('whitespace-nowrap px-3 py-4 text-sm font-normal',
  {
    variants: {
      variant: {
        date: 'text-blue-500',
        primary: 'font-semibold text-slate-900',
      },
      link: {
        true: 'underline text-red-900 hover:text-slate-700',
      },
      alignment: {
        right: 'text-right',
        left: 'text-left',
        center: 'text-center',
      },
    },
  });

Vercel

YouTube

Tru Narla: Building a design system in Next.js with Tailwind

Gaming

Programming

CVA Boolean type enables