From fb0c8c0f10063c8106e3674d6a48d5ef7dbdde5b Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 26 Jan 2026 20:07:46 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(TextArea)=20add=20classic=20variant?=
 =?UTF-8?q?=20and=20hideLabel=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add variant prop with classic mode support
- Add hideLabel prop for accessible hidden labels
- Label rendered outside wrapper in classic mode
- Native placeholder support in classic mode
- Compact height in classic mode
- Add unit tests and Storybook stories

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/Forms/TextArea/index.scss  |  18 ++++
 .../components/Forms/TextArea/index.spec.tsx  | 100 ++++++++++++++++++
 .../Forms/TextArea/index.stories.tsx          |  60 +++++++++++
 .../src/components/Forms/TextArea/index.tsx   |  99 +++++++++++------
 4 files changed, 242 insertions(+), 35 deletions(-)

diff --git a/packages/react/src/components/Forms/TextArea/index.scss b/packages/react/src/components/Forms/TextArea/index.scss
index 86e75a4..e10c821 100644
--- a/packages/react/src/components/Forms/TextArea/index.scss
+++ b/packages/react/src/components/Forms/TextArea/index.scss
@@ -1,3 +1,14 @@
+.c__textarea__label {
+  display: block;
+  font-size: var(--c--components--forms-labelledbox--classic-label-font-size);
+  color: var(--c--components--forms-labelledbox--label-color--small);
+  margin-bottom: var(--c--components--forms-labelledbox--classic-label-margin-bottom);
+
+  &--disabled {
+    color: var(--c--components--forms-labelledbox--label-color--small--disabled);
+  }
+}
+
 .c__field--textarea {
   width: inherit;
   min-width: var(--c--components--forms-field--width);
@@ -75,6 +86,13 @@
       border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
     }
   }
