feat(props): add class props property on side with className

busbud · Sep 25, 2024 · 0a05880 · 0a05880
1 parent 5d4e8f4
commit 0a05880
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 27 deletions.
diff --git a/packages/core/tests/configs/specific.test.ts b/packages/core/tests/configs/specific.test.ts
@@ -17,7 +17,7 @@ describe("test simple config", () => {
         root({
           size: "xxs",
           fontWeight: "regular",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: true,
         })
       ).toBe(root_full_str);
@@ -34,7 +34,7 @@ describe("test simple config", () => {
         root({
           size: "xxs",
           fontWeight: "regular",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: false,
         })
       ).toBe(root_full_str);
@@ -53,13 +53,13 @@ describe("test simple config", () => {
         root({
           size: "xxs",
           fontWeight: "bold",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: false,
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with responsive props but no array condition", () => {
+    test("start working with responsive props but no array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -78,12 +78,12 @@ describe("test simple config", () => {
             md: "xxl",
           },
           fontWeight: "bold",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with responsive props and array condition", () => {
+    test("start working with responsive props and array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -102,12 +102,12 @@ describe("test simple config", () => {
             initial: "bold",
             md: "extraBold",
           },
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with two responsive props and array condition", () => {
+    test("start working with two responsive props and array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -131,12 +131,12 @@ describe("test simple config", () => {
             initial: "bold",
             md: "extraBold",
           },
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with two responsive props and array condition", () => {
+    test("start working with two responsive props and array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -162,7 +162,7 @@ describe("test simple config", () => {
             initial: "bold",
             md: "extraBold",
           },
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: true,
         })
       ).toBe(root_full_str);

diff --git a/packages/documentation/pages/responsive-variants.md b/packages/documentation/pages/responsive-variants.md
@@ -5,6 +5,8 @@ editLink: true
 
 # Responsive Variants
 
+**IMPORTANT**: If you are not using any responsive variants you can just not use all this configuration.
+
 To enable responsive variants:
 
 1. Add the variant to the `responsiveVariants` array in your compose function.
@@ -26,12 +28,10 @@ export const Button: React.FC<{}> = () => {
 
   return (
     <button
-      className={twMerge(
-        root({
-          intent: "primary",
-          size: large,
-        })
-      )}
+      className={root({
+        intent: "primary",
+        size: large,
+      })}
     >
       Go
     </button>

diff --git a/packages/documentation/pages/slots.md b/packages/documentation/pages/slots.md
@@ -38,9 +38,9 @@ export const Card = () => {
   const { root, header, body } = cardVariants;
 
   return (
-    <div className={twMerge(root({ size: "large" }))}>
-      <div className={twMerge(header({ size: "large" }))}>header</div>
-      <div className={twMerge(body())}>body</div>
+    <div className={root({ size: "large" })}>
+      <div className={header({ size: "large" })}>header</div>
+      <div className={body()}>body</div>
     </div>
   );
 };

diff --git a/packages/documentation/pages/usage.md b/packages/documentation/pages/usage.md
@@ -54,16 +54,15 @@ export const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
 
   return (
     <Component
-      className={twMerge(
-        root({
+      className={root({
           intent: {
             initial: "primary",
             md: "secondary",
           },
           size,
-          className,
-        })
-      )}
+          {/* className, we do support class and className props. In case you use both class will be the last one in terms of position */}
+          class: className,
+        })}
       {...restProps}
     >
       {children}

diff --git a/packages/ui/src/components/Dumb.tsx b/packages/ui/src/components/Dumb.tsx
@@ -1,6 +1,5 @@
 import { compose } from "../tailwind-buddy-interface";
 import React from "react";
-import { twMerge } from "tailwind-merge";
 
 export const fooVariants = compose({
   slots: {
@@ -33,5 +32,5 @@ export const fooVariants = compose({
 
 export const Dumb: React.FC<any> = () => {
   const { root } = fooVariants;
-  return <div className={twMerge(root())}>Hello</div>;
+  return <div className={root()}>Hello</div>;
 };