From 20f5bb703b61f7ba58017f8bed760648197f3737 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 4 Mar 2024 15:21:09 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20make=20className=20?=
 =?UTF-8?q?standard=20across=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .changeset/quiet-candles-shake.md             |  5 +++++
 .../react/src/components/Alert/index.spec.tsx |  7 +++++++
 .../src/components/Button/index.spec.tsx      |  7 +++++++
 .../src/components/DataGrid/index.spec.tsx    | 20 +++++++++++++++++++
 .../react/src/components/DataGrid/index.tsx   |  4 +++-
 .../components/Forms/Checkbox/index.spec.tsx  | 15 ++++++++++++++
 .../Forms/Checkbox/index.stories.tsx          |  1 -
 .../src/components/Forms/Checkbox/index.tsx   |  6 +++---
 .../Forms/DatePicker/DatePicker.spec.tsx      | 11 ++++++++++
 .../Forms/DatePicker/DatePickerAux.tsx        |  3 ++-
 .../Forms/DatePicker/DateRangePicker.spec.tsx | 14 +++++++++++++
 .../Forms/FileUploader/index.spec.tsx         | 12 +++++++++++
 .../components/Forms/FileUploader/index.tsx   |  2 +-
 .../src/components/Forms/Input/index.spec.tsx |  7 +++++++
 .../src/components/Forms/Input/index.tsx      |  5 +----
 .../src/components/Forms/Radio/index.spec.tsx | 14 +++++++++++++
 .../src/components/Forms/Radio/index.tsx      |  7 ++++---
 .../src/components/Forms/Select/mono.spec.tsx | 19 ++++++++++++++++++
 .../components/Forms/Select/multi.spec.tsx    | 20 +++++++++++++++++++
 .../components/Forms/Switch/index.spec.tsx    |  7 +++++++
 .../src/components/Forms/Switch/index.tsx     |  6 +++++-
 .../components/Forms/TextArea/index.spec.tsx  |  8 ++++++++
 .../src/components/Forms/TextArea/index.tsx   |  5 +++--
 23 files changed, 188 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/quiet-candles-shake.md

diff --git a/.changeset/quiet-candles-shake.md b/.changeset/quiet-candles-shake.md
new file mode 100644
index 0000000..6272f5a
--- /dev/null
+++ b/.changeset/quiet-candles-shake.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+make className standard across components
diff --git a/packages/react/src/components/Alert/index.spec.tsx b/packages/react/src/components/Alert/index.spec.tsx
index a309400..de70129 100644
--- a/packages/react/src/components/Alert/index.spec.tsx
+++ b/packages/react/src/components/Alert/index.spec.tsx
@@ -249,4 +249,11 @@ describe("<Alert/>", () => {
       screen.queryByText("Additional information"),
     ).not.toBeInTheDocument();
   });
