Apply @radix-ui/react-switch primitives to Switch component (#1002)

* chore(deps): add @radix-ui/react-switch

* refactor(switch.types): apply SwitchPrimitiveProps

* feat(switch): apply @radix-ui/react-switch primitives

* fix(switch): align HTML element type for the sake of a11y

* chore(switch.styled): add all: unset style for button

* test(switch.stories): add Uncontrolled story

* chore: fix stylelint

* refactor(slider): change to named export

* fix(switch.styled): fix typo - 'initial' to initial

* test(switch.test): add a11y unit tests

* fix(switch.styled): change data-disabled attr to disabled selector

* feat(switch): add focus-visible style

* test(switch.test): add userEvent unit tests

* test(switch.test): add data attribute unit tests

* docs(changeset): add changeset

* test(form-control.stories): add Switch with FormControl

* refactor(switch.types): improve SwitchProps from extending PrimitiveProps

* test(switch.test): replace all getAllByRole to getByRole query

Author: Dogdriip

.changeset/little-beans-cry.md

@@ -0,0 +1,10 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Apply `@radix-ui/react-switch` primitives to `Switch` component
+
+BREAKING CHANGE:
+
+- `onClick` handler is now `React.MouseEventHandler<HTMLButtonElement>`.
+- `Switch` component is now `HTMLButtonElement`.

packages/bezier-react/package.json

@@ -118,6 +118,7 @@
     "@babel/runtime": "^7.12.13",
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.1",
     "lodash-es": "^4.17.15",
     "react-resize-detector": "^7.1.1",
     "react-textarea-autosize": "^8.3.4",

packages/bezier-react/src/components/Forms/FormControl/FormControl.stories.tsx

@@ -15,6 +15,7 @@ import { TextField } from 'Components/Forms/Inputs/TextField'
 import { TextArea } from 'Components/Forms/Inputs/TextArea'
 import { Select } from 'Components/Forms/Inputs/Select'
 import { FormHelperText, FormErrorMessage } from 'Components/Forms/FormHelperText'
+import { Switch } from 'Components/Forms/Switch'
 import FormControl from './FormControl'
 import FormControlProps from './FormControl.types'
 
@@ -121,6 +122,13 @@ const WithMultiFormTemplate: Story<FormControlProps> = (args) => (
       <FormHelperText>Description</FormHelperText>
       <FormErrorMessage>Error!</FormErrorMessage>
     </FormControl>
+
+    <FormControl {...args}>
+      <FormLabel help="Lorem Ipsum">Label</FormLabel>
+      <Switch />
+      <FormHelperText>Description</FormHelperText>
+      <FormErrorMessage>Error!</FormErrorMessage>
+    </FormControl>
   </div>
 )
 

packages/bezier-react/src/components/Forms/Switch/Switch.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/react'
 
 /* Internal dependencies */
 import { getObjectFromEnum, getTitle } from 'Utils/storyUtils'
-import Switch from './Switch'
+import { Switch } from './Switch'
 import type SwitchProps from './Switch.types'
 import { SwitchSize } from './Switch.types'
 
@@ -29,8 +29,8 @@ export default {
         type: 'boolean',
       },
     },
-    onClick: {
-      action: 'onClick',
+    onCheckedChange: {
+      action: 'onCheckedChange',
     },
   },
 } as Meta
@@ -43,3 +43,9 @@ Primary.args = {
   checked: true,
   disabled: false,
 }
+
+export const Uncontrolled = Template.bind({})
+Uncontrolled.args = {
+  size: SwitchSize.M,
+  disabled: false,
+}

packages/bezier-react/src/components/Forms/Switch/Switch.styled.ts

@@ -1,6 +1,7 @@
 /* Internal dependencies */
 import { styled } from 'Foundation'
 import DisabledOpacity from 'Constants/DisabledOpacity'
+import { focusedInputWrapperStyle } from 'Components/Forms/Inputs/mixins'
 import type SwitchProps from './Switch.types'
 import { SwitchSize } from './Switch.types'
 
@@ -21,42 +22,53 @@ const SWITCH_HANDLE_WIDTH_HEIGHT: Record<SwitchSize, number> = {
   [SwitchSize.S]: 14,
 }
 
-interface WrapperProps extends Required<SwitchProps> {}
+interface SwitchRootProps extends SwitchProps {
+  size: NonNullable<SwitchProps['size']>
+}
+
+export const SwitchRoot = styled.button<SwitchRootProps>`
+  all: unset;
 
-export const Wrapper = styled.div<WrapperProps>`
   position: relative;
 
   width: ${({ size }) => SWITCH_WIDTH[size]}px;
   height: ${({ size }) => SWITCH_HEIGHT[size]}px;
 
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  cursor: pointer;
 
   ${({ foundation }) => foundation?.rounding?.round12}
