I am working on creating a checkbox UI component based on a design in Figma. The outline variant is specified to only be compatible with the large size, while the solid variant can be used with all sizes.
As a result, I am trying to build an interface where certain prop types are dependent on user input for other props within the same React component.
type ConditionalProps =
| { variant: 'outlined'; size: 'large' }
| { variant: 'solid'; size: 'small' | 'normal' | 'large' };
This is my current approach, which works almost perfectly. However, when I set the variant as outlined and the size as small, TypeScript throws an error:
Type '{ variant: "outlined"; size: "normal"; }' is not assignable to type 'IntrinsicAttributes & ConditionalProps'
One thing that bothers me is that IntelliSense suggests using type 'small' | 'normal' | 'large' when the variant is outlined. You can view the image below to see what I mean. Is there a way to resolve this issue? Am I misusing conditional types in this scenario?