added default button type to switch button to prevent submit when included in form (#5841)

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jon Rohan <[email protected]>

Author: 3 people

.changeset/dull-boats-build.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+added default button type to switch button to prevent submit when included in form

packages/react/src/ToggleSwitch/ToggleSwitch.docs.json

@@ -94,7 +94,13 @@
       "type": "'start' | 'end'",
       "defaultValue": "'start'",
       "description": "<div>Whether the \"on\" and \"off\" labels should appear before or after the switch.</div> <div> <Text fontWeight=\"bold\">This should only be changed when the switch's alignment needs to be adjusted.</Text> For example: It needs to be left-aligned because the label appears above it and the caption appears below it. </div>"
+    },
+    {
+      "name": "buttonType",
+      "type": "'button' | 'submit' | 'reset'",
+      "defaultValue": "'button'",
+      "description": "<div>As it’s part of form behavior, this controls whether the button is of type button, submit, or reset.</div>"
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -180,5 +180,17 @@ describe('ToggleSwitch', () => {
     expect(ref).toHaveBeenCalledWith(expect.any(HTMLButtonElement))
   })
 
+  it('renders a switch that has button type button', () => {
+    const {getByLabelText} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" />
+      </>,
+    )
+
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+    expect(toggleSwitch).toHaveAttribute('type', 'button')
+  })
+
   checkStoriesForAxeViolations('ToggleSwitch.features', '../ToggleSwitch/')
 })

packages/react/src/ToggleSwitch/ToggleSwitch.tsx

@@ -34,6 +34,8 @@ export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElem
    * **This should only be changed when the switch's alignment needs to be adjusted.** For example: It needs to be left-aligned because the label appears above it and the caption appears below it.
    */
   statusLabelPosition?: CellAlignment
+  /** type of button to account for behavior when added to a form*/
+  buttonType?: 'button' | 'submit' | 'reset'
 }
 
 const sizeVariants = variant({
@@ -221,6 +223,7 @@ const ToggleSwitch = React.forwardRef<HTMLButtonElement, React.PropsWithChildren
       checked,
       onChange,
       onClick,
+      buttonType = 'button',
       size = 'medium',
       statusLabelPosition = 'start',
       sx: sxProp,
@@ -243,7 +246,7 @@ const ToggleSwitch = React.forwardRef<HTMLButtonElement, React.PropsWithChildren
       if (onChange && isControlled) {
         onChange(Boolean(checked))
       }
-    }, [onChange, checked, isControlled])
+    }, [onChange, checked, isControlled, buttonType])
 
     return (
       <Box
@@ -271,6 +274,7 @@ const ToggleSwitch = React.forwardRef<HTMLButtonElement, React.PropsWithChildren
         </Text>
         <SwitchButton
           ref={ref}
+          type={buttonType}
           onClick={handleToggleClick}
           aria-labelledby={ariaLabelledby}
           aria-describedby={ariaDescribedby}