-  background-color: ${({ checked, foundation }) => (
-    checked
-      ? foundation?.theme?.['bgtxt-green-normal']
-      : foundation?.theme?.['bg-black-dark']
-  )};
-
-  opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};
-
-  &:hover {
-    background-color: ${({ checked, foundation }) => (
-    checked
-      ? foundation?.theme?.['bgtxt-green-dark']
-      : foundation?.theme?.['bg-black-dark']
-  )};
+
+  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};
+
+  &[data-state='checked'] {
+    background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-normal']};
+
+    &:hover {
+      background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-green-dark']};
+    }
+  }
+
+  opacity: initial;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: ${DisabledOpacity};
+  }
+
+  &:focus-visible {
+    ${focusedInputWrapperStyle}
   }
 
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'opacity'])};
 `
 
-interface ContentProps extends SwitchProps {
+interface SwitchThumbProps extends SwitchProps {
   size: NonNullable<SwitchProps['size']>
-  checked: NonNullable<SwitchProps['checked']>
 }
 
-export const Content = styled.div<ContentProps>`
+export const SwitchThumb = styled.span<SwitchThumbProps>`
+  all: unset;
+
   position: absolute;
   top: ${PADDING}px;
   left: ${PADDING}px;
@@ -66,12 +78,12 @@ export const Content = styled.div<ContentProps>`
   ${({ foundation }) => foundation?.rounding?.round12}
   ${({ foundation }) => foundation?.elevation?.ev2()};
   background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
