Merge pull request #77 from deriv-com/aizad/FEQ-1734/checkbox-input-fix

Aizad/FEQ-1734/Fix Checkbox Issue
deriv-com · Feb 15, 2024 · 0bc7499 · 0bc7499
2 parents 72c7e5f + b4625ac
commit 0bc7499
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 49 deletions.
diff --git a/lib/components/Checkbox/Checkbox.scss b/lib/components/Checkbox/Checkbox.scss
@@ -4,37 +4,43 @@ $border_color: #999999;
 $brand_color: #ff444f;
 $error_color: #ec3f3f;
 
-.deriv-checkbox__wrapper {
+.deriv-checkbox {
   display: inline-flex;
   position: relative;
   align-items: center;
   gap: 8px;
   width: 100%;
-}
-
-.deriv-checkbox {
-  width: 16px;
-  height: 16px;
-  border-radius: $border_radius;
-  transition: background-color 0.3s ease-in-out;
-  box-sizing: border-box;
-
-  &--unchecked {
-    background: transparent;
-    border: $border $border_color;
-  }
 
-  &--checked {
-    border: none;
-    background-color: $brand_color;
-    background-image: url("./checkbox-icon.svg");
-    background-position: center;
-    background-repeat: no-repeat;
+  &__wrapper {
+    align-self: first baseline;
+    min-width: 16px;
+    height: 16px;
     border-radius: $border_radius;
+    transition: background-color 0.3s ease-in-out;
+    box-sizing: border-box;
   }
 
-  &--disabled {
-    opacity: 0.5;
+  &__box {
+    width: 100%;
+    height: 100%;
+
+    &--unchecked {
+      background: transparent;
+      border: $border $border_color;
+    }
+
+    &--checked {
+      border: none;
+      background-color: $brand_color;
+      background-image: url("./checkbox-icon.svg");
+      background-position: center;
+      background-repeat: no-repeat;
+      border-radius: $border_radius;
+    }
+
+    &--disabled {
+      opacity: 0.5;
+    }
   }
 
   &__label {
@@ -50,14 +56,14 @@ $error_color: #ec3f3f;
   }
 }
 
-.deriv-checkbox:not(:disabled),
-.deriv-checkbox:not(:disabled) + .deriv-checkbox__wrapper,
-.deriv-checkbox:not(:disabled) ~ .deriv-checkbox__label {
+.deriv-checkbox__box:not(:disabled),
+.deriv-checkbox__box:not(:disabled) + .deriv-checkbox__wrapper,
+.deriv-checkbox__box:not(:disabled) ~ .deriv-checkbox__label {
   cursor: pointer;
 }
 
-.deriv-checkbox:disabled,
-.deriv-checkbox:disabled + .deriv-checkbox__wrapper,
-.deriv-checkbox--disabled ~ .deriv-checkbox__label {
+.deriv-checkbox__box:disabled,
+.deriv-checkbox__box:disabled + .deriv-checkbox__wrapper,
+.deriv-checkbox__box--disabled ~ .deriv-checkbox__label {
   cursor: not-allowed;
 }
diff --git a/lib/components/Checkbox/index.tsx b/lib/components/Checkbox/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode, Ref, forwardRef } from "react";
+import { ComponentProps, ReactNode, Ref, forwardRef, useId } from "react";
 import clsx from "clsx";
 import "./Checkbox.scss";
 
@@ -17,33 +17,36 @@ export const Checkbox = forwardRef(
       className,
       disabled,
       error,
-      id = "deriv-checkbox",
       label,
       labelClassName,
       wrapperClassName,
       ...rest
     }: CheckboxProps,
     ref: Ref<HTMLInputElement>
   ) => {
+    const id = useId();
+
     return (
-      <div className={clsx("deriv-checkbox__wrapper", wrapperClassName)}>
-        <input
-          id={id}
-          className={clsx(
-            "deriv-checkbox",
-            {
-              "deriv-checkbox--unchecked": !checked,
-              "deriv-checkbox--checked": checked,
-              "deriv-checkbox--disabled": disabled,
-            },
-            className
-          )}
-          type="checkbox"
-          checked={!disabled && checked}
-          disabled={disabled}
-          ref={ref}
-          {...rest}
-        />
+      <div className={clsx("deriv-checkbox", wrapperClassName)}>
+        <div className="deriv-checkbox__wrapper">
+          <input
+            id={rest.id ?? id}
+            className={clsx(
+              "deriv-checkbox__box",
+              {
+                "deriv-checkbox__box--unchecked": !checked,
+                "deriv-checkbox__box--checked": checked,
+                "deriv-checkbox__box--disabled": disabled,
+              },
+              className
+            )}
+            type="checkbox"
+            checked={!disabled && checked}
+            disabled={disabled}
+            ref={ref}
+            {...rest}
+          />
+        </div>
         <label
           className={clsx(
             "deriv-checkbox__label",
@@ -53,7 +56,7 @@ export const Checkbox = forwardRef(
             },
             labelClassName
           )}
-          htmlFor={id}
+          htmlFor={rest.id ?? id}
         >
           {label}
         </label>