fix(Toggle): side effect broken e2e test

Signed-off-by: protobuf-ci-cd <[email protected]>

Author: philibea

e2e/tests/toggle/render.tsx

@@ -0,0 +1,28 @@
+import { Button, Checkbox, Stack, Toggle } from '@ultraviolet/ui'
+import { useReducer } from 'react'
+
+const Render = () => {
+  const [checkbox, toggleCheckbox] = useReducer(r => !r, false)
+  const [toggle, toggleToggle] = useReducer(r => !r, false)
+
+  return (
+    <Stack gap={1} flex={1}>
+      <Button name="click me">Click Me</Button>
+
+      <Toggle
+        name="toggle"
+        label="toggle label"
+        checked={toggle}
+        onChange={toggleToggle}
+      />
+
+      <Checkbox
+        name="checkbox"
+        aria-label="checkbox"
+        checked={checkbox}
+        onChange={toggleCheckbox}
+      />
+    </Stack>
+  )
+}
+export default Render

e2e/tests/toggle/test.spec.ts

@@ -0,0 +1,10 @@
+import { test } from '@playwright/test'
+
+// replace [Change me] by the name of your test
+test('[Change me]', async ({ page, baseURL }) => {
+  await page.goto(`${baseURL}/toggle`) // replace "template" by the folder name. Foldername should be camelCase.
+
+  await page.getByRole('button', { name: 'Click me' }).click()
+  await page.getByLabel('toggle label').check()
+  await page.getByLabel('checkbox').check()
+})

packages/ui/src/components/Toggle/index.tsx

@@ -2,13 +2,12 @@
 
 import styled from '@emotion/styled'
 import type {
-  ChangeEvent,
   ChangeEventHandler,
   InputHTMLAttributes,
   ReactNode,
   Ref,
 } from 'react'
-import { forwardRef, useCallback, useEffect, useId, useState } from 'react'
+import { forwardRef, useId } from 'react'
 import { Row } from '../Row'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
@@ -151,7 +150,7 @@ const StyledLabel = styled.label<{
     labelPosition === 'left' ? 'row' : 'row-reverse'};
 
   &:active ${StyledToggle}[data-disabled='false']:after {
-  width: ${({ size, theme }) => `calc(${theme.sizing[SIZES[size].ball]} * 1.3775)`};
+    width: ${({ size, theme }) => `calc(${theme.sizing[SIZES[size].ball]} * 1.3775)`};
   }
 
   &[aria-disabled="true"] {
@@ -206,27 +205,14 @@ export const Toggle = forwardRef(
     }: ToggleProps,
     ref: Ref<HTMLInputElement>,
   ) => {
-    const [state, setState] = useState(checked)
     const uniqueId = useId()
-
-    const onLocalChange = useCallback(
-      (event: ChangeEvent<HTMLInputElement>) => {
-        if (onChange) onChange?.(event)
-        else setState(event.target.checked)
-      },
-      [onChange, setState],
-    )
-
-    useEffect(() => {
-      setState(checked)
-    }, [checked, setState])
+    const isCheck = checked ? checked : false
 
     return (
       <Tooltip text={tooltip}>
         <StyledLabel
           aria-disabled={disabled}
           size={size}
-          onClick={evt => evt.stopPropagation()}
           className={className}
           data-testid={dataTestId}
           labelPosition={labelPosition}
@@ -277,17 +263,17 @@ export const Toggle = forwardRef(
           </Stack>
           <StyledToggle
             size={size}
-            data-checked={state}
+            data-checked={isCheck}
             data-disabled={disabled}
             data-error={!!error}
           >
             <StyledCheckbox
               id={id || uniqueId}
-              checked={state}
-              aria-checked={state}
+              checked={isCheck}
+              aria-checked={isCheck}
               disabled={disabled}
               name={name}
-              onChange={onLocalChange}
+              onChange={onChange}
               type="checkbox"
               ref={ref}
               value={value}