-  
-  transform: ${({ checked, size }) => (
-    checked
-      ? `translateX(${SWITCH_WIDTH[size] - SWITCH_HANDLE_WIDTH_HEIGHT[size] - (PADDING * 2)}px)`
-      : 'initial'
-  )};
+
+  transform: initial;
+
+  &[data-state='checked'] {
+    transform: ${({ size }) => `translateX(${SWITCH_WIDTH[size] - SWITCH_HANDLE_WIDTH_HEIGHT[size] - (PADDING * 2)}px)`};
+  }
 
   ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['transform'])};
 `

packages/bezier-react/src/components/Forms/Switch/Switch.test.tsx

@@ -1,12 +1,16 @@
 /* External dependencies */
 import React from 'react'
-import { fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 /* Internal dependencies */
 import { LightFoundation } from 'Foundation'
 import DisabledOpacity from 'Constants/DisabledOpacity'
 import { render } from 'Utils/testUtils'
-import Switch, { SWITCH_TEST_ID, SWITCH_HANDLE_TEST_ID } from './Switch'
+import {
+  Switch,
+  SWITCH_TEST_ID,
+  SWITCH_HANDLE_TEST_ID,
+} from './Switch'
 import type SwitchProps from './Switch.types'
 import { SwitchSize } from './Switch.types'
 
@@ -99,6 +103,7 @@ describe('Switch', () => {
       const switchComponent = getByTestId(SWITCH_TEST_ID)
 
       expect(switchComponent).toHaveStyle('opacity: initial')
+      expect(switchComponent).toHaveStyle('cursor: pointer')
     })
 
     it('should render disabled Switch when disabled is true', () => {
@@ -108,31 +113,168 @@ describe('Switch', () => {
       const switchComponent = getByTestId(SWITCH_TEST_ID)
 
       expect(switchComponent).toHaveStyle(`opacity: ${DisabledOpacity}`)
+      expect(switchComponent).toHaveStyle('cursor: not-allowed')
     })
   })
 
-  describe('fire events', () => {
-    it('should fire onClick event when Switch is clicked', () => {
+  describe('data attribute', () => {
+    describe('data-state', () => {
+      it('should have data-state="checked" attribute when checked is true', () => {
+        const { getByTestId } = renderComponent({
+          checked: true,
+        })
+        const switchComponent = getByTestId(SWITCH_TEST_ID)
+
+        expect(switchComponent).toHaveAttribute('data-state', 'checked')
+      })
+
+      it('should have data-state="unchecked" attribute when checked is false', () => {
+        const { getByTestId } = renderComponent({
+          checked: false,
+        })
+        const switchComponent = getByTestId(SWITCH_TEST_ID)
+
+        expect(switchComponent).toHaveAttribute('data-state', 'unchecked')
+      })
+    })
+
+    describe('data-disabled', () => {
+      it('should have data-disabled attribute when disabled is true', () => {
+        const { getByTestId } = renderComponent({
+          disabled: true,
+        })
+        const switchComponent = getByTestId(SWITCH_TEST_ID)
+
+        expect(switchComponent).toHaveAttribute('data-disabled')
+      })
+
+      it('should not have data-disabled attribute when disabled is false', () => {
+        const { getByTestId } = renderComponent({
+          disabled: false,
+        })
+        const switchComponent = getByTestId(SWITCH_TEST_ID)
+
+        expect(switchComponent).not.toHaveAttribute('data-disabled')
+      })
+    })
+  })
+
+  describe('user interactions', () => {
+    it('should change state when user clicks Switch', async () => {
+      const user = userEvent.setup()
       const onClick = jest.fn()
+      const onCheckedChange = jest.fn()
       const { getByTestId } = renderComponent({
+        defaultChecked: false,
         onClick,
+        onCheckedChange,
+      })
+      const switchComponent = getByTestId(SWITCH_TEST_ID)
+
+      await user.click(switchComponent)
+      expect(switchComponent).toHaveAttribute('data-state', 'checked')
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(onCheckedChange).toHaveBeenCalledTimes(1)
+      await user.click(switchComponent)
+      expect(switchComponent).toHaveAttribute('data-state', 'unchecked')
+      expect(onClick).toHaveBeenCalledTimes(2)
+      expect(onCheckedChange).toHaveBeenCalledTimes(2)
+    })
+
+    it('should change state when user enters Space key on Switch', async () => {
+      const user = userEvent.setup()
+      const onCheckedChange = jest.fn()
+      const { getByTestId } = renderComponent({
+        defaultChecked: false,
+        onCheckedChange,
+      })
+      const switchComponent = getByTestId(SWITCH_TEST_ID)
+
+      await user.tab()
+      await user.keyboard('[Space]')
+      expect(switchComponent).toHaveAttribute('data-state', 'checked')
+      expect(onCheckedChange).toHaveBeenCalledTimes(1)
+      await user.keyboard('[Space]')
+      expect(switchComponent).toHaveAttribute('data-state', 'unchecked')
+      expect(onCheckedChange).toHaveBeenCalledTimes(2)
+    })
+
+    it('should change state when user enters Enter key on Switch', async () => {
+      const user = userEvent.setup()
+      const onCheckedChange = jest.fn()
+      const { getByTestId } = renderComponent({
+        defaultChecked: false,
+        onCheckedChange,
       })
       const switchComponent = getByTestId(SWITCH_TEST_ID)
 
-      fireEvent.click(switchComponent)
-      expect(onClick).toHaveBeenCalled()
+      await user.tab()
+      await user.keyboard('[Enter]')
+      expect(switchComponent).toHaveAttribute('data-state', 'checked')
+      expect(onCheckedChange).toHaveBeenCalledTimes(1)
+      await user.keyboard('[Enter]')
+      expect(switchComponent).toHaveAttribute('data-state', 'unchecked')
+      expect(onCheckedChange).toHaveBeenCalledTimes(2)
     })
 
-    it('should not fire onClick event when disabled Switch is clicked', () => {
+    it('should not change state when user clicks disabled Switch', async () => {
+      const user = userEvent.setup()
       const onClick = jest.fn()
+      const onCheckedChange = jest.fn()
       const { getByTestId } = renderComponent({
-        onClick,
+        defaultChecked: false,
         disabled: true,
+        onClick,
+        onCheckedChange,
       })
       const switchComponent = getByTestId(SWITCH_TEST_ID)
 
-      fireEvent.click(switchComponent)
+      await user.click(switchComponent)
+      expect(switchComponent).toHaveAttribute('data-state', 'unchecked')
       expect(onClick).not.toHaveBeenCalled()
+      expect(onCheckedChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('accessibility', () => {
+    describe('role', () => {
+      it('should render switch with "switch" role', () => {
+        const { getByRole } = renderComponent()
+        const switchComponent = getByRole('switch')
+
+        expect(switchComponent).toBeInTheDocument()
+      })
+    })
+
+    describe('aria-checked', () => {
+      it('should be "true" when state is "on"', () => {
+        const { getByRole } = renderComponent({
+          checked: true,
+        })
+        const switchComponent = getByRole('switch')
+
+        expect(switchComponent).toHaveAttribute('aria-checked', 'true')
+      })
+
+      it('should be "false" when state is "off"', () => {
+        const { getByRole } = renderComponent({
+          checked: false,
+        })
+        const switchComponent = getByRole('switch')
+
+        expect(switchComponent).toHaveAttribute('aria-checked', 'false')
+      })
+    })
+
+    describe('aria-disabled', () => {
+      it('should have "true" value on "aria-disabled" attribute when disabled prop is true', () => {
+        const { getByRole } = renderComponent({
+          disabled: true,
+        })
+        const switchComponent = getByRole('switch')
+
+        expect(switchComponent).toHaveAttribute('aria-disabled', 'true')
+      })
     })
   })
 })