fix(ui): improved isReadOnly and isDisabled functionality and styling

LuckySharma014 · LuckySharma014 · commit d9d293bbb445 · 2024-03-14T16:27:12.000+05:30
diff --git a/packages/ui/src/checkbox/Checkbox.tsx b/packages/ui/src/checkbox/Checkbox.tsx
@@ -15,13 +15,18 @@ import { classNames } from "../utils";
 // Checkbox Component
 
 export const checkboxClasses = cva(
-  "border-secondary-400 dark:border-secondary-700 focus-visible:ring-ring data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-500 dark:data-[state=checked]:bg-primary-300 dark:data-[state=checked]:border-primary-300 relative shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 focus:ring-2",
+  "border-secondary-400 dark:border-secondary-700 focus-visible:ring-ring data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-500 dark:data-[state=checked]:bg-primary-300 dark:data-[state=checked]:border-primary-300 relative shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus:ring-2",
   {
     variants: {
       size: { sm: "size-4", md: "size-5", lg: "size-6" },
+      disabled: {
+        true: "cursor-not-allowed opacity-70",
+        false: "",
+      },
     },
     defaultVariants: {
       size: "md",
+      disabled: false,
     },
   },
 );
@@ -50,15 +55,18 @@ const checkboxLabelClasses = cva("", {
       lg: "pl-2.5 text-base leading-snug",
     },
     disabled: {
-      true: "cursor-not-allowed opacity-50",
+      true: "cursor-not-allowed opacity-70",
       false: "",
     },
   },
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+  },
 });
 
