♻️(react) improve props propagation

Before we had to edit input components using Field when adding new props
to the latter.

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

@@ -17,17 +17,7 @@ export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (
-    {
+    { indeterminate, className = "", checked, label, ...props }: CheckboxProps,
-      indeterminate,
-      className = "",
-      checked,
-      label,
-      text,
-      textItems,
-      rightText,
-      state,
-      ...props
-    }: CheckboxProps,
     ref,
   ) => {
     const inputRef = useRef<HTMLInputElement>();
@@ -49,13 +39,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           "c__checkbox--disabled": props.disabled,
         })}
       >
-        <Field
+        <Field compact={true} {...props}>
-          text={text}
-          rightText={rightText}
-          compact={true}
-          state={state}
-          textItems={textItems}
-        >
           <div className="c__checkbox__container">
             <div className="c__checkbox__wrapper">
               <input
@@ -87,19 +71,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 export const CheckboxGroup = ({
   children,
-  state,
+  ...props
-  text,
-  textItems,
-  rightText,
 }: PropsWithChildren & FieldProps) => {
   return (
-    <Field
+    <Field className="c__checkbox__group" {...props}>
-      className="c__checkbox__group"
-      state={state}
-      text={text}
-      textItems={textItems}
-      rightText={rightText}
-    >
       <div className="c__checkbox__group__list">{children}</div>
     </Field>
   );

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

@@ -29,11 +29,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       id,
       icon,
       rightIcon,
-      state = "default",
-      text,
-      textItems,
-      rightText,
-      fullWidth,
       charCounter,
       charCounterMax,
       ...props
@@ -51,7 +46,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const idToUse = useRef(id || randomString());
     const rightTextToUse = charCounter
       ? `${value.toString().length}/${charCounterMax}`
-      : rightText;
+      : props.rightText;
 
     const updateLabel = () => {
       if (inputFocus) {
@@ -74,20 +69,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     }, [props.value]);
 
     return (
-      <Field
+      <Field {...props} rightText={rightTextToUse}>
-        state={state}
-        text={text}
-        textItems={textItems}
-        rightText={rightTextToUse}
-        fullWidth={fullWidth}
-      >
         {/* 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__input__wrapper",
-            "c__input__wrapper--" + state,
+            "c__input__wrapper--" + props.state,
             {
               "c__input__wrapper--disabled": props.disabled,
             },

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

@@ -12,14 +12,14 @@ export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
   };
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ label, text, textItems, state, ...props }: RadioProps, ref) => {
+  ({ label, ...props }: RadioProps, ref) => {
     return (
       <label
         className={classNames("c__checkbox", "c__radio", {
           "c__checkbox--disabled": props.disabled,
         })}
       >
-        <Field text={text} compact={true} state={state} textItems={textItems}>
+        <Field compact={true} {...props}>
           <div className="c__checkbox__container">
             <input type="radio" {...props} ref={ref} />
             {label && <div className="c__checkbox__label">{label}</div>}
@@ -32,20 +32,14 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 
 export const RadioGroup = ({
   children,
-  state,
-  text,
-  textItems,
-  rightText,
   style,
+  ...props
 }: PropsWithChildren & FieldProps & { style?: React.CSSProperties }) => {
   return (
     <Field
       className="c__radio__group c__checkbox__group"
-      state={state}
-      text={text}
-      textItems={textItems}
-      rightText={rightText}
       compact={true}
+      {...props}
     >
       <div className="c__checkbox__group__list" style={style}>
         {children}

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -57,10 +57,6 @@ export interface SelectAuxProps extends SubProps {
 export const SelectMonoAux = ({
   children,
   state = "default",
-  text,
-  textItems,
-  rightText,
-  fullWidth,
   options,
   name,
   label,
@@ -72,6 +68,7 @@ export const SelectMonoAux = ({
   disabled,
   clearable = true,
   onBlur,
+  ...props
 }: SelectAuxProps) => {
   const { t } = useCunningham();
   const labelProps = downshiftReturn.getLabelProps();
@@ -88,13 +85,7 @@ export const SelectMonoAux = ({
   }, [value]);
 
   return (
-    <Field
+    <Field state={state} {...props}>
-      state={state}
-      text={text}
-      textItems={textItems}
-      rightText={rightText}
-      fullWidth={fullWidth}
-    >
       <div
         className={classNames(
           "c__select",

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

@@ -9,18 +9,7 @@ export type SwitchProps = InputHTMLAttributes<HTMLInputElement> &
   };
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  (
+  ({ label, labelSide = "left", ...props }: SwitchProps, ref) => {
-    {
-      label,
-      text,
-      textItems,
-      state,
-      fullWidth,
-      labelSide = "left",
-      ...props
-    }: SwitchProps,
-    ref,
-  ) => {
     return (
       <label
         className={classNames(
@@ -29,17 +18,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           "c__switch--" + labelSide,
           {
             "c__checkbox--disabled": props.disabled,
-            "c__switch--full-width": fullWidth,
+            "c__switch--full-width": props.fullWidth,
           },
         )}
       >
-        <Field
+        <Field compact={true} {...props}>
-          text={text}
-          textItems={textItems}
-          compact={true}
-          state={state}
-          fullWidth={fullWidth}
-        >
           <div className="c__checkbox__container">
             {label && <div className="c__checkbox__label">{label}</div>}
             <div className="c__switch__rail__wrapper">