+
+  &--classic {
+    .c__textarea {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
 }
 
 .c__field {
diff --git a/packages/react/src/components/Forms/TextArea/index.spec.tsx b/packages/react/src/components/Forms/TextArea/index.spec.tsx
index 72f93a9..98095a0 100644
--- a/packages/react/src/components/Forms/TextArea/index.spec.tsx
+++ b/packages/react/src/components/Forms/TextArea/index.spec.tsx
@@ -199,4 +199,104 @@ describe("<TextArea/>", () => {
       document.querySelector(".c__field--textarea.my-custom-class"),
     ).toBeInTheDocument();
   });
+
+  describe("classic variant", () => {
+    it("renders with classic variant", () => {
+      render(<TextArea label="Description" variant="classic" />);
+      // In classic mode, label is rendered outside the wrapper with its own class
+      expect(document.querySelector(".c__textarea__label")).toBeInTheDocument();
+      expect(screen.getByText("Description")).toBeInTheDocument();
+    });
+
+    it("label is always static in classic variant", async () => {
+      const user = userEvent.setup();
+      render(
+        <div>
+          <TextArea label="Description" variant="classic" />
+          <TextArea label="Notes" variant="classic" />
+        </div>,
+      );
+
+      const textarea: HTMLTextAreaElement = screen.getByRole("textbox", {
+        name: "Description",
+      });
+      const label = screen.getByText("Description");
+
+      // In classic variant, label is outside the wrapper and has c__textarea__label class
+      expect(label.classList.contains("c__textarea__label")).toBe(true);
+
+      // Focusing should not change anything
+      await user.click(textarea);
+      expect(label.classList.contains("c__textarea__label")).toBe(true);
+
+      // Typing should not change anything
+      await user.type(textarea, "Some text");
+      expect(label.classList.contains("c__textarea__label")).toBe(true);
+    });
+
+    it("shows placeholder in classic variant", () => {
+      render(
+        <TextArea
+          label="Description"
+          variant="classic"
+          placeholder="Enter a description"
+        />,
+      );
+      const textarea: HTMLTextAreaElement = screen.getByRole("textbox", {
+        name: "Description",
+      });
+      expect(textarea.placeholder).toEqual("Enter a description");
+    });
+
+    it("ignores placeholder in floating variant", () => {
+      render(
+        <TextArea
+          label="Description"
+          variant="floating"
+          placeholder="Enter a description"
+        />,
+      );
+      const textarea: HTMLTextAreaElement = screen.getByRole("textbox", {
+        name: "Description",
+      });
+      expect(textarea.placeholder).toEqual("");
+    });
+
+    it("defaults to floating variant (placeholder ignored)", () => {
+      render(
+        <TextArea label="Description" placeholder="Enter a description" />,
+      );
+      const textarea: HTMLTextAreaElement = screen.getByRole("textbox", {
+        name: "Description",
+      });
+      expect(textarea.placeholder).toEqual("");
+      expect(
+        document.querySelector(".c__textarea__label"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("hideLabel", () => {
+    it("hides label visually but keeps it accessible in floating variant", () => {
+      render(<TextArea label="Description" hideLabel />);
+      const textarea = screen.getByRole("textbox", { name: "Description" });
+      expect(textarea).toBeInTheDocument();
+      // Label should be visually hidden via LabelledBox
+      const label = screen.getByText("Description");
+      expect(label.closest("label")).toHaveClass("c__offscreen");
+    });
+
+    it("hides label visually but keeps it accessible in classic variant", () => {
+      render(<TextArea label="Description" variant="classic" hideLabel />);
+      const textarea = screen.getByRole("textbox", { name: "Description" });
+      expect(textarea).toBeInTheDocument();
+      // Label should be visually hidden with c__offscreen class
+      const label = screen.getByText("Description");
+      expect(label).toHaveClass("c__offscreen");
+      // The visible label class should not be present
+      expect(
+        document.querySelector(".c__textarea__label"),
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/react/src/components/Forms/TextArea/index.stories.tsx b/packages/react/src/components/Forms/TextArea/index.stories.tsx
index 1f4758b..1520c49 100644
--- a/packages/react/src/components/Forms/TextArea/index.stories.tsx
+++ b/packages/react/src/components/Forms/TextArea/index.stories.tsx
@@ -10,6 +10,12 @@ export default {
   args: {
     rows: 4,
   },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["floating", "classic"],
+    },
+  },
 } as Meta<typeof TextArea>;
 
 export const ShowCase = () => {
@@ -175,6 +181,60 @@ export const WithRef = () => {
   );
 };
 
+export const ClassicVariant = {
+  args: {
+    label: "Description",
+    variant: "classic",
+    placeholder: "Enter a description...",
+  },
+};
+
+export const ClassicVariantFilled = {
+  args: {
+    label: "Description",
+    variant: "classic",
+    placeholder: "Enter a description...",
+    defaultValue: "This is a detailed description of the project.",
+  },
+};
+
+export const ClassicVariantDisabled = {
+  args: {
+    label: "Description",
+    variant: "classic",
+    placeholder: "Enter a description...",
+    disabled: true,
+  },
+};
+
+export const ClassicVariantError = {
+  args: {
+    label: "Description",
+    variant: "classic",
+    placeholder: "Enter a description...",
+    defaultValue: "Too short",
+    state: "error",
+    text: "Description must be at least 50 characters",
+  },
+};
+
+export const HiddenLabel = {
+  args: {
+    label: "Notes",
+    hideLabel: true,
+    placeholder: "Add your notes here...",
+  },
+};
+
+export const HiddenLabelClassic = {
+  args: {
+    label: "Notes",
+    variant: "classic",
+    hideLabel: true,
+    placeholder: "Add your notes here...",
+  },
+};
+
 export const FormExample = () => {
   return (
     <div>
diff --git a/packages/react/src/components/Forms/TextArea/index.tsx b/packages/react/src/components/Forms/TextArea/index.tsx
index dc0861a..88fe97e 100644
--- a/packages/react/src/components/Forms/TextArea/index.tsx
+++ b/packages/react/src/components/Forms/TextArea/index.tsx
@@ -8,18 +8,24 @@ import React, {
 import classNames from "classnames";
 import { Field, FieldProps } from ":/components/Forms/Field";
 import { LabelledBox } from ":/components/Forms/LabelledBox";
+import { ClassicLabel } from ":/components/Forms/ClassicLabel";
 import { randomString } from ":/utils";
+import type { FieldVariant } from ":/components/Forms/types";
 
 export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   RefAttributes<HTMLTextAreaElement> &
   FieldProps & {
     label?: string;
+    variant?: FieldVariant;
+    hideLabel?: boolean;
     charCounter?: boolean;
     charCounterMax?: number;
   };
 
 export const TextArea = ({
   label,
+  variant = "floating",
+  hideLabel,
   id,
   defaultValue,
   charCounter,
@@ -27,6 +33,7 @@ export const TextArea = ({
   ref,
   ...props
 }: TextAreaProps) => {
+  const isClassic = variant === "classic";
   const areaRef = useRef<HTMLTextAreaElement | null>(null);
   const [inputFocus, setInputFocus] = useState(false);
   const [value, setValue] = useState(defaultValue || props.value || "");
@@ -55,56 +62,78 @@ export const TextArea = ({
   const { fullWidth, rightText, text, textItems, className, ...areaProps } =
     props;
 
+  const textareaElement = (
+    <textarea
+      className="c__textarea"
+      {...areaProps}
+      placeholder={isClassic ? props.placeholder : undefined}
+      id={idToUse.current}
+      onFocus={(e) => {
+        setInputFocus(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setInputFocus(false);
+        props.onBlur?.(e);
+      }}
+      value={value}
+      onChange={(e) => {
+        setValue(e.target.value);
+        props.onChange?.(e);
+      }}
+      ref={(nativeRef) => {
+        if (ref) {
+          if (typeof ref === "function") {
+            ref(nativeRef);
+          } else {
+            ref.current = nativeRef;
+          }
+        }
+        areaRef.current = nativeRef;
+      }}
+    />
+  );
+
   return (
     <Field
       {...props}
       className={classNames("c__field--textarea", className)}
       rightText={rightTextToUse}
     >
+      {isClassic && (
+        <ClassicLabel
+          label={label}
+          hideLabel={hideLabel}
+          disabled={props.disabled}
+          className="c__textarea__label"
+          disabledClassName="c__textarea__label--disabled"
+          htmlFor={idToUse.current}
+        />
+      )}
       {/* We disabled linting for this specific line because we consider that the onClick props is only used for */}
       {/* mouse users, so this do not engender any issue for accessibility. */}
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         className={classNames("c__textarea__wrapper", {
           "c__textarea__wrapper--disabled": props.disabled,
+          "c__textarea__wrapper--classic": isClassic,
         })}
         onClick={() => areaRef.current?.focus()}
       >
-        <LabelledBox
-          label={label}
-          htmlFor={idToUse.current}
-          labelAsPlaceholder={labelAsPlaceholder}
-          disabled={props.disabled}
-        >
-          <textarea
-            className="c__textarea"
-            {...areaProps}
-            id={idToUse.current}
-            onFocus={(e) => {
-              setInputFocus(true);
-              props.onFocus?.(e);
-            }}
-            onBlur={(e) => {
-              setInputFocus(false);
-              props.onBlur?.(e);
-            }}
-            value={value}
-            onChange={(e) => {
-              setValue(e.target.value);
-              props.onChange?.(e);
-            }}
-            ref={(nativeRef) => {
-              if (ref) {
-                if (typeof ref === "function") {
-                  ref(nativeRef);
-                } else {
-                  ref.current = nativeRef;
-                }
-              }
-              areaRef.current = nativeRef;
-            }}
-          />
-        </LabelledBox>
+        {isClassic ? (
+          textareaElement
+        ) : (
+          <LabelledBox
+            label={label}
+            variant={variant}
+            hideLabel={hideLabel}
+            htmlFor={idToUse.current}
+            labelAsPlaceholder={labelAsPlaceholder}
+            disabled={props.disabled}
+          >
+            {textareaElement}
+          </LabelledBox>
+        )}
       </div>
     </Field>
   );