Use internal label and descriptions (#313)

* improve internal Label component

We will now add a name to improve error messages, we also introduced a
`clickable` prop on the label.

Not 100% happy with the implementation of these internal Label &
Description components, but they are internal so we can always change it
to something that makes more sense!

* improve internal Description component

We will now add a name to improve error messages.

* provide the name prop to Description & Label providers

* implement the useLabels and useDescriptions in the Switch components

* update documentation

packages/@headlessui-react/src/components/switch/README.md

@@ -121,9 +121,10 @@ function NotificationsToggle() {
 
 ##### Props
 
-| Prop | Type                | Default | Description                                                   |
-| :--- | :------------------ | :------ | :------------------------------------------------------------ |
-| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
+| Prop        | Type                | Default | Description                                                       |
+| :---------- | :------------------ | :------ | :---------------------------------------------------------------- |
+| `as`        | String \| Component | `label` | The element or component the `Switch.Label` should render as.     |
+| `clickable` | Boolean             | `false` | Wether or not to toggle the `Switch` when you click on the label. |
 
 #### Switch.Description
 

packages/@headlessui-react/src/components/switch/switch.test.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, useState } from 'react'
+import React, { useState } from 'react'
 import { render } from '@testing-library/react'
 
 import { Switch } from './switch'
@@ -10,23 +10,10 @@ import {
   getSwitchLabel,
 } from '../../test-utils/accessibility-assertions'
 import { press, click, Keys } from '../../test-utils/interactions'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 
 jest.mock('../../hooks/use-id')
 
 describe('Safe guards', () => {
-  it.each([
-    ['Switch.Label', Switch.Label],
-    ['Switch.Description', Switch.Description],
-  ])(
-    'should error when we are using a <%s /> without a parent <Switch.Group />',
-    suppressConsoleLogs((name, Component) => {
-      expect(() => render(createElement(Component))).toThrowError(
-        `<${name} /> is missing a parent <Switch.Group /> component.`
-      )
-    })
-  )
-
   it('should be possible to render a Switch without crashing', () => {
     render(<Switch checked={false} onChange={console.log} />)
   })
@@ -119,7 +106,7 @@ describe('Render composition', () => {
     assertSwitch({ state: SwitchState.Off, label: 'Label B' })
   })
 
-  it('should be possible to render a Switch.Group, Switch and Switch.Description (before the Switch)', () => {
+  it('should be possible to render a Switch.Group, Switch and Switch.Description (before the Switch)', async () => {
     render(
       <Switch.Group>
         <Switch.Description>This is an important feature</Switch.Description>
@@ -276,7 +263,7 @@ describe('Mouse interactions', () => {
     assertSwitch({ state: SwitchState.Off })
   })
 
-  it('should be possible to toggle the Switch with a click on the Label', async () => {
+  it('should be possible to toggle the Switch with a click on the Label (clickable passed)', async () => {
     let handleChange = jest.fn()
     function Example() {
       let [state, setState] = useState(false)
@@ -289,7 +276,7 @@ describe('Mouse interactions', () => {
               handleChange(value)
             }}
           />
-          <Switch.Label>The label</Switch.Label>
+          <Switch.Label clickable>The label</Switch.Label>
         </Switch.Group>
       )
     }
@@ -317,4 +304,34 @@ describe('Mouse interactions', () => {
     // Ensure state is off
     assertSwitch({ state: SwitchState.Off })
   })
+
+  it('should not be possible to toggle the Switch with a click on the Label', async () => {
+    let handleChange = jest.fn()
+    function Example() {
+      let [state, setState] = useState(false)
+      return (
+        <Switch.Group>
+          <Switch
+            checked={state}
+            onChange={value => {
+              setState(value)
+              handleChange(value)
+            }}
+          />
+          <Switch.Label>The label</Switch.Label>
+        </Switch.Group>
+      )
+    }
+
+    render(<Example />)
+
+    // Ensure checkbox is off
+    assertSwitch({ state: SwitchState.Off })
+
+    // Toggle
+    await click(getSwitchLabel())
+
+    // Ensure state is still off
+    assertSwitch({ state: SwitchState.Off })
+  })
 })

packages/@headlessui-react/src/components/switch/switch.tsx

@@ -17,66 +17,50 @@ import { render } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
 import { Keys } from '../keyboard'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { Label, useLabels } from '../label/label'
+import { Description, useDescriptions } from '../description/description'
 
 interface StateDefinition {
   switch: HTMLButtonElement | null
-  label: HTMLLabelElement | null
-  description: HTMLParagraphElement | null
-
   setSwitch(element: HTMLButtonElement): void
-  setLabel(element: HTMLLabelElement): void
-  setDescription(element: HTMLParagraphElement): void
+  labelledby: string | undefined
+  describedby: string | undefined
 }
 
 let GroupContext = createContext<StateDefinition | null>(null)
 GroupContext.displayName = 'GroupContext'
 
-function useGroupContext(component: string) {
-  let context = useContext(GroupContext)
-  if (context === null) {
-    let err = new Error(`<${component} /> is missing a parent <Switch.Group /> component.`)
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useGroupContext)
-    throw err
-  }
-  return context
-}
-
 // ---
 
 let DEFAULT_GROUP_TAG = Fragment
 
 function Group<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(props: Props<TTag>) {
   let [switchElement, setSwitchElement] = useState<HTMLButtonElement | null>(null)
-  let [labelElement, setLabelElement] = useState<HTMLLabelElement | null>(null)
-  let [descriptionElement, setDescriptionElement] = useState<HTMLParagraphElement | null>(null)
+  let [labelledby, LabelProvider] = useLabels()
+  let [describedby, DescriptionProvider] = useDescriptions()
 
   let context = useMemo<StateDefinition>(
-    () => ({
-      switch: switchElement,
-      setSwitch: setSwitchElement,
-      label: labelElement,
-      setLabel: setLabelElement,
-      description: descriptionElement,
-      setDescription: setDescriptionElement,
-    }),
-    [
-      switchElement,
-      setSwitchElement,
-      labelElement,
-      setLabelElement,
-      descriptionElement,
-      setDescriptionElement,
-    ]
+    () => ({ switch: switchElement, setSwitch: setSwitchElement, labelledby, describedby }),
+    [switchElement, setSwitchElement, labelledby, describedby]
   )
 
   return (
-    <GroupContext.Provider value={context}>
-      {render({
-        props,
-        defaultTag: DEFAULT_GROUP_TAG,
-        name: 'Switch.Group',
-      })}
-    </GroupContext.Provider>
+    <DescriptionProvider name="Switch.Description">
+      <LabelProvider
+        name="Switch.Label"
+        props={{
+          onClick() {
+            if (!switchElement) return
+            switchElement.click()
+            switchElement.focus({ preventScroll: true })
+          },
+        }}
+      >
+        <GroupContext.Provider value={context}>
+          {render({ props, defaultTag: DEFAULT_GROUP_TAG, name: 'Switch.Group' })}
+        </GroupContext.Provider>
+      </LabelProvider>
+    </DescriptionProvider>
   )
 }
 
@@ -137,8 +121,8 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
     role: 'switch',
     tabIndex: 0,
     'aria-checked': checked,
-    'aria-labelledby': groupContext?.label?.id,
-    'aria-describedby': groupContext?.description?.id,
+    'aria-labelledby': groupContext?.labelledby,
+    'aria-describedby': groupContext?.describedby,
     onClick: handleClick,
     onKeyUp: handleKeyUp,
     onKeyPress: handleKeyPress,
@@ -158,52 +142,6 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
 
 // ---
 
-let DEFAULT_LABEL_TAG = 'label' as const
-interface LabelRenderPropArg {}
-type LabelPropsWeControl = 'id' | 'ref' | 'onClick'
-
-function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
-  props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>
-) {
-  let state = useGroupContext([Switch.name, Label.name].join('.'))
-  let id = `headlessui-switch-label-${useId()}`
-
-  let handleClick = useCallback(() => {
-    if (!state.switch) return
-    state.switch.click()
-    state.switch.focus({ preventScroll: true })
-  }, [state.switch])
-
-  let propsWeControl = { ref: state.setLabel, id, onClick: handleClick }
-  return render({
-    props: { ...props, ...propsWeControl },
-    defaultTag: DEFAULT_LABEL_TAG,
-    name: 'Switch.Label',
-  })
-}
-
-// ---
-
-let DEFAULT_DESCRIPTIONL_TAG = 'p' as const
-interface DescriptionRenderPropArg {}
-type DescriptionPropsWeControl = 'id' | 'ref'
-
-function Description<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
-  props: Props<TTag, DescriptionRenderPropArg, DescriptionPropsWeControl>
-) {
-  let state = useGroupContext([Switch.name, Description.name].join('.'))
-  let id = `headlessui-switch-description-${useId()}`
-
-  let propsWeControl = { ref: state.setDescription, id }
-  return render({
-    props: { ...props, ...propsWeControl },
-    defaultTag: DEFAULT_DESCRIPTIONL_TAG,
-    name: 'Switch.Description',
-  })
-}
-
-// ---
-
 Switch.Group = Group
 Switch.Label = Label
 Switch.Description = Description