From 45615a3be0f3476aae4862bcbbadcc24d0de598b Mon Sep 17 00:00:00 2001
From: Swayam kale <kaleswayam05@gmail.com>
Date: Sat, 7 Feb 2026 18:42:20 +0530
Subject: [PATCH] feat(textarea): add variants and states

---
 .../components/textarea/tests/textarea.tsx    |  30 ----
 .../components/textarea/textarea.stories.tsx  | 124 +++++++++----
 .../src/components/textarea/textarea.tsx      | 166 +++++++++++-------
 .../src/components/textarea/types.ts          |  27 +--
 4 files changed, 204 insertions(+), 143 deletions(-)

diff --git a/packages/frappe-ui-react/src/components/textarea/tests/textarea.tsx b/packages/frappe-ui-react/src/components/textarea/tests/textarea.tsx
index 868fdb6f..68b7a865 100644
--- a/packages/frappe-ui-react/src/components/textarea/tests/textarea.tsx
+++ b/packages/frappe-ui-react/src/components/textarea/tests/textarea.tsx
@@ -1,49 +1,19 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-
 import Textarea from "../textarea";
 
 describe("Textarea", () => {
-  it("renders with label and placeholder", () => {
-    render(
-      <Textarea
-        label="Description"
-        placeholder="Type here..."
-        value=""
-        onChange={() => {}}
-      />
-    );
-    expect(screen.getByText("Description")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Type here...")).toBeInTheDocument();
-  });
-
-  it("renders with initial value", () => {
-    render(<Textarea value="Initial text" onChange={() => {}} />);
-    expect(screen.getByDisplayValue("Initial text")).toBeInTheDocument();
-  });
-
   it("calls onChange when typing", () => {
     const handleChange = jest.fn();
     render(<Textarea value="" onChange={handleChange} />);
     const textarea = screen.getByRole("textbox");
     fireEvent.change(textarea, { target: { value: "Hello" } });
     expect(handleChange).toHaveBeenCalled();
-    expect(handleChange.mock.calls[0][0].target.value).toBe("Hello");
   });
 
   it("is disabled when disabled prop is true", () => {
     render(<Textarea value="" onChange={() => {}} disabled />);
     expect(screen.getByRole("textbox")).toBeDisabled();
   });
-
-  it("renders with custom rows", () => {
-    render(<Textarea value="" onChange={() => {}} rows={5} />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("rows", "5");
-  });
-
-  it("renders with custom id", () => {
-    render(<Textarea value="" onChange={() => {}} htmlId="custom-id" />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("id", "custom-id");
-  });
 });
diff --git a/packages/frappe-ui-react/src/components/textarea/textarea.stories.tsx b/packages/frappe-ui-react/src/components/textarea/textarea.stories.tsx
index 63ce454b..ef074217 100644
--- a/packages/frappe-ui-react/src/components/textarea/textarea.stories.tsx
+++ b/packages/frappe-ui-react/src/components/textarea/textarea.stories.tsx
@@ -1,82 +1,132 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { TextareaProps } from "./types";
-import TextArea from "./textarea";
+import Textarea from "./textarea";
 
-export default {
-  title: "Components/TextArea",
-  component: TextArea,
-  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+    layout: "centered",
+  },
   tags: ["autodocs"],
   argTypes: {
-    label: { control: "text", description: "Label for the textarea" },
+    size: {
+      options: ["sm", "md", "lg"],
+      control: { type: "select" },
+      description: "Size of the textarea",
+      table: { defaultValue: { summary: "md" } },
+    },
+    variant: {
+      options: ["subtle", "outline", "ghost", "underline"],
+      control: { type: "select" },
+      description: "Visual variant of the textarea",
+      table: { defaultValue: { summary: "subtle" } },
+    },
+    state: {
+      options: [undefined, "success", "warning", "error"],
+      control: { type: "select" },
+      description: "Visual state (colors)",
+    },
     placeholder: {
       control: "text",
-      description: "Placeholder text for the textarea",
+      description: "Placeholder text",
     },
     disabled: {
       control: "boolean",
-      description: "If true, disables the textarea",
+      description: "Disables the textarea",
     },
-    variant: {
-      control: { type: "select", options: ["outline", "subtle"] },
-      description: "Visual variant of the textarea",
-    },
-    size: {
-      control: { type: "select", options: ["sm", "md", "lg"] },
-      description: "Size of the textarea",
+    loading: {
+      control: "boolean",
+      description: "Shows loading state (disabled)",
     },
-    id: { control: "text", description: "HTML id attribute for the textarea" },
-    value: { control: "text", description: "Current value of the textarea" },
     rows: {
       control: "number",
-      description: "Number of visible text lines for the textarea",
+      description: "Number of visible lines",
+    },
+    value: {
+      control: "text",
+      description: "Current value",
     },
     onChange: {
       action: "changed",
-      description: "Callback function when the textarea value changes",
+      description: "Callback function",
+    },
+    htmlId: {
+      control: "text",
+      description: "HTML id attribute",
     },
     debounce: {
       control: "number",
-      description: "Debounce time in milliseconds for the onChange event",
+      description: "Debounce delay in milliseconds",
     },
-    htmlId: {
-      control: "text",
-      description: "HTML id attribute for the text input",
+    required: {
+      control: "boolean",
+      description: "Marks the textarea as required",
     },
   },
-} as Meta<typeof TextArea>;
+};
 
-const Template: StoryObj<TextareaProps> = {
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+const Template: Story = {
   render: (args) => {
     const [value, setValue] = useState(args.value || "");
-
     return (
-      <div className="p-4 w-[300px]">
-        <TextArea
+      <div className="w-72">
+        <Textarea
           {...args}
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => {
+            setValue(e.target.value);
+            args.onChange?.(e);
+          }}
         />
       </div>
     );
   },
 };
 
-export const SubtleVariant = {
+export const Subtle: Story = {
   ...Template,
   args: {
-    placeholder: "Placeholder",
+    placeholder: "Tell us about yourself...",
+    rows: 4,
     variant: "subtle",
-    value: "",
+    size: "md",
   },
 };
 
-export const OutlineVariant = {
+export const Outline: Story = {
   ...Template,
   args: {
-    placeholder: "Placeholder",
+    placeholder: "Tell us about yourself...",
+    rows: 4,
     variant: "outline",
-    value: "",
+    size: "md",
+  },
+};
+
+export const Ghost: Story = {
+  ...Template,
+  args: {
+    placeholder: "Tell us about yourself...",
+    rows: 4,
+    variant: "ghost",
+    size: "md",
+  },
+};
+
+export const Underline: Story = {
+  ...Template,
+  args: {
+    placeholder: "Tell us about yourself...",
+    rows: 4,
+    variant: "underline",
+    size: "md",
   },
 };
diff --git a/packages/frappe-ui-react/src/components/textarea/textarea.tsx b/packages/frappe-ui-react/src/components/textarea/textarea.tsx
index 4d6412d7..15dffdf0 100644
--- a/packages/frappe-ui-react/src/components/textarea/textarea.tsx
+++ b/packages/frappe-ui-react/src/components/textarea/textarea.tsx
@@ -1,14 +1,15 @@
-import React, { useMemo, useRef, useCallback, forwardRef } from "react";
-
+import React, { useMemo, useRef, useCallback, forwardRef, useId } from "react";
+import { clsx } from "clsx";
 import { debounce } from "../../utils/debounce";
-import type { TextareaProps } from "./types";
+import type { TextareaProps, TextareaSize } from "./types";
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
-      label,
-      size = "sm",
+      size = "md",
       variant = "subtle",
+      state,
+      loading = false,
       disabled = false,
       value,
       onChange,
@@ -16,10 +17,16 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       rows = 3,
       htmlId,
       placeholder,
+      required,
+      className,
+      style,
+      ...rest
     },
     ref
   ) => {
     const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const generatedId = useId();
+    const id = htmlId || generatedId;
 
     const setRefs = useCallback(
       (node: HTMLTextAreaElement) => {
@@ -27,59 +34,83 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         if (typeof ref === "function") {
           ref(node);
         } else if (ref) {
-          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current =
-            node;
+          (ref as { current: HTMLTextAreaElement | null }).current = node;
         }
       },
       [ref]
     );
 
-    const inputClasses = useMemo(() => {
-      const sizeClasses = {
-        sm: "text-base rounded",
-        md: "text-base rounded",
-        lg: "text-lg rounded-md",
-        xl: "text-xl rounded-md",
-      }[size];
-
-      const paddingClasses = {
-        sm: "py-1.5 px-2",
-        md: "py-1.5 px-2.5",
-        lg: "py-1.5 px-3",
-        xl: "py-1.5 px-3",
-      }[size];
-
-      const currentVariant = disabled ? "disabled" : variant;
-      const variantClasses = {
-        subtle:
-          "border border-surface-gray-2 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
-        outline:
-          "border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3",
-        disabled: `border bg-surface-gray-1 placeholder-ink-gray-3 ${
-          variant === "outline" ? "border-outline-gray-2" : "border-transparent"
-        }`,
-      }[currentVariant];
-
-      const textColor = disabled ? "text-ink-gray-5" : "text-ink-gray-8";
-
-      return `resize-y transition-colors w-full block outline-none ${sizeClasses} ${paddingClasses} ${variantClasses} ${textColor}`;
-    }, [size, disabled, variant]);
-
-    const labelClasses = useMemo(() => {
-      const sizeClasses = {
-        sm: "text-xs",
-        md: "text-base",
-        lg: "text-lg",
-        xl: "text-xl",
-      }[size];
-      return `block ${sizeClasses} text-ink-gray-5`;
-    }, [size]);
+    const isDisabled = disabled || loading;
+    const stateKey = state ?? "default";
+
+    const sizeClasses = {
+      sm: "text-sm rounded p-2",
+      md: "text-base rounded p-2.5",
+      lg: "text-lg rounded-md p-3",
+    }[size as TextareaSize];
+
+    const subtleClasses = {
+      default:
+        "bg-surface-gray-2 border border-surface-gray-2 hover:bg-surface-gray-3 focus:bg-surface-white focus:ring-2 focus:ring-outline-gray-3",
+      error:
+        "bg-surface-red-1 border border-surface-red-1 hover:bg-surface-red-2 focus:ring-2 focus:ring-outline-red-2",
+      success:
+        "bg-surface-green-2 border border-surface-green-2 hover:bg-surface-green-1 focus:ring-2 focus:ring-outline-green-2",
+      warning:
+        "bg-surface-amber-1 border border-surface-amber-1 hover:bg-surface-amber-2 focus:ring-2 focus:ring-outline-amber-2",
+    };
+
+    const outlineClasses = {
+      default:
+        "bg-surface-white border border-outline-gray-2 hover:border-outline-gray-3 focus:ring-2 focus:ring-outline-gray-3",
+      error:
+        "bg-surface-white border border-outline-red-2 hover:border-outline-red-3 focus:ring-2 focus:ring-outline-red-2",
+      success:
+        "bg-surface-white border border-outline-green-2 hover:border-outline-green-3 focus:ring-2 focus:ring-outline-green-2",
+      warning:
+        "bg-surface-white border border-outline-amber-2 hover:border-outline-amber-3 focus:ring-2 focus:ring-outline-amber-2",
+    };
+
+    const ghostClasses = {
+      default: "hover:bg-surface-gray-3 focus:ring-2 focus:ring-outline-gray-3",
+      error: "hover:bg-surface-red-2 focus:ring-2 focus:ring-outline-red-2",
+      success:
+        "hover:bg-surface-green-1 focus:ring-2 focus:ring-outline-green-2",
+      warning:
+        "hover:bg-surface-amber-2 focus:ring-2 focus:ring-outline-amber-2",
+    };
+
+    const underlineClasses = {
+      default:
+        "bg-transparent border-b border-outline-gray-2 rounded-none px-0 hover:border-outline-gray-3 focus:ring-0 focus:border-outline-gray-3",
+      error:
+        "bg-transparent border-b border-outline-red-2 rounded-none px-0 hover:border-outline-red-3 focus:ring-0 focus:border-outline-red-3",
+      success:
+        "bg-transparent border-b border-outline-green-2 rounded-none px-0 hover:border-outline-green-3 focus:ring-0 focus:border-outline-green-3",
+      warning:
+        "bg-transparent border-b border-outline-amber-2 rounded-none px-0 hover:border-outline-amber-3 focus:ring-0 focus:border-outline-amber-3",
+    };
+
+    const disabledClass =
+      "bg-surface-gray-2 border border-outline-gray-2 text-ink-gray-4 cursor-not-allowed resize-none";
+
+    const variantMap = {
+      subtle: subtleClasses,
+      outline: outlineClasses,
+      ghost: ghostClasses,
+      underline: underlineClasses,
+    };
+
+    const currentVariantClasses = isDisabled
+      ? disabledClass
+      : variantMap[variant][stateKey];
 
     const emitChange = useCallback(
-      (value: string) => {
+      (val: string) => {
         if (onChange) {
           const syntheticEvent = {
-            target: { value },
+            target: { value: val },
+            currentTarget: { value: val },
           } as React.ChangeEvent<HTMLTextAreaElement>;
           onChange(syntheticEvent);
         }
@@ -89,39 +120,42 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     const debouncedEmitChange = useMemo(() => {
       if (debounceTime) {
-        return debounce((value: string) => emitChange(value), debounceTime);
+        return debounce((val: string) => emitChange(val), debounceTime);
       }
       return emitChange;
     }, [debounceTime, emitChange]);
 
-    const handleChange = useCallback(
-      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (debounceTime) {
         debouncedEmitChange(e.target.value);
-      },
-      [debouncedEmitChange]
-    );
+      } else {
+        onChange?.(e);
+      }
+    };
 
     return (
-      <div className="space-y-1.5">
-        {label && (
-          <label className={labelClasses} htmlFor={htmlId}>
-            {label}
-          </label>
-        )}
+      <div className={clsx("w-full", className)} style={style}>
         <textarea
           ref={setRefs}
+          id={id}
           rows={rows}
-          placeholder={placeholder}
-          className={inputClasses}
-          disabled={disabled}
-          id={htmlId}
+          disabled={isDisabled}
+          required={required}
           value={value}
           onChange={handleChange}
-          data-testid="textarea"
+          placeholder={placeholder}
+          className={clsx(
+            "w-full block outline-none appearance-none transition-colors resize-none placeholder:text-ink-gray-5 relative z-0",
+            sizeClasses,
+            currentVariantClasses,
+            !isDisabled && "text-ink-gray-8"
+          )}
+          {...rest}
         />
       </div>
     );
   }
 );
 
+Textarea.displayName = "Textarea";
 export default Textarea;
diff --git a/packages/frappe-ui-react/src/components/textarea/types.ts b/packages/frappe-ui-react/src/components/textarea/types.ts
index 05ab9b69..45ee58ec 100644
--- a/packages/frappe-ui-react/src/components/textarea/types.ts
+++ b/packages/frappe-ui-react/src/components/textarea/types.ts
@@ -1,16 +1,23 @@
-export type TextAreaSize = "sm" | "md" | "lg" | "xl";
-export type TextAreaVariant = "subtle" | "outline";
+import type { TextareaHTMLAttributes } from "react";
 
-export interface TextareaProps {
-  label?: string;
-  size?: TextAreaSize;
-  variant?: TextAreaVariant;
-  placeholder?: string;
+export type TextareaSize = "sm" | "md" | "lg";
+export type TextareaVariant = "subtle" | "outline" | "ghost" | "underline";
+export type TextareaState = "success" | "warning" | "error";
+
+export interface TextareaProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size"
+> {
+  size?: TextareaSize;
+  variant?: TextareaVariant;
+  state?: TextareaState;
+  loading?: boolean;
+  debounce?: number;
   disabled?: boolean;
-  id?: string;
+  htmlId?: string;
   value?: string;
-  debounce?: number;
   rows?: number;
+  placeholder?: string;
+  required?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  htmlId?: string;
 }