Merge 5e46bce into a392556

.changeset/afraid-beds-lick.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+experimental/SelectPanel + FormControl: Automatically wires SelectPanel v2 to the accessibility and validation provided by the FormControl component it's nested within

packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Text, Octicon, Flash} from '../../index'
+import {ActionList, ActionMenu, Avatar, Box, Button, Text, Octicon, Flash, FormControl} from '../../index'
 import {Dialog} from '../../drafts'
 import {
   ArrowRightIcon,
@@ -846,6 +846,38 @@ export const NestedSelection = () => {
   )
 }
 
+export const WithinForm = () => {
+  const [selectedTag, setSelectedTag] = React.useState<string>()
+
+  const onSubmit = () => {
+    if (!selectedTag) return
+    data.ref = selectedTag // pretending to persist changes
+  }
+
+  const itemsToShow = data.tags
+
+  return (
+    <>
+      <h1>Within Form</h1>
+
+      <FormControl>
+        <FormControl.Label>SelectPanel within FormControl</FormControl.Label>
+        <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit}>
+          <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
+
+          <ActionList>
+            {itemsToShow.map(tag => (
+              <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
+                {tag.name}
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        </SelectPanel>
+      </FormControl>
+    </>
+  )
+}
+
 // ----- Suspense implementation details ----
 
 const cache = new Map()

packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ThemeProvider, ActionList} from '../../'
+import {ThemeProvider, ActionList, FormControl} from '../../'
 import type {RenderResult} from '@testing-library/react'
 import {render} from '@testing-library/react'
 import type {UserEvent} from '@testing-library/user-event'
@@ -43,6 +43,15 @@ const Fixture = ({onSubmit, onCancel}: Pick<SelectPanelProps, 'onSubmit' | 'onCa
   )
 }
 
+function SelectPanelWithForm(): JSX.Element {
+  return (
+    <FormControl>
+      <FormControl.Label>Select Panel Label</FormControl.Label>
+      <Fixture />
+    </FormControl>
+  )
+}
+
 describe('SelectPanel', () => {
   it('renders Button by default', async () => {
     const container = render(<Fixture />)
@@ -132,4 +141,12 @@ describe('SelectPanel', () => {
     expect(mockOnCancel).toHaveBeenCalledTimes(1)
     expect(mockOnSubmit).toHaveBeenCalledTimes(0)
   })
+
+  it('SelectPanel within FormControl should be labelled by FormControl.Label', async () => {
+    const component = render(<SelectPanelWithForm />)
+    const button = component.getByLabelText('Select Panel Label')
+    expect(button).toBeVisible()
+    const buttonByRole = component.getByRole('button')
+    expect(button.id).toBe(buttonByRole.id)
+  })
 })

packages/react/src/drafts/SelectPanel2/SelectPanel.tsx

@@ -3,7 +3,20 @@ import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLe
 import {FocusKeys} from '@primer/behaviors'
 
 import type {ButtonProps, TextInputProps, ActionListProps, LinkProps, CheckboxProps} from '../../index'
-import {Button, IconButton, Heading, Box, Tooltip, TextInput, Spinner, Text, Octicon, Link, Checkbox} from '../../index'
+import {
+  Button,
+  IconButton,
+  Heading,
+  Box,
+  Tooltip,
+  TextInput,
+  Spinner,
+  Text,
+  Octicon,
+  Link,
+  Checkbox,
+  useFormControlForwardedProps,
+} from '../../index'
 import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
 import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
@@ -315,7 +328,8 @@ const Panel: React.FC<SelectPanelProps> = ({
 }
 
 const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, anchorRef) => {
-  return <Button ref={anchorRef} {...props} />
+  const inputProps = useFormControlForwardedProps(props)
+  return <Button ref={anchorRef} {...inputProps} />
 })
 
 const SelectPanelHeader: React.FC<React.PropsWithChildren & {onBack?: () => void}> = ({children, onBack, ...props}) => {