From c7000f37d2846f9487b05962c6a9fcb69f2b632c Mon Sep 17 00:00:00 2001
From: Anthony Le Courric <freelance.anthony@gmail.com>
Date: Mon, 11 Sep 2023 11:40:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20props=20not=20recog?=
 =?UTF-8?q?nized=20on=20the=20input=20element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The props propagation was adding unknown props to the input element,
which was causing an error warning to be displayed in the console.
---
 .changeset/red-dragons-yell.md                |  5 +++
 .../components/Forms/Checkbox/index.spec.tsx  | 30 +++++++++++++++++-
 .../src/components/Forms/Checkbox/index.tsx   | 23 +++++++++++---
 .../src/components/Forms/Input/index.spec.tsx | 29 ++++++++++++++++-
 .../src/components/Forms/Input/index.tsx      | 31 +++++++++++++------
 .../src/components/Forms/Radio/index.spec.tsx | 29 ++++++++++++++++-
 .../src/components/Forms/Radio/index.tsx      | 21 ++++++++++---
 .../components/Forms/Switch/index.spec.tsx    | 26 +++++++++++++++-
 .../src/components/Forms/Switch/index.tsx     | 23 +++++++++++---
 9 files changed, 190 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/red-dragons-yell.md

diff --git a/.changeset/red-dragons-yell.md b/.changeset/red-dragons-yell.md
new file mode 100644
index 0000000..41840e5
--- /dev/null
+++ b/.changeset/red-dragons-yell.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+fix props not recognized on the input element
diff --git a/packages/react/src/components/Forms/Checkbox/index.spec.tsx b/packages/react/src/components/Forms/Checkbox/index.spec.tsx
index 2bbffae..a4fad2b 100644
--- a/packages/react/src/components/Forms/Checkbox/index.spec.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.spec.tsx
@@ -1,9 +1,20 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
+import { FieldProps } from "../Field";
+import {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxOnlyProps,
+} from ":/components/Forms/Checkbox/index";
+
+const spyError = vi.spyOn(global.console, "error");
 
 describe("<Checkbox/>", () => {
+  afterAll(() => {
+    spyError.mockRestore();
+  });
+
   it("renders and can be checked", async () => {
     const user = userEvent.setup();
     render(<Checkbox label="Agree" />);
@@ -106,4 +117,21 @@ describe("<Checkbox/>", () => {
       document.querySelector(".c__checkbox__group.c__field.c__field--error"),
     ).toBeInTheDocument();
   });
+
+  it("checks the props doesn't create error warning", async () => {
+    const propsInput: Required<FieldProps & CheckboxOnlyProps> = {
+      label: "First name",
+      fullWidth: true,
+      className: "c__field--full-width",
+      compact: false,
+      state: "default",
+      text: "my text",
+      textItems: ["my text item 1", "my text item 2"],
+      rightText: "my right text",
+      indeterminate: true,
+    };
+
+    render(<Checkbox {...propsInput} />);
+    expect(spyError).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx
index 0a5f117..c1b7c7e 100644
--- a/packages/react/src/components/Forms/Checkbox/index.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.tsx
@@ -9,11 +9,14 @@ import React, {
 import classNames from "classnames";
 import { Field, FieldProps } from ":/components/Forms/Field";
 
+export type CheckboxOnlyProps = {
+  indeterminate?: boolean;
+  label?: string;
+};
+
 export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
-  FieldProps & {
-    indeterminate?: boolean;
-    label?: string;
-  };
+  FieldProps &
+  CheckboxOnlyProps;
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
@@ -33,6 +36,16 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       }
     }, [indeterminate]);
 
+    const {
+      compact,
+      fullWidth,
+      rightText,
+      state,
+      text,
+      textItems,
+      ...inputProps
+    } = props;
+
     return (
       <label
         className={classNames("c__checkbox", {
@@ -46,7 +59,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               <input
                 type="checkbox"
                 className={className}
-                {...props}
+                {...inputProps}
                 onChange={(e) => {
                   setValue(e.target.checked);
                   props.onChange?.(e);
diff --git a/packages/react/src/components/Forms/Input/index.spec.tsx b/packages/react/src/components/Forms/Input/index.spec.tsx
index a7e3af7..ef1a036 100644
--- a/packages/react/src/components/Forms/Input/index.spec.tsx
+++ b/packages/react/src/components/Forms/Input/index.spec.tsx
@@ -2,10 +2,17 @@ import { render, screen, waitFor } from "@testing-library/react";
 import React, { useRef } from "react";
 import userEvent from "@testing-library/user-event";
 import { expect } from "vitest";
-import { Input } from ":/components/Forms/Input/index";
+import { FieldProps } from "../Field";
+import { Input, InputOnlyProps } from ":/components/Forms/Input/index";
 import { Button } from ":/components/Button";
 
+const spyError = vi.spyOn(global.console, "error");
+
 describe("<Input/>", () => {
+  afterAll(() => {
+    spyError.mockRestore();
+  });
+
   it("renders and can type", async () => {
     const user = userEvent.setup();
     render(<Input label="First name" />);
@@ -208,4 +215,24 @@ describe("<Input/>", () => {
     await user.clear(input);
     screen.getByText("Value: .");
   });
+
+  it("checks the props doesn't create error warning", async () => {
+    const propsInput: Required<FieldProps & InputOnlyProps> = {
+      label: "First name",
+      fullWidth: true,
+      charCounter: true,
+      charCounterMax: 15,
+      className: "c__field--full-width",
+      compact: false,
+      state: "default",
+      icon: "my icon",
+      rightIcon: "my right icon",
+      text: "my text",
+      textItems: ["my text item 1", "my text item 2"],
+      rightText: "my right text",
+    };
+
+    render(<Input {...propsInput} />);
+    expect(spyError).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
index 9e568a9..1ea7d44 100644
--- a/packages/react/src/components/Forms/Input/index.tsx
+++ b/packages/react/src/components/Forms/Input/index.tsx
@@ -11,14 +11,17 @@ import { randomString } from ":/utils";
 import { Field, FieldProps } from ":/components/Forms/Field";
 import { LabelledBox } from ":/components/Forms/LabelledBox";
 
+export type InputOnlyProps = {
+  label?: string;
+  icon?: ReactNode;
+  rightIcon?: ReactNode;
+  charCounter?: boolean;
+  charCounterMax?: number;
+};
+
 export type InputProps = InputHTMLAttributes<HTMLInputElement> &
-  FieldProps & {
-    label?: string;
-    icon?: ReactNode;
-    rightIcon?: ReactNode;
-    charCounter?: boolean;
-    charCounterMax?: number;
-  };
+  FieldProps &
+  InputOnlyProps;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
@@ -68,6 +71,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       setValue(props.value || "");
     }, [props.value]);
 
+    const {
+      compact,
+      fullWidth,
+      rightText,
+      state,
+      text,
+      textItems,
+      ...inputProps
+    } = props;
+
     return (
       <Field {...props} rightText={rightTextToUse}>
         {/* We disabled linting for this specific line because we consider that the onClick props is only used for */}
@@ -76,7 +89,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <div
           className={classNames(
             "c__input__wrapper",
-            "c__input__wrapper--" + props.state,
+            props.state && "c__input__wrapper--" + props.state,
             {
               "c__input__wrapper--disabled": props.disabled,
             },
@@ -95,7 +108,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             <input
               type="text"
               className={classes.join(" ")}
-              {...props}
+              {...inputProps}
               id={idToUse.current}
               value={value}
               onFocus={(e) => {
diff --git a/packages/react/src/components/Forms/Radio/index.spec.tsx b/packages/react/src/components/Forms/Radio/index.spec.tsx
index 6926c7c..b41f210 100644
--- a/packages/react/src/components/Forms/Radio/index.spec.tsx
+++ b/packages/react/src/components/Forms/Radio/index.spec.tsx
@@ -1,9 +1,20 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
+import { FieldProps } from "../Field";
+import {
+  Radio,
+  RadioGroup,
+  RadioOnlyProps,
+} from ":/components/Forms/Radio/index";
+
+const spyError = vi.spyOn(global.console, "error");
 
 describe("<Radio/>", () => {
+  afterAll(() => {
+    spyError.mockRestore();
+  });
+
   it("should render", async () => {
     render(<Radio label="Yes" />);
     expect(screen.getByLabelText("Yes")).toBeInTheDocument();
@@ -111,4 +122,20 @@ describe("<Radio/>", () => {
       document.querySelector(".c__radio__group.c__field.c__field--error"),
     ).toBeInTheDocument();
   });
+
+  it("checks the props doesn't create error warning", async () => {
+    const propsInput: Required<FieldProps & RadioOnlyProps> = {
+      label: "First name",
+      fullWidth: true,
+      className: "c__field--full-width",
+      compact: false,
+      state: "default",
+      text: "my text",
+      textItems: ["my text item 1", "my text item 2"],
+      rightText: "my right text",
+    };
+
+    render(<Radio {...propsInput} />);
+    expect(spyError).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/components/Forms/Radio/index.tsx b/packages/react/src/components/Forms/Radio/index.tsx
index d428f23..42ec8e3 100644
--- a/packages/react/src/components/Forms/Radio/index.tsx
+++ b/packages/react/src/components/Forms/Radio/index.tsx
@@ -6,13 +6,26 @@ import React, {
 import classNames from "classnames";
 import { Field, FieldProps } from ":/components/Forms/Field";
 
+export type RadioOnlyProps = {
+  label?: string;
+};
+
 export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
-  FieldProps & {
-    label?: string;
-  };
+  FieldProps &
+  RadioOnlyProps;
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
   ({ label, ...props }: RadioProps, ref) => {
+    const {
+      compact,
+      fullWidth,
+      rightText,
+      state,
+      text,
+      textItems,
+      ...inputProps
+    } = props;
+
     return (
       <label
         className={classNames("c__checkbox", "c__radio", {
@@ -22,7 +35,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       >
         <Field compact={true} {...props}>
           <div className="c__checkbox__container">
-            <input type="radio" {...props} ref={ref} />
+            <input type="radio" {...inputProps} ref={ref} />
             {label && <div className="c__checkbox__label">{label}</div>}
           </div>
         </Field>
diff --git a/packages/react/src/components/Forms/Switch/index.spec.tsx b/packages/react/src/components/Forms/Switch/index.spec.tsx
index f16dea9..2a30781 100644
--- a/packages/react/src/components/Forms/Switch/index.spec.tsx
+++ b/packages/react/src/components/Forms/Switch/index.spec.tsx
@@ -1,9 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { Switch } from ":/components/Forms/Switch/index";
+import { FieldProps } from "../Field";
+import { Switch, SwitchOnlyProps } from ":/components/Forms/Switch/index";
+
+const spyError = vi.spyOn(global.console, "error");
 
 describe("<Switch/>", () => {
+  afterAll(() => {
+    spyError.mockRestore();
+  });
+
   it("renders and can be checked", async () => {
     const user = userEvent.setup();
     render(<Switch label="Newsletter" />);
@@ -132,4 +139,21 @@ describe("<Switch/>", () => {
     expect(input.checked).toEqual(false);
     screen.queryByText("Value: false.");
   });
+
+  it("checks the props doesn't create error warning", async () => {
+    const propsInput: Required<FieldProps & SwitchOnlyProps> = {
+      label: "First name",
+      fullWidth: true,
+      className: "c__field--full-width",
+      compact: false,
+      state: "default",
+      text: "my text",
+      textItems: ["my text item 1", "my text item 2"],
+      rightText: "my right text",
+      labelSide: "right",
+    };
+
+    render(<Switch {...propsInput} />);
+    expect(spyError).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/components/Forms/Switch/index.tsx b/packages/react/src/components/Forms/Switch/index.tsx
index c3b997c..b2c6478 100644
--- a/packages/react/src/components/Forms/Switch/index.tsx
+++ b/packages/react/src/components/Forms/Switch/index.tsx
@@ -2,14 +2,27 @@ import React, { InputHTMLAttributes, forwardRef } from "react";
 import classNames from "classnames";
 import { Field, FieldProps } from ":/components/Forms/Field";
 
+export type SwitchOnlyProps = {
+  label?: string;
+  labelSide?: "left" | "right";
+};
+
 export type SwitchProps = InputHTMLAttributes<HTMLInputElement> &
-  FieldProps & {
-    label?: string;
-    labelSide?: "left" | "right";
-  };
+  FieldProps &
+  SwitchOnlyProps;
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   ({ label, labelSide = "left", ...props }: SwitchProps, ref) => {
+    const {
+      compact,
+      fullWidth,
+      rightText,
+      state,
+      text,
+      textItems,
+      ...inputProps
+    } = props;
+
     return (
       <label
         className={classNames(
@@ -26,7 +39,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <div className="c__checkbox__container">
             {label && <div className="c__checkbox__label">{label}</div>}
             <div className="c__switch__rail__wrapper">
-              <input type="checkbox" {...props} ref={ref} />
+              <input type="checkbox" {...inputProps} ref={ref} />
               <div className="c__switch__rail" />
             </div>
           </div>