Falsey boolean variants ignored unless specifically set
binaryartifex opened this issue · 0 comments
Describe the bug
Given a variant with true and false values (with slots being conditionally styled in this instance), the false value is ignored unless it is directly given the value of false.
To Reproduce
Steps to reproduce the behavior:
export const demoStyles = tv({
slots: {
base: "group flex w-full flex-col gap-y-2",
field: "relative flex h-10 w-full items-center rounded-default border bg-surface-content",
},
variants: {
hasLeadingAdornment: {
true: {
field: "pr-10",
},
false: {
field: "pr-4",
},
},
},
});
// the conditional truthy classes are applied
<Input className={styles.field({hasLeadingAdornment: true})} placeholder={placeholder} />
// the conditional falsey classes are NOT applied
<Input className={styles.field()} placeholder={placeholder} />
Expected behavior
When providing boolean values as variant key names, false should also include undefined. I understand those same classes could be lifted to the target slot and overridden via the truthy variant, however allowing better falsey values provides a chance to intrinsically separate conditional styling from base styles. Perhaps an added configuration option to set this if there is contention with this idea?
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Chrome
- Version: 120.0.6099.130