♻️(react) make className standard across components

The className prop was sometimes set onto the nested element and
sometimes on the container element, which was not consistent. Now
we always set the className onto the upmost element.

packages/react/src/components/Forms/TextArea/index.spec.tsx

@@ -191,4 +191,12 @@ describe("<TextArea/>", () => {
     await user.clear(textarea);
     screen.getByText("Value: .");
   });
+
+  it("renders with className", async () => {
+    render(<TextArea className="my-custom-class" />);
+    screen.debug();
+    expect(
+      document.querySelector(".c__field--textarea.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });

packages/react/src/components/Forms/TextArea/index.tsx

@@ -44,12 +44,13 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       setValue(props.value || "");
     }, [props.value]);
 
-    const { fullWidth, rightText, text, textItems, ...areaProps } = props;
+    const { fullWidth, rightText, text, textItems, className, ...areaProps } =
+      props;
 
     return (
       <Field
         {...props}
-        className="c__field--textarea"
+        className={classNames("c__field--textarea", className)}
         rightText={rightTextToUse}
       >
         {/* We disabled linting for this specific line because we consider that the onClick props is only used for */}