+
+  it("renders with className", async () => {
+    render(<Alert className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__alert.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Button/index.spec.tsx b/packages/react/src/components/Button/index.spec.tsx
index 1891254..5f46e32 100644
--- a/packages/react/src/components/Button/index.spec.tsx
+++ b/packages/react/src/components/Button/index.spec.tsx
@@ -87,4 +87,11 @@ describe("<Button/>", () => {
       tokens.themes.default.components.button["border-radius"],
     ).toBeDefined();
   });
+
+  it("renders with className", async () => {
+    render(<Button className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__button.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index 83378fd..c219e12 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -382,6 +382,26 @@ describe("<DataGrid/>", () => {
     });
   });
 
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <DataGrid
+          columns={[
+            {
+              field: "name",
+              headerName: "Name",
+            },
+          ]}
+          rows={[]}
+          className="my-custom-class"
+        />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__datagrid.my-custom-class"),
+    ).toBeInTheDocument();
+  });
+
   it("should render column with specific width", async () => {
     const database = Array.from(Array(10)).map(() => ({
       id: faker.string.uuid(),
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 27873b5..4476f01 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -64,6 +64,7 @@ export interface BaseProps<T extends Row = Row> {
   emptyCta?: ReactNode;
   hideEmptyPlaceholderImage?: boolean;
   enableSorting?: boolean;
+  className?: string;
 }
 
 export interface DataGridProps<T extends Row = Row> extends BaseProps<T> {
@@ -86,6 +87,7 @@ export const DataGrid = <T extends Row>({
   onRowSelectionChange,
   rowSelection,
   tableOptions,
+  className,
   emptyPlaceholderLabel,
   emptyCta,
   hideEmptyPlaceholderImage,
@@ -297,7 +299,7 @@ export const DataGrid = <T extends Row>({
 
   return (
     <div
-      className={classNames("c__datagrid", {
+      className={classNames("c__datagrid", className, {
         "c__datagrid--empty": isEmpty,
         "c__datagrid--loading": isLoading,
       })}
diff --git a/packages/react/src/components/Forms/Checkbox/index.spec.tsx b/packages/react/src/components/Forms/Checkbox/index.spec.tsx
index 6cf9808..e4fc6b8 100644
--- a/packages/react/src/components/Forms/Checkbox/index.spec.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.spec.tsx
@@ -1,6 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import React, { useState } from "react";
 import { render, screen } from "@testing-library/react";
+import { expect } from "vitest";
 import {
   Checkbox,
   CheckboxGroup,
@@ -171,4 +172,18 @@ describe("<Checkbox/>", () => {
     expect(input.checked).toEqual(false);
     screen.getByText("Checked = false|");
   });
+  it("renders with className", async () => {
+    render(
+      <Checkbox label="Agree" checked={true} className="my-custom-class" />,
+    );
+    expect(
+      document.querySelector(".c__checkbox.my-custom-class"),
+    ).toBeInTheDocument();
+  });
+  it("renders group with className", async () => {
+    render(<CheckboxGroup className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__checkbox__group.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.tsx b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
index d5002b1..c6ca072 100644
--- a/packages/react/src/components/Forms/Checkbox/index.stories.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
@@ -22,7 +22,6 @@ const Template: StoryFn<typeof Checkbox> = (args) => (
 
 export const Default = {
   render: Template,
-  args: {},
 };
 
 export const Checked = {
diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx
index dff2f3a..98a914d 100644
--- a/packages/react/src/components/Forms/Checkbox/index.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.tsx
@@ -49,7 +49,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <label
-        className={classNames("c__checkbox", {
+        className={classNames("c__checkbox", className, {
           "c__checkbox--disabled": props.disabled,
           "c__checkbox--full-width": props.fullWidth,
         })}
@@ -59,7 +59,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             <div className="c__checkbox__wrapper">
               <input
                 type="checkbox"
-                className={className}
                 {...inputProps}
                 onChange={(e) => {
                   setValue(e.target.checked);
@@ -86,10 +85,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 export const CheckboxGroup = ({
   children,
+  className,
   ...props
 }: PropsWithChildren & FieldProps) => {
   return (
-    <Field className="c__checkbox__group" {...props}>
+    <Field className={classNames("c__checkbox__group", className)} {...props}>
       <div className="c__checkbox__group__list">{children}</div>
     </Field>
   );
diff --git a/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx b/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
index 25a983a..087dd02 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
@@ -1448,4 +1448,15 @@ describe("<DatePicker/>", () => {
     // Make sure value is selected, with the same time as the initial value.
     screen.getByText(`Value = 2023-04-12T12:00:00.000Z|`);
   });
+
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <DatePicker label="Date" className="my-custom-class" />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 7230bee..aaec424 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -57,6 +57,7 @@ export type DatePickerAuxProps = PropsWithChildren &
 const DatePickerAux = forwardRef(
   (
     {
+      className,
       pickerState,
       pickerProps,
       onClear,
@@ -86,7 +87,7 @@ const DatePickerAux = forwardRef(
       <I18nProvider locale={locale || currentLocale}>
         <Field
           {...props}
-          className={classNames({
+          className={classNames(className, {
             "c__date-picker__range__container": isRange,
           })}
         >
diff --git a/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx b/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
index 7b05d42..472feee 100644
--- a/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
@@ -1175,4 +1175,18 @@ describe("<DateRangePicker/>", () => {
       datepickerEnd: "",
     });
   });
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <DateRangePicker
+          startLabel="Start"
+          endLabel="End"
+          className="my-custom-class"
+        />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/FileUploader/index.spec.tsx b/packages/react/src/components/Forms/FileUploader/index.spec.tsx
index 686afba..3237539 100644
--- a/packages/react/src/components/Forms/FileUploader/index.spec.tsx
+++ b/packages/react/src/components/Forms/FileUploader/index.spec.tsx
@@ -1,6 +1,7 @@
 import { act, render, screen } from "@testing-library/react";
 import React, { useRef, useState } from "react";
 import userEvent from "@testing-library/user-event";
+import { expect } from "vitest";
 import { CunninghamProvider } from ":/components/Provider";
 import {
   FileUploader,
@@ -273,6 +274,17 @@ describe("<FileUploader />", () => {
       });
       screen.getByText("Value: |");
     });
+
+    it("renders with className", async () => {
+      render(
+        <CunninghamProvider>
+          <FileUploader className="my-custom-class" />
+        </CunninghamProvider>,
+      );
+      expect(
+        document.querySelector(".c__field.my-custom-class"),
+      ).toBeInTheDocument();
+    });
   });
   describe("Multi", () => {
     const expectFiles = (expectedFiles: { name: string; specs: string }[]) => {
diff --git a/packages/react/src/components/Forms/FileUploader/index.tsx b/packages/react/src/components/Forms/FileUploader/index.tsx
index 0cdb102..b22a2a4 100644
--- a/packages/react/src/components/Forms/FileUploader/index.tsx
+++ b/packages/react/src/components/Forms/FileUploader/index.tsx
@@ -28,7 +28,7 @@ export interface FileUploaderRefType {
 export const FileUploader = forwardRef<FileUploaderRefType, FileUploaderProps>(
   ({ fullWidth, ...props }, ref) => {
     return (
-      <Field fullWidth={fullWidth}>
+      <Field fullWidth={fullWidth} className={props.className}>
         {props.multiple ? (
           <FileUploaderMulti {...props} ref={ref} />
         ) : (
diff --git a/packages/react/src/components/Forms/Input/index.spec.tsx b/packages/react/src/components/Forms/Input/index.spec.tsx
index 5219cff..4912b41 100644
--- a/packages/react/src/components/Forms/Input/index.spec.tsx
+++ b/packages/react/src/components/Forms/Input/index.spec.tsx
@@ -235,4 +235,11 @@ describe("<Input/>", () => {
     render(<Input {...propsInput} />);
     expect(spyError).not.toHaveBeenCalled();
   });
+
+  it("renders with className", async () => {
+    render(<Input label="First name" className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
index 1ea7d44..a2bd254 100644
--- a/packages/react/src/components/Forms/Input/index.tsx
+++ b/packages/react/src/components/Forms/Input/index.tsx
@@ -39,9 +39,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     ref,
   ) => {
     const classes = ["c__input"];
-    if (className) {
-      classes.push(className);
-    }
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [inputFocus, setInputFocus] = useState(false);
     const [value, setValue] = useState(defaultValue || props.value || "");
@@ -82,7 +79,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     } = props;
 
     return (
-      <Field {...props} rightText={rightTextToUse}>
+      <Field {...props} rightText={rightTextToUse} className={className}>
         {/* 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 */}
diff --git a/packages/react/src/components/Forms/Radio/index.spec.tsx b/packages/react/src/components/Forms/Radio/index.spec.tsx
index 3ae7a02..0bddeb6 100644
--- a/packages/react/src/components/Forms/Radio/index.spec.tsx
+++ b/packages/react/src/components/Forms/Radio/index.spec.tsx
@@ -1,6 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import { expect } from "vitest";
 import {
   Radio,
   RadioGroup,
@@ -138,4 +139,17 @@ describe("<Radio/>", () => {
     render(<Radio {...propsInput} />);
     expect(spyError).not.toHaveBeenCalled();
   });
+
+  it("renders with className", async () => {
+    render(<Radio label="Agree" checked={true} className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__checkbox.my-custom-class"),
+    ).toBeInTheDocument();
+  });
+  it("renders group with className", async () => {
+    render(<RadioGroup className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__checkbox__group.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/Radio/index.tsx b/packages/react/src/components/Forms/Radio/index.tsx
index e93805d..eb57979 100644
--- a/packages/react/src/components/Forms/Radio/index.tsx
+++ b/packages/react/src/components/Forms/Radio/index.tsx
@@ -16,7 +16,7 @@ export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
   RadioOnlyProps;
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ label, ...props }: RadioProps, ref) => {
+  ({ className, label, ...props }: RadioProps, ref) => {
     const {
       compact,
       fullWidth,
@@ -29,7 +29,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 
     return (
       <label
-        className={classNames("c__checkbox", "c__radio", {
+        className={classNames("c__checkbox", "c__radio", className, {
           "c__checkbox--disabled": props.disabled,
           "c__checkbox--full-width": props.fullWidth,
         })}
@@ -46,13 +46,14 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 );
 
 export const RadioGroup = ({
+  className,
   children,
   style,
   ...props
 }: PropsWithChildren & FieldProps & { style?: React.CSSProperties }) => {
   return (
     <Field
-      className="c__radio__group c__checkbox__group"
+      className={classNames("c__radio__group c__checkbox__group", className)}
       compact={true}
       {...props}
     >
diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
index 4193987..8edda87 100644
--- a/packages/react/src/components/Forms/Select/mono.spec.tsx
+++ b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -1976,4 +1976,23 @@ describe("<Select/>", () => {
       });
     });
   });
+
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <Select
+          label="City"
+          options={[
+            {
+              label: "Paris",
+            },
+          ]}
+          className="my-custom-class"
+        />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx
index ea92979..d957cd0 100644
--- a/packages/react/src/components/Forms/Select/multi.spec.tsx
+++ b/packages/react/src/components/Forms/Select/multi.spec.tsx
@@ -1871,4 +1871,24 @@ describe("<Select multi={true} />", () => {
       });
     });
   });
+
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <Select
+          label="City"
+          options={[
+            {
+              label: "Paris",
+            },
+          ]}
+          multi={true}
+          className="my-custom-class"
+        />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/Switch/index.spec.tsx b/packages/react/src/components/Forms/Switch/index.spec.tsx
index 2cc74a2..0401d62 100644
--- a/packages/react/src/components/Forms/Switch/index.spec.tsx
+++ b/packages/react/src/components/Forms/Switch/index.spec.tsx
@@ -156,4 +156,11 @@ describe("<Switch/>", () => {
     render(<Switch {...propsInput} />);
     expect(spyError).not.toHaveBeenCalled();
   });
+
+  it("renders with className", async () => {
+    render(<Switch className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__switch.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/components/Forms/Switch/index.tsx b/packages/react/src/components/Forms/Switch/index.tsx
index b2c6478..5e607d2 100644
--- a/packages/react/src/components/Forms/Switch/index.tsx
+++ b/packages/react/src/components/Forms/Switch/index.tsx
@@ -15,6 +15,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   ({ label, labelSide = "left", ...props }: SwitchProps, ref) => {
     const {
       compact,
+      className,
       fullWidth,
       rightText,
       state,
@@ -23,19 +24,22 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...inputProps
     } = props;
 
+    const { className: excludeClassName, ...fieldProps } = props;
+
     return (
       <label
         className={classNames(
           "c__checkbox",
           "c__switch",
           "c__switch--" + labelSide,
+          className,
           {
             "c__checkbox--disabled": props.disabled,
             "c__switch--full-width": props.fullWidth,
           },
         )}
       >
-        <Field compact={true} {...props}>
+        <Field compact={true} {...fieldProps}>
           <div className="c__checkbox__container">
             {label && <div className="c__checkbox__label">{label}</div>}
             <div className="c__switch__rail__wrapper">
diff --git a/packages/react/src/components/Forms/TextArea/index.spec.tsx b/packages/react/src/components/Forms/TextArea/index.spec.tsx
index a9cedbd..eea9b45 100644
--- a/packages/react/src/components/Forms/TextArea/index.spec.tsx
+++ b/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();
+  });
 });
diff --git a/packages/react/src/components/Forms/TextArea/index.tsx b/packages/react/src/components/Forms/TextArea/index.tsx
index fa9cb22..27109e5 100644
--- a/packages/react/src/components/Forms/TextArea/index.tsx
+++ b/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 */}