Search code examples
typescriptstorybook

class-variance-authority variants allows "null" value but shouldn't

I use cva like this:

export const checkboxVariants = cva('border ...', {
    variants: {
      size: {
        sm: 'h-4 w-4',
        md: 'h-5 w-5',
        lg: 'h-6 w-6',
      },
  },    
  defaultVariants: {
    size: 'md',
  },
});

and

type CheckboxProps = VariantProps<typeof checkboxVariants>

but when checking component props I can see that null value is also allowed and if null is passed none of size classes is applied. enter image description here

How to remove null from available values?

One problem is in usage and another in storybook because it show that null is allowed and it doesn't look good with that:

enter image description here

Solution

  • I left an inquiry on cva github and received the reply below. https://github.com/joe-bell/cva/issues/253

    I think there will be a patch soon, friends.

    Or, here is also alternative. remove null or undefined from properties of a type