fix: add checkbox id name if not available based on label (#1466)

Co-authored-by: ( Nechiforel David-Samuel ) NsdHSO <37635083+NsdHSO@users.noreply.github.com>
open-sauced · Aug 2, 2023 · 68f66a7 · 68f66a7
1 parent 6d8505f
commit 68f66a7
Showing 1 changed file with 27 additions and 24 deletions.
diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx
@@ -9,31 +9,34 @@ interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPr
 }
 
 const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, label, id = "checkbox", ...props }, ref) => (
-    <div className="flex items-center">
-      <CheckboxPrimitive.Root
-        ref={ref}
-        className={clsx(
-          "peer h-4 w-4 shrink-0 rounded-[4px] cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
-          className
-        )}
-        {...props}
-        id={id}
-      >
-        <CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
-          <FiCheck className="w-full h-full" />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label && (
-        <label
-          htmlFor={id}
-          className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  ({ className, label, id, ...props }, ref) => {
+    const getId = () => (id ? id : label?.replaceAll(" ", "_").toLowerCase());
+    return (
+      <div className="flex items-center">
+        <CheckboxPrimitive.Root
+          ref={ref}
+          className={clsx(
+            "peer h-4 w-4 shrink-0 rounded cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
+            className
+          )}
+          {...props}
+          id={getId()}
         >
-          {label}
-        </label>
-      )}
-    </div>
-  )
+          <CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
+            <FiCheck className="w-full h-full" />
+          </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+        {label && (
+          <label
+            htmlFor={getId()}
+            className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  }
 );
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;