Merge pull request #4029 from Sage/FE-3743-checkbox-name-propType

fix(checkable-inputs): fix name prop forwarding - FE-3743

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"

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"

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 */

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).
    */

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}

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 */

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 */

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