From cbf596643d3f1cebd7354fa22923a5c5c7b29684 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 12 Oct 2023 12:46:58 -0500
Subject: [PATCH 1/2] feat(ToggleSwitch): add support for a `ref` on the inner
 <button> element

---
 src/ToggleSwitch/ToggleSwitch.test.tsx        | 184 ++++++++++++++++
 src/ToggleSwitch/ToggleSwitch.tsx             | 198 +++++++++---------
 .../__snapshots__/ToggleSwitch.test.tsx.snap  |   2 +-
 src/__tests__/ToggleSwitch.test.tsx           | 159 --------------
 4 files changed, 288 insertions(+), 255 deletions(-)
 create mode 100644 src/ToggleSwitch/ToggleSwitch.test.tsx
 rename src/{__tests__ => ToggleSwitch}/__snapshots__/ToggleSwitch.test.tsx.snap (99%)
 delete mode 100644 src/__tests__/ToggleSwitch.test.tsx

diff --git a/src/ToggleSwitch/ToggleSwitch.test.tsx b/src/ToggleSwitch/ToggleSwitch.test.tsx
new file mode 100644
index 00000000000..5704783d588
--- /dev/null
+++ b/src/ToggleSwitch/ToggleSwitch.test.tsx
@@ -0,0 +1,184 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import ToggleSwitch from './'
+import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
+import userEvent from '@testing-library/user-event'
+
+const SWITCH_LABEL_TEXT = 'Switch label'
+
+describe('ToggleSwitch', () => {
+  behavesAsComponent({
+    Component: ToggleSwitch,
+    options: {skipAs: true},
+  })
+
+  checkExports('ToggleSwitch', {
+    default: ToggleSwitch,
+  })
+
+  it('renders a switch that is turned off', () => {
+    const {getByLabelText} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" />
+      </>,
+    )
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('renders a switch that is turned on', () => {
+    const {getByLabelText} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" defaultChecked />
+      </>,
+    )
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('renders a switch that is disabled', async () => {
+    const user = userEvent.setup()
+    const {getByLabelText} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" disabled />
+      </>,
+    )
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+    await user.click(toggleSwitch)
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it("renders a switch who's state is loading", async () => {
+    const user = userEvent.setup()
+    const {getByLabelText, container} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" loading />
+      </>,
+    )
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+    const loadingSpinner = container.querySelector('svg')
+
+    expect(loadingSpinner).toBeDefined()
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+    await user.click(toggleSwitch)
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('switches from off to on uncontrolled', async () => {
+    const user = userEvent.setup()
+    const {getByLabelText} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" />
+      </>,
+    )
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+    await user.click(toggleSwitch)
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('switches from off to on uncontrolled when clicking on status label', async () => {
+    const user = userEvent.setup()
+    const {getByLabelText, getByText} = render(
+      <>
+        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+        <ToggleSwitch aria-labelledby="switchLabel" />
+      </>,
+    )
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+    const toggleSwitchStatusLabel = getByText('Off')
+
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+    await user.click(toggleSwitchStatusLabel)
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('switches from off to on with a controlled prop', async () => {
+    const user = userEvent.setup()
+    const ControlledSwitchComponent = () => {
+      const [isOn, setIsOn] = React.useState(false)
+
+      const onClick = () => {
+        setIsOn(!isOn)
+      }
+
+      return (
+        <>
+          <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+          <ToggleSwitch onClick={onClick} checked={isOn} aria-labelledby="switchLabel" />
+        </>
+      )
+    }
+    const {getByLabelText} = render(<ControlledSwitchComponent />)
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+    await user.click(toggleSwitch)
+    expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('calls onChange when the switch is toggled', async () => {
+    const user = userEvent.setup()
+    const handleChange = jest.fn()
+    const ControlledSwitchComponent = ({handleSwitchChange}: {handleSwitchChange: (on: boolean) => void}) => {
+      const [isOn, setIsOn] = React.useState(false)
+
+      const onClick = () => {
+        setIsOn(!isOn)
+      }
+
+      return (
+        <>
+          <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+          <ToggleSwitch onClick={onClick} onChange={handleSwitchChange} checked={isOn} aria-labelledby="switchLabel" />
+        </>
+      )
+    }
+    const {getByLabelText} = render(<ControlledSwitchComponent handleSwitchChange={handleChange} />)
+    const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+
+    await user.click(toggleSwitch)
+    expect(handleChange).toHaveBeenCalledWith(true)
+  })
+
+  it('can pass data attributes to the rendered component', async () => {
+    const TEST_ID = 'a test id'
+    const ControlledSwitchComponent = () => {
+      return (
+        <>
+          <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+          <ToggleSwitch data-testid={TEST_ID} defaultChecked aria-labelledby="switchLabel" />
+        </>
+      )
+    }
+    const {getByTestId} = render(<ControlledSwitchComponent />)
+    const toggleSwitch = getByTestId(TEST_ID)
+    expect(toggleSwitch).toBeInTheDocument()
+  })
+
+  it('supports a `ref` on the inner <button> element', () => {
+    const ref = jest.fn()
+
+    render(
+      <>
+        <span id="label">label</span>
+        <ToggleSwitch ref={ref} aria-labelledby="label" />
+      </>,
+    )
+
+    expect(ref).toHaveBeenCalled()
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLButtonElement))
+  })
+
+  checkStoriesForAxeViolations('ToggleSwitch.features', '../ToggleSwitch/')
+})
diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx
index b149cda4847..628bbc068cf 100644
--- a/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/src/ToggleSwitch/ToggleSwitch.tsx
@@ -204,106 +204,114 @@ const hiddenTextStyles: BetterSystemStyleObject = {
   height: 0,
 }
 
-const ToggleSwitch: React.FC<React.PropsWithChildren<ToggleSwitchProps>> = ({
-  'aria-labelledby': ariaLabelledby,
-  'aria-describedby': ariaDescribedby,
-  defaultChecked,
-  disabled,
-  loading,
-  checked,
-  onChange,
-  onClick,
-  size = 'medium',
-  statusLabelPosition = 'start',
-  sx: sxProp,
-  ...props
-}) => {
-  const isControlled = typeof checked !== 'undefined'
-  const [isOn, setIsOn] = useProvidedStateOrCreate<boolean>(checked, onChange, Boolean(defaultChecked))
-  const acceptsInteraction = !disabled && !loading
-  const handleToggleClick: MouseEventHandler = useCallback(
-    e => {
-      if (!isControlled) {
-        setIsOn(!isOn)
-      }
-      onClick && onClick(e)
-    },
-    [onClick, isControlled, isOn, setIsOn],
-  )
+const ToggleSwitch = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<ToggleSwitchProps>>(
+  function ToggleSwitch(props, ref) {
+    const {
+      'aria-labelledby': ariaLabelledby,
+      'aria-describedby': ariaDescribedby,
+      defaultChecked,
+      disabled,
+      loading,
+      checked,
+      onChange,
+      onClick,
+      size = 'medium',
+      statusLabelPosition = 'start',
+      sx: sxProp,
+      ...rest
+    } = props
+    const isControlled = typeof checked !== 'undefined'
+    const [isOn, setIsOn] = useProvidedStateOrCreate<boolean>(checked, onChange, Boolean(defaultChecked))
+    const acceptsInteraction = !disabled && !loading
+    const handleToggleClick: MouseEventHandler = useCallback(
+      e => {
+        if (!isControlled) {
+          setIsOn(!isOn)
+        }
+        onClick && onClick(e)
+      },
+      [onClick, isControlled, isOn, setIsOn],
+    )
 
-  useEffect(() => {
-    if (onChange && isControlled) {
-      onChange(Boolean(checked))
-    }
-  }, [onChange, checked, isControlled])
+    useEffect(() => {
+      if (onChange && isControlled) {
+        onChange(Boolean(checked))
+      }
+    }, [onChange, checked, isControlled])
 
-  return (
-    <Box
-      display="inline-flex"
-      alignItems="center"
-      flexDirection={statusLabelPosition === 'start' ? 'row' : 'row-reverse'}
-      sx={sxProp}
-      {...props}
-    >
-      {loading ? <Spinner size="small" /> : null}
-      <Text
-        color={acceptsInteraction ? 'fg.default' : 'fg.muted'}
-        fontSize={size === 'small' ? 0 : 1}
-        mx={2}
-        aria-hidden="true"
-        sx={{position: 'relative', cursor: 'pointer'}}
-        onClick={handleToggleClick}
+    return (
+      <Box
+        display="inline-flex"
+        alignItems="center"
+        flexDirection={statusLabelPosition === 'start' ? 'row' : 'row-reverse'}
+        sx={sxProp}
+        {...rest}
       >
-        <Box textAlign="right" sx={isOn ? null : hiddenTextStyles}>
-          On
-        </Box>
-        <Box textAlign="right" sx={isOn ? hiddenTextStyles : null}>
-          Off
-        </Box>
-      </Text>
-      <SwitchButton
-        onClick={handleToggleClick}
-        aria-labelledby={ariaLabelledby}
-        aria-describedby={ariaDescribedby}
-        aria-pressed={isOn}
-        checked={isOn}
-        size={size}
-        disabled={!acceptsInteraction}
-      >
-        <Box aria-hidden="true" display="flex" alignItems="center" width="100%" height="100%" overflow="hidden">
-          <Box
-            flexGrow={1}
-            flexShrink={0}
-            flexBasis="50%"
-            color={acceptsInteraction ? 'switchTrack.checked.fg' : 'switchTrack.checked.disabledFg'}
-            lineHeight="0"
-            sx={{
-              transform: `translateX(${isOn ? '0' : '-100%'})`,
-              transitionProperty: 'transform',
-              transitionDuration: TRANSITION_DURATION,
-            }}
-          >
-            <LineIcon size={size} />
+        {loading ? <Spinner size="small" /> : null}
+        <Text
+          color={acceptsInteraction ? 'fg.default' : 'fg.muted'}
+          fontSize={size === 'small' ? 0 : 1}
+          mx={2}
+          aria-hidden="true"
+          sx={{position: 'relative', cursor: 'pointer'}}
+          onClick={handleToggleClick}
+        >
+          <Box textAlign="right" sx={isOn ? null : hiddenTextStyles}>
+            On
+          </Box>
+          <Box textAlign="right" sx={isOn ? hiddenTextStyles : null}>
+            Off
           </Box>
-          <Box
-            flexGrow={1}
-            flexShrink={0}
-            flexBasis="50%"
-            color={acceptsInteraction ? 'switchTrack.fg' : 'switchTrack.disabledFg'}
-            lineHeight="0"
-            sx={{
-              transform: `translateX(${isOn ? '100%' : '0'})`,
-              transitionProperty: 'transform',
-              transitionDuration: TRANSITION_DURATION,
-            }}
-          >
-            <CircleIcon size={size} />
+        </Text>
+        <SwitchButton
+          ref={ref}
+          onClick={handleToggleClick}
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+          aria-pressed={isOn}
+          checked={isOn}
+          size={size}
+          disabled={!acceptsInteraction}
+        >
+          <Box aria-hidden="true" display="flex" alignItems="center" width="100%" height="100%" overflow="hidden">
+            <Box
+              flexGrow={1}
+              flexShrink={0}
+              flexBasis="50%"
+              color={acceptsInteraction ? 'switchTrack.checked.fg' : 'switchTrack.checked.disabledFg'}
+              lineHeight="0"
+              sx={{
+                transform: `translateX(${isOn ? '0' : '-100%'})`,
+                transitionProperty: 'transform',
+                transitionDuration: TRANSITION_DURATION,
+              }}
+            >
+              <LineIcon size={size} />
+            </Box>
+            <Box
+              flexGrow={1}
+              flexShrink={0}
+              flexBasis="50%"
+              color={acceptsInteraction ? 'switchTrack.fg' : 'switchTrack.disabledFg'}
+              lineHeight="0"
+              sx={{
+                transform: `translateX(${isOn ? '100%' : '0'})`,
+                transitionProperty: 'transform',
+                transitionDuration: TRANSITION_DURATION,
+              }}
+            >
+              <CircleIcon size={size} />
+            </Box>
           </Box>
-        </Box>
-        <ToggleKnob aria-hidden="true" disabled={!acceptsInteraction} checked={isOn} />
-      </SwitchButton>
-    </Box>
-  )
+          <ToggleKnob aria-hidden="true" disabled={!acceptsInteraction} checked={isOn} />
+        </SwitchButton>
+      </Box>
+    )
+  },
+)
+
+if (__DEV__) {
+  ToggleSwitch.displayName = 'ToggleSwitch'
 }
 
 export default ToggleSwitch
diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap
similarity index 99%
rename from src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
rename to src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap
index 764e81dd26d..8c2768b9a43 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders consistently 1`] = `
+exports[`ToggleSwitch renders consistently 1`] = `
 .c2 {
   text-align: right;
   visibility: hidden;
diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/__tests__/ToggleSwitch.test.tsx
deleted file mode 100644
index 51dea86ab40..00000000000
--- a/src/__tests__/ToggleSwitch.test.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React from 'react'
-import '@testing-library/jest-dom/extend-expect'
-import {render} from '@testing-library/react'
-import {ToggleSwitch} from '..'
-import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
-import userEvent from '@testing-library/user-event'
-
-const SWITCH_LABEL_TEXT = 'Switch label'
-
-behavesAsComponent({
-  Component: ToggleSwitch,
-  options: {skipAs: true},
-})
-checkExports('ToggleSwitch', {
-  default: ToggleSwitch,
-})
-it('renders a switch that is turned off', () => {
-  const {getByLabelText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-})
-it('renders a switch that is turned on', () => {
-  const {getByLabelText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" defaultChecked />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
-})
-it('renders a switch that is disabled', async () => {
-  const user = userEvent.setup()
-  const {getByLabelText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" disabled />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-})
-it("renders a switch who's state is loading", async () => {
-  const user = userEvent.setup()
-  const {getByLabelText, container} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" loading />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-  const loadingSpinner = container.querySelector('svg')
-
-  expect(loadingSpinner).toBeDefined()
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-})
-it('switches from off to on uncontrolled', async () => {
-  const user = userEvent.setup()
-  const {getByLabelText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
-})
-it('switches from off to on uncontrolled when clicking on status label', async () => {
-  const user = userEvent.setup()
-  const {getByLabelText, getByText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-  const toggleSwitchStatusLabel = getByText('Off')
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitchStatusLabel)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
-})
-it('switches from off to on with a controlled prop', async () => {
-  const user = userEvent.setup()
-  const ControlledSwitchComponent = () => {
-    const [isOn, setIsOn] = React.useState(false)
-
-    const onClick = () => {
-      setIsOn(!isOn)
-    }
-
-    return (
-      <>
-        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-        <ToggleSwitch onClick={onClick} checked={isOn} aria-labelledby="switchLabel" />
-      </>
-    )
-  }
-  const {getByLabelText} = render(<ControlledSwitchComponent />)
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
-})
-it('calls onChange when the switch is toggled', async () => {
-  const user = userEvent.setup()
-  const handleChange = jest.fn()
-  const ControlledSwitchComponent = ({handleSwitchChange}: {handleSwitchChange: (on: boolean) => void}) => {
-    const [isOn, setIsOn] = React.useState(false)
-
-    const onClick = () => {
-      setIsOn(!isOn)
-    }
-
-    return (
-      <>
-        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-        <ToggleSwitch onClick={onClick} onChange={handleSwitchChange} checked={isOn} aria-labelledby="switchLabel" />
-      </>
-    )
-  }
-  const {getByLabelText} = render(<ControlledSwitchComponent handleSwitchChange={handleChange} />)
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-
-  await user.click(toggleSwitch)
-  expect(handleChange).toHaveBeenCalledWith(true)
-})
-it('can pass data attributes to the rendered component', async () => {
-  const TEST_ID = 'a test id'
-  const ControlledSwitchComponent = () => {
-    return (
-      <>
-        <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-        <ToggleSwitch data-testid={TEST_ID} defaultChecked aria-labelledby="switchLabel" />
-      </>
-    )
-  }
-  const {getByTestId} = render(<ControlledSwitchComponent />)
-  const toggleSwitch = getByTestId(TEST_ID)
-  expect(toggleSwitch).toBeInTheDocument()
-})
-
-checkStoriesForAxeViolations('ToggleSwitch.features', '../ToggleSwitch/')

From fd3672595ab51e311c1ef2d1a572f9a8d71f0e55 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 12 Oct 2023 12:47:20 -0500
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/metal-comics-wash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/metal-comics-wash.md

diff --git a/.changeset/metal-comics-wash.md b/.changeset/metal-comics-wash.md
new file mode 100644
index 00000000000..b68a1970eb7
--- /dev/null
+++ b/.changeset/metal-comics-wash.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for a `ref` on the inner <button> in ToggleSwitch