refactor: checkbox ui component (#4665)

packages/ui/src/form-fields/checkbox.tsx

@@ -3,15 +3,26 @@ import * as React from "react";
 import { cn } from "../../helpers";
 
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  intermediate?: boolean;
+  containerClassName?: string;
-  className?: string;
+  iconClassName?: string;
+  indeterminate?: boolean;
 }
 
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { id, name, checked, intermediate = false, disabled, className = "", ...rest } = props;
+  const {
+    id,
+    name,
+    checked,
+    indeterminate = false,
+    disabled,
+    containerClassName,
+    iconClassName,
+    className,
+    ...rest
+  } = props;
 
   return (
-    <div className={cn("relative w-full flex gap-2", className)}>
+    <div className={cn("relative w-full flex gap-2", containerClassName)}>
       <input
         id={id}
         ref={ref}
@@ -19,22 +30,27 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         name={name}
         checked={checked}
         className={cn(
-          "appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50",
+          "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50 cursor-pointer",
           {
             "border-custom-border-200 bg-custom-background-80 cursor-not-allowed": disabled,
-            "cursor-pointer border-custom-border-300 hover:border-custom-border-400 bg-white": !disabled,
+            "border-custom-border-300 hover:border-custom-border-400 bg-transparent": !disabled,
-            "border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200":
+            "border-custom-primary-40 hover:border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200":
-              !disabled && (checked || intermediate),
+              !disabled && (checked || indeterminate),
-          }
+          },
+          className
         )}
         disabled={disabled}
         {...rest}
       />
       <svg
-        className={cn("absolute w-4 h-4 p-0.5 pointer-events-none outline-none hidden stroke-white", {
+        className={cn(
+          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none hidden stroke-white",
+          {
             block: checked,
             "stroke-custom-text-400 opacity-40": disabled,
-        })}
+          },
+          iconClassName
+        )}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="none"
@@ -46,10 +62,14 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         <polyline points="20 6 9 17 4 12" />
       </svg>
       <svg
-        className={cn("absolute w-4 h-4 p-0.5 pointer-events-none outline-none stroke-white hidden", {
+        className={cn(
+          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none stroke-white hidden",
+          {
             "stroke-custom-text-400 opacity-40": disabled,
-          block: intermediate && !checked,
+            block: indeterminate && !checked,
-        })}
+          },
+          iconClassName
+        )}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 8 8"
         fill="none"

web/components/profile/preferences/email-notification-form.tsx

@@ -80,7 +80,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="property_change"
               render={({ field: { value, onChange } }) => (
-                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
+                <Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
               )}
             />
           </div>
@@ -99,12 +99,12 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               render={({ field: { value, onChange } }) => (
                 <Checkbox
                   checked={value}
-                  intermediate={!value && watch("issue_completed")}
+                  indeterminate={!value && watch("issue_completed")}
                   onChange={() => {
                     setValue("issue_completed", !value, { shouldDirty: true });
                     onChange(!value);
                   }}
-                  className="mx-2"
+                  containerClassName="mx-2"
                 />
               )}
             />
@@ -120,7 +120,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="issue_completed"
               render={({ field: { value, onChange } }) => (
-                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
+                <Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
               )}
             />
           </div>
@@ -137,7 +137,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="comment"
               render={({ field: { value, onChange } }) => (
-                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
+                <Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
               )}
             />
           </div>
@@ -154,7 +154,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="mention"
               render={({ field: { value, onChange } }) => (
-                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
+                <Checkbox checked={value} onChange={() => onChange(!value)} containerClassName="mx-2" />
               )}
             />
           </div>