From 0c98eab2091bd656b5a393cbf1b3694c3a7dd503 Mon Sep 17 00:00:00 2001
From: mkrds <mkordas@pgs-soft.com>
Date: Mon, 17 May 2021 14:55:00 +0200
Subject: [PATCH] fix(checkable-inputs): fix name prop forwarding

---
 .../checkbox/__snapshots__/checkbox-group.spec.js.snap        | 2 --
 .../components/checkbox/__snapshots__/checkbox.spec.js.snap   | 1 -
 .../components/checkbox/checkbox.component.js                 | 4 ++++
 .../components/radio-button/radio-button.d.ts                 | 2 --
 .../components/switch/__snapshots__/switch.spec.js.snap       | 1 -
 src/__experimental__/components/switch/switch.component.js    | 4 ++++
 src/__internal__/checkable-input/checkable-input.d.ts         | 2 ++
 .../__snapshots__/flat-table-checkbox.spec.js.snap            | 2 --
 8 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/__experimental__/components/checkbox/__snapshots__/checkbox-group.spec.js.snap b/src/__experimental__/components/checkbox/__snapshots__/checkbox-group.spec.js.snap
index 582afe76f7..a5c1d9b603 100644
--- a/src/__experimental__/components/checkbox/__snapshots__/checkbox-group.spec.js.snap
+++ b/src/__experimental__/components/checkbox/__snapshots__/checkbox-group.spec.js.snap
@@ -155,7 +155,6 @@ exports[`CheckboxGroup renders as expected 1`] = `
       <div
         className="c2 c3"
         data-component="checkbox"
-        name="check-required"
       >
         <div
           className="c4"
@@ -209,7 +208,6 @@ exports[`CheckboxGroup renders as expected 1`] = `
       <div
         className="c2 c3"
         data-component="checkbox"
-        name="check-optional"
       >
         <div
           className="c4"
diff --git a/src/__experimental__/components/checkbox/__snapshots__/checkbox.spec.js.snap b/src/__experimental__/components/checkbox/__snapshots__/checkbox.spec.js.snap
index aa8ec78965..1e20c53f58 100644
--- a/src/__experimental__/components/checkbox/__snapshots__/checkbox.spec.js.snap
+++ b/src/__experimental__/components/checkbox/__snapshots__/checkbox.spec.js.snap
@@ -416,7 +416,6 @@ exports[`Checkbox base theme renders as expected 1`] = `
 <div
   className="c0"
   data-component="checkbox"
-  name="my-checkbox"
 >
   <div
     className="c1"
diff --git a/src/__experimental__/components/checkbox/checkbox.component.js b/src/__experimental__/components/checkbox/checkbox.component.js
index 04f0ec91ba..3d4b40678c 100644
--- a/src/__experimental__/components/checkbox/checkbox.component.js
+++ b/src/__experimental__/components/checkbox/checkbox.component.js
@@ -20,6 +20,7 @@ const Checkbox = ({
   ml,
   adaptiveSpacingBreakpoint,
   required,
+  name,
   ...props
 }) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
@@ -31,6 +32,7 @@ const Checkbox = ({
 
   const inputProps = {
     ...props,
+    name,
     onChange,
     onBlur,
     labelInline: true,
@@ -80,6 +82,8 @@ Checkbox.propTypes = {
   labelSpacing: PropTypes.oneOf([1, 2]),
   /** Sets percentage-based label width */
   labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** The name of the the Checkbox input  */
+  name: PropTypes.string,
   /** Accepts a callback function which can be used to update parent state on change */
   onChange: PropTypes.func,
   /** Accepts a callback function which is triggered on blur event */
diff --git a/src/__experimental__/components/radio-button/radio-button.d.ts b/src/__experimental__/components/radio-button/radio-button.d.ts
index 35d96fe119..1a38ebda7d 100644
--- a/src/__experimental__/components/radio-button/radio-button.d.ts
+++ b/src/__experimental__/components/radio-button/radio-button.d.ts
@@ -9,8 +9,6 @@ export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps
   inline?: boolean;
   /** Text alignment of the label */
   labelAlign?: OptionsHelper.AlignBinaryType;
-  /** The name of the the RadioButton (can also be set via the 'name' prop of the RadioButtonGroup component) */
-  name?: string;
   /**
    * Set the size of the radio button to 'small' (16x16 - default) or 'large' (24x24).
    */
diff --git a/src/__experimental__/components/switch/__snapshots__/switch.spec.js.snap b/src/__experimental__/components/switch/__snapshots__/switch.spec.js.snap
index e1dfb62e1b..279ce8f7ac 100644
--- a/src/__experimental__/components/switch/__snapshots__/switch.spec.js.snap
+++ b/src/__experimental__/components/switch/__snapshots__/switch.spec.js.snap
@@ -696,7 +696,6 @@ exports[`Switch base theme renders as expected 1`] = `
   checked={false}
   className="c0"
   data-component="Switch"
-  name="my-switch"
 >
   <div
     checked={false}
diff --git a/src/__experimental__/components/switch/switch.component.js b/src/__experimental__/components/switch/switch.component.js
index f9a456c59f..fa05e3701a 100644
--- a/src/__experimental__/components/switch/switch.component.js
+++ b/src/__experimental__/components/switch/switch.component.js
@@ -19,6 +19,7 @@ const Switch = ({
   reverse,
   validationOnLabel,
   labelInline,
+  name,
   adaptiveLabelBreakpoint,
   ...props
 }) => {
@@ -55,6 +56,7 @@ const Switch = ({
     onBlur,
     onChange: isControlled ? onChange : onChangeInternal,
     inputId: id,
+    name,
     label,
     inputValue: value,
     inputType: "checkbox",
@@ -107,6 +109,8 @@ Switch.propTypes = {
   labelSpacing: PropTypes.oneOf([1, 2]),
   /** Sets percentage-based label width */
   labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** The name of the the Switch input  */
+  name: PropTypes.string,
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
diff --git a/src/__internal__/checkable-input/checkable-input.d.ts b/src/__internal__/checkable-input/checkable-input.d.ts
index c1c288e437..508c93b25e 100644
--- a/src/__internal__/checkable-input/checkable-input.d.ts
+++ b/src/__internal__/checkable-input/checkable-input.d.ts
@@ -21,6 +21,8 @@ export interface CommonCheckableInputProps extends ValidationPropTypes {
   labelSpacing?: 1 | 2;
   /** Label width */
   labelWidth?: number;
+  /** The name of the the input */
+  name?: string;
   /** Specify a callback triggered on blur */
   onBlur?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** Specify a callback triggered on change */
diff --git a/src/components/flat-table/flat-table-checkbox/__snapshots__/flat-table-checkbox.spec.js.snap b/src/components/flat-table/flat-table-checkbox/__snapshots__/flat-table-checkbox.spec.js.snap
index aa522ae5e7..cfbf29bb13 100644
--- a/src/components/flat-table/flat-table-checkbox/__snapshots__/flat-table-checkbox.spec.js.snap
+++ b/src/components/flat-table/flat-table-checkbox/__snapshots__/flat-table-checkbox.spec.js.snap
@@ -158,7 +158,6 @@ exports[`FlatTableCheckbox "th" is passed in via the "as" prop renders to match
   <div
     className="c1 c2"
     data-component="checkbox"
-    name="flat-table-checkbox"
     onClick={[Function]}
   >
     <div
@@ -369,7 +368,6 @@ exports[`FlatTableCheckbox the "as" prop is not passed in renders to match the e
   <div
     className="c1 c2"
     data-component="checkbox"
-    name="flat-table-checkbox"
     onClick={[Function]}
   >
     <div