fix: treat undefined as false for boolean variants (#146)

nextui-org · Feb 9, 2024 · ddc1554 · ddc1554
1 parent ed21cdd
commit ddc1554
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -314,6 +314,78 @@ describe("Tailwind Variants (TV) - Default", () => {
 
     expect(h1({color: "green", isUnderline: false})).toBe(expectedResult);
   });
+
+  test("should support boolean variants", () => {
+    const h1 = tv({
+      base: "text-3xl",
+      variants: {
+        bool: {
+          true: "underline",
+          false: "truncate",
+        },
+      },
+    });
+
+    expect(h1()).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "truncate"]);
+  });
+
+  test("should support boolean variants -- default variants", () => {
+    const h1 = tv({
+      base: "text-3xl",
+      variants: {
+        bool: {
+          true: "underline",
+          false: "truncate",
+        },
+      },
+      defaultVariants: {
+        bool: true,
+      },
+    });
+
+    expect(h1()).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({bool: false})).toHaveClass(["text-3xl", "truncate"]);
+    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "underline"]);
+  });
+
+  test("should support boolean variants -- missing false variant", () => {
+    const h1 = tv({
+      base: "text-3xl",
+      variants: {
+        bool: {
+          true: "underline",
+        },
+      },
+    });
+
+    expect(h1()).toHaveClass(["text-3xl"]);
+    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({bool: false})).toHaveClass(["text-3xl"]);
+    expect(h1({bool: undefined})).toHaveClass(["text-3xl"]);
+  });
+
+  test("should support boolean variants -- missing false variant -- default variants", () => {
+    const h1 = tv({
+      base: "text-3xl",
+      variants: {
+        bool: {
+          true: "underline",
+        },
+      },
+      defaultVariants: {
+        bool: true,
+      },
+    });
+
+    expect(h1()).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({bool: true})).toHaveClass(["text-3xl", "underline"]);
+    expect(h1({bool: false})).toHaveClass(["text-3xl"]);
+    expect(h1({bool: undefined})).toHaveClass(["text-3xl", "underline"]);
+  });
 });
 
 describe("Tailwind Variants (TV) - Slots", () => {

diff --git a/src/index.js b/src/index.js
@@ -199,7 +199,14 @@ export const tv = (options, configProp) => {
         }
       }
 
-      const value = variantObj[variantKey] || variantObj[falsyToString(defaultVariantProp)];
+      // If there is a variant key and it's not an object (screen variants),
+      // we use the variant key and ignore the default variant.
+      const key =
+        variantKey != null && typeof variantKey != "object"
+          ? variantKey
+          : falsyToString(defaultVariantProp);
+
+      const value = variantObj[key] || variantObj["false"];
 
       if (
         typeof screenValues === "object" &&