-export type Checkbox = Omit<
-  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-  "disabled" | "required"
+export type Checkbox = ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
 > & {
   size?: "sm" | "md" | "lg";
   isReadOnly?: BooleanOrFunction;
@@ -82,23 +90,29 @@ export const Checkbox = forwardRef<
     },
     forwardedref,
   ) => {
-    const context = useFieldControlContext() ?? {};
+    const fieldControlContext = useFieldControlContext() ?? {};
+
+    const name = props.name || fieldControlContext.name;
 
-    const name = props.name || context.name;
     const disabled =
       getValue(isDisabled) ||
-      context.isDisabled ||
-      getValue(isReadOnly) ||
-      context.isReadOnly;
-    const required = getValue(isRequired) ?? context.isRequired;
+      fieldControlContext.isDisabled ||
+      props.disabled ||
+      fieldControlContext.isLoading;
+
+    const readonly = getValue(isReadOnly) || fieldControlContext.isReadOnly;
+
+    const required =
+      (getValue(isRequired) || props.required) ??
+      fieldControlContext.isRequired;
 
     const checkbox = (
       <CheckboxPrimitive.Root
         {...props}
         name={name}
-        disabled={disabled}
+        disabled={disabled || readonly}
         required={required}
-        className={classNames(checkboxClasses({ size }), className)}
+        className={classNames(checkboxClasses({ size, disabled }), className)}
         ref={forwardedref}
       >
         <CheckboxPrimitive.Indicator className="group flex h-full items-center justify-center">
diff --git a/packages/ui/src/checkbox/checkbox.stories.tsx b/packages/ui/src/checkbox/checkbox.stories.tsx
@@ -9,6 +9,7 @@ const meta: Meta<typeof Checkbox> = {
     size: "md",
     isDisabled: false,
     isRequired: false,
+    isReadOnly: false,
   },
   argTypes: {
     size: {
@@ -22,28 +23,34 @@ export default meta;
 type Story = StoryObj<typeof Checkbox>;
 
 export const Default: Story = {
-  render: ({ size, isDisabled, isRequired }) => {
+  render: ({ size, isDisabled, isRequired, isReadOnly }) => {
     return (
-      <Checkbox isDisabled={isDisabled} size={size} isRequired={isRequired} />
+      <Checkbox
+        isDisabled={isDisabled}
+        size={size}
+        isRequired={isRequired}
+        isReadOnly={isReadOnly}
+      />
     );
   },
 };
 
 export const WithChildren: Story = {
-  render: ({ size, isDisabled, isRequired }) => (
+  render: ({ size, isDisabled, isRequired, isReadOnly }) => (
     <Checkbox
       id="name"
       size={size}
       isDisabled={isDisabled}
       isRequired={isRequired}
+      isReadOnly={isReadOnly}
     >
       Name
     </Checkbox>
   ),
 };
 
 export const Indeterminate: Story = {
-  render: ({ size, isDisabled, isRequired }) => {
+  render: ({ size, isDisabled, isRequired, isReadOnly }) => {
     const [state, setState] = useState<CheckedState>("indeterminate");
 
     return (
@@ -53,6 +60,7 @@ export const Indeterminate: Story = {
         checked={state}
         isDisabled={isDisabled}
         isRequired={isRequired}
+        isReadOnly={isReadOnly}
         onCheckedChange={(checked) =>
           checked ? setState(true) : setState("indeterminate")
         }
diff --git a/packages/ui/src/input-field/InputField.tsx b/packages/ui/src/input-field/InputField.tsx
@@ -7,7 +7,7 @@ import { useInputGroupContext } from "../input-group";
 import { classNames } from "../utils";
 
 export const inputFieldClasses = cva(
-  "w-full z-[1] appearance-none outline-none dark:text-secondary-200 transition-all disabled:bg-secondary-100 disabled:dark:bg-secondary-800 disabled:cursor-not-allowed",
+  "w-full z-[1] border appearance-none outline-none dark:text-secondary-200 transition-all",
   {
     variants: {
       size: {
@@ -16,10 +16,17 @@ export const inputFieldClasses = cva(
         lg: "py-2 text-lg",
       },
       variant: {
-        solid: "bg-secondary-50 dark:bg-secondary-800/20",
-        outline:
-          "read-only:focus:border-secondary-300 dark:read-only:focus:border-secondary-700 read-only:focus:ring-0",
-        ghost: "border border-transparent",
+        solid: "",
+        outline: "",
+        ghost: "",
+      },
+      disabled: {
+        true: "",
+        false: "",
+      },
+      readonly: {
+        true: "",
+        false: "",
       },
       invalid: {
         true: "border-red-500 focus:ring-red-200 dark:border-red-400 dark:focus:ring-red-100/20",
@@ -38,21 +45,42 @@ export const inputFieldClasses = cva(
       },
     },
     compoundVariants: [
+      {
+        variant: "solid",
+        disabled: false,
+        readonly: false,
+        className: "bg-secondary-50 dark:bg-secondary-900",
+      },
+      {
+        disabled: true,
+        readonly: false,
+        className: "bg-secondary-100 dark:bg-secondary-800 cursor-not-allowed",
+      },
       {
         variant: ["solid", "outline"],
-        size: ["sm", "md", "lg"],
-        className: classNames(
-          "border border-secondary-300 dark:border-secondary-700 outline-none",
-          "hover:border-primary-500 dark:hover:border-primary-400 disabled:hover:border-secondary-300 dark:disabled:hover:border-secondary-700",
-          "focus:border-primary-500 dark:focus:border-primary-400",
-          "focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-100/20",
-        ),
+        disabled: false,
+        className: "hover:border-primary-500 dark:hover:border-primary-400",
+      },
+      {
+        variant: ["solid", "outline"],
+        className: "border-secondary-300 dark:border-zinc-700",
+      },
+      {
+        disabled: false,
+        readonly: false,
+        className:
+          "focus:ring-primary-200 focus:border-primary-500 dark:focus:ring-primary-100/20 dark:focus:border-primary-400 focus:ring-2",
       },
       {
         variant: ["outline", "ghost"],
-        size: ["sm", "md", "lg"],
+        disabled: false,
+        readonly: false,
         className: "bg-transparent",
       },
+      {
+        variant: "ghost",
+        className: "border-transparent",
+      },
       {
         size: "sm",
         isLeftAddon: false,
@@ -186,7 +214,12 @@ export const InputField = forwardRef<HTMLInputElement, InputField>(
     },
     forwardedRef,
   ) => {
-    const fieldControlContext = useFieldControlContext() ?? {};
+    const fieldControlContext = useFieldControlContext() ?? {
+      isDisabled: false,
+      isLoading: false,
+      isReadOnly: false,
+      isRequired: false,
+    };
 
     const name = props.name || fieldControlContext.name;
     const disabled =
@@ -224,6 +257,8 @@ export const InputField = forwardRef<HTMLInputElement, InputField>(
                 inputFieldClasses({
                   size: inputGroupContext.size,
                   variant,
+                  disabled,
+                  readonly,
                   invalid,
                   isLeftAddon: inputGroupContext.isLeftAddon,
                   isRightAddon: inputGroupContext.isRightAddon,
diff --git a/packages/ui/src/select/Select.tsx b/packages/ui/src/select/Select.tsx
@@ -47,39 +47,31 @@ const selectClasses = cva(
         className: "bg-secondary-50 dark:bg-secondary-900",
       },
       {
-        variant: ["solid", "outline", "ghost"],
         disabled: true,
         readonly: false,
         className: "bg-secondary-100 dark:bg-secondary-800 cursor-not-allowed",
       },
-      {
-        variant: ["solid", "outline", "ghost"],
-        disabled: false,
-        readonly: true,
-        className: "bg-secondary-100 dark:bg-secondary-800",
-      },
       {
         variant: ["solid", "outline"],
         disabled: false,
-        readonly: false,
         className:
-          "group-hover:border-primary-500 dark:group-hover:border-primary-400 focus:ring-primary-200 focus:border-primary-500 dark:focus:ring-primary-100/20 dark:focus:border-primary-400 focus:ring-2",
+          "group-hover:border-primary-500 dark:group-hover:border-primary-400",
       },
       {
         variant: ["solid", "outline"],
         className: "border-secondary-300 dark:border-zinc-700",
       },
       {
-        variant: ["solid", "outline", "ghost"],
         disabled: false,
         readonly: false,
-        className: "cursor-pointer",
+        className:
+          "cursor-pointer focus:ring-primary-200 focus:border-primary-500 dark:focus:ring-primary-100/20 dark:focus:border-primary-400 focus:ring-2",
       },
       {
         variant: ["outline", "ghost"],
         disabled: false,
         readonly: false,
-        className: "bg-transparent dark:bg-secondary-900",
+        className: "bg-transparent",
       },
       {
         variant: "ghost",
diff --git a/packages/ui/src/textarea/Textarea.tsx b/packages/ui/src/textarea/Textarea.tsx
@@ -6,7 +6,7 @@ import { useFieldControlContext } from "../field-control";
 import { classNames } from "../utils";
 
 export const textareaClasses = cva(
-  "w-full border appearance-none min-h-[80px] outline-none dark:text-secondary-200 transition-all disabled:bg-secondary-100 disabled:dark:bg-secondary-800 disabled:cursor-not-allowed",
+  "w-full border appearance-none min-h-[80px] outline-none dark:text-secondary-200 transition-all",
   {
     variants: {
       size: {
@@ -19,43 +19,55 @@ export const textareaClasses = cva(
         outline: "",
         ghost: "",
       },
-      invalid: {
+      disabled: {
         true: "",
         false: "",
       },
+      readonly: {
+        true: "",
+        false: "",
+      },
+      invalid: {
+        true: "border-red-500 focus:ring-red-200 dark:border-red-400 dark:focus:ring-red-100/20",
+      },
     },
     compoundVariants: [
       {
         variant: "solid",
-        invalid: false,
+        disabled: false,
+        readonly: false,
         className: "bg-secondary-50 dark:bg-secondary-900",
       },
       {
-        variant: "ghost",
-        invalid: false,
-        className: "border-transparent",
+        disabled: true,
+        readonly: false,
+        className: "bg-secondary-100 dark:bg-secondary-800 cursor-not-allowed",
       },
       {
-        variant: ["solid", "outline", "ghost"],
-        invalid: true,
-        className:
-          "border-red-500 focus:ring-red-200 dark:border-red-400 dark:focus:ring-red-100/20",
+        variant: ["solid", "outline"],
+        disabled: false,
+        className: "hover:border-primary-500 dark:hover:border-primary-400",
       },
       {
         variant: ["solid", "outline"],
-        size: ["sm", "md", "lg"],
-        className: classNames(
-          "border border-secondary-300 dark:border-secondary-700 outline-none",
-          "hover:border-primary-500 dark:hover:border-primary-400 disabled:hover:border-secondary-300 dark:disabled:hover:border-secondary-700",
-          "focus:border-primary-500 dark:focus:border-primary-400",
-          "focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-100/20",
-        ),
+        className: "border-secondary-300 dark:border-zinc-700",
+      },
+      {
+        disabled: false,
+        readonly: false,
+        className:
+          "focus:ring-primary-200 focus:border-primary-500 dark:focus:ring-primary-100/20 dark:focus:border-primary-400 focus:ring-2",
       },
       {
         variant: ["outline", "ghost"],
-        invalid: false,
+        disabled: false,
+        readonly: false,
         className: "bg-transparent",
       },
+      {
+        variant: "ghost",
+        className: "border-transparent",
+      },
     ],
     defaultVariants: {
       size: "md",
@@ -96,7 +108,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Textarea>(
     },
     forwardedRef,
   ) => {
-    const context = useFieldControlContext() ?? {};
+    const context = useFieldControlContext() ?? {
+      isDisabled: false,
+      isLoading: false,
+      isReadOnly: false,
+      isRequired: false,
+    };
 
     const name = props.name || context.name;
     const disabled =
@@ -125,6 +142,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Textarea>(
                 textareaClasses({
                   size,
                   variant,
+                  disabled,
+                  readonly,
                   invalid,
                 }),
                 className,
