fix: improve checkbox component

deriv-com · Feb 8, 2024 · c193b31 · c193b31
1 parent 7f6cca0
commit c193b31
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/lib/components/Checkbox/Checkbox.scss b/lib/components/Checkbox/Checkbox.scss
@@ -7,18 +7,17 @@ $error_color: #ec3f3f;
 .deriv-checkbox__wrapper {
   display: inline-flex;
   position: relative;
-  width: fit-content;
   align-items: center;
-  justify-content: center;
   gap: 8px;
+  width: 100%;
 }
 
 .deriv-checkbox {
   width: 16px;
   height: 16px;
   border-radius: $border_radius;
   transition: background-color 0.3s ease-in-out;
-  cursor: pointer;
+  box-sizing: border-box;
 
   &--unchecked {
     background: transparent;
@@ -36,7 +35,6 @@ $error_color: #ec3f3f;
 
   &--disabled {
     opacity: 0.5;
-    cursor: not-allowed;
   }
 
   &__label {
@@ -46,12 +44,20 @@ $error_color: #ec3f3f;
     line-height: 20px;
     font-weight: 400;
 
-    &--disabled {
-      cursor: text;
-    }
-
     &--error {
       color: $error_color;
     }
   }
 }
+
+.deriv-checkbox:not(:disabled),
+.deriv-checkbox:not(:disabled) + .deriv-checkbox__wrapper,
+.deriv-checkbox:not(:disabled) ~ .deriv-checkbox__label {
+  cursor: pointer;
+}
+
+.deriv-checkbox:disabled,
+.deriv-checkbox:disabled + .deriv-checkbox__wrapper,
+.deriv-checkbox--disabled ~ .deriv-checkbox__label {
+  cursor: not-allowed;
+}
diff --git a/lib/components/Checkbox/index.tsx b/lib/components/Checkbox/index.tsx
@@ -2,7 +2,8 @@ import { ComponentProps, ReactNode, Ref, forwardRef } from "react";
 import clsx from "clsx";
 import "./Checkbox.scss";
 
-interface CheckboxProps extends Omit<ComponentProps<"input">, "placeholder"> {
+interface CheckboxProps
+  extends Omit<ComponentProps<"input">, "placeholder" | "defaultChecked"> {
   error?: boolean;
   label?: ReactNode;
   labelClassName?: string;
@@ -38,6 +39,8 @@ export const Checkbox = forwardRef(
             className
           )}
           type="checkbox"
+          checked={!disabled && checked}
+          disabled={disabled}
           ref={ref}
           {...rest}
         />

diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
@@ -66,12 +66,12 @@ export const Default: Story = {
     label: "Get updates about Deriv products, services and events.",
   },
   render: (args) => {
-    const [checked, setChecked] = useState(false);
+    const [checked, setChecked] = useState(args.checked);
 
     return (
       <Checkbox
         {...args}
-        checked={checked}
+        checked={args.checked || checked}
         onChange={() => setChecked((previous) => !previous)}
       />
     );