SelectPanel: Allow using SelectPanel in FormControl (#5185)

* Allow using SelectPanel in FormControl * Create slow-snails-swim.md
primer · Oct 30, 2024 · 461ae57 · 461ae57
1 parent c3d8787
commit 461ae57
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 2 deletions.
diff --git a/.changeset/slow-snails-swim.md b/.changeset/slow-snails-swim.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Allow using SelectPanel in FormControl
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -4,20 +4,23 @@ import {
   Autocomplete,
   BaseStyles,
   Box,
+  Button,
   Checkbox,
   CheckboxGroup,
   FormControl,
   Radio,
   RadioGroup,
   Select,
+  SelectPanel,
   Text,
   TextInput,
   TextInputWithTokens,
   Textarea,
   ThemeProvider,
   theme,
 } from '..'
-import {MarkGithubIcon} from '@primer/octicons-react'
+import {MarkGithubIcon, TriangleDownIcon} from '@primer/octicons-react'
+import type {ItemInput} from '../deprecated/ActionList/List'
 
 export default {
   title: 'Components/FormControl/Features',
@@ -273,6 +276,68 @@ export const ValidationExample = () => {
   )
 }
 
+function getColorCircle(color: string) {
+  return function () {
+    return (
+      <Box
+        sx={{
+          backgroundColor: color,
+          borderColor: color,
+          width: 14,
+          height: 14,
+          borderRadius: 10,
+          margin: 'auto',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }}
+      />
+    )
+  }
+}
+
+const items: ItemInput[] = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', description: 'New feature or request', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', description: "Something isn't working", id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', description: 'Good for newcomers', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+].map(item => ({...item, descriptionVariant: 'block'}))
+
+export const WithSelectPanel = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FormControl required>
+      <FormControl.Label>Select Labels</FormControl.Label>
+      <SelectPanel
+        title="Select labels"
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button
+            trailingAction={TriangleDownIcon}
+            aria-labelledby={` ${ariaLabelledBy}`}
+            {...anchorProps}
+            aria-haspopup="dialog"
+          >
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+      />
+    </FormControl>
+  )
+}
+
 export const WithLeadingVisual = () => (
   <Box>
     <FormControl>

diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
@@ -4,6 +4,7 @@ import Box from '../Box'
 import Checkbox from '../Checkbox'
 import Radio from '../Radio'
 import Select from '../Select'
+import {SelectPanel} from '../SelectPanel'
 import TextInput from '../TextInput'
 import TextInputWithTokens from '../TextInputWithTokens'
 import Textarea from '../Textarea'
@@ -50,7 +51,16 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
       leadingVisual: FormControlLeadingVisual,
       validation: FormControlValidation,
     })
-    const expectedInputComponents = [Autocomplete, Checkbox, Radio, Select, TextInput, TextInputWithTokens, Textarea]
+    const expectedInputComponents = [
+      Autocomplete,
+      Checkbox,
+      Radio,
+      Select,
+      TextInput,
+      TextInputWithTokens,
+      Textarea,
+      SelectPanel,
+    ]
     const choiceGroupContext = useContext(CheckboxOrRadioGroupContext)
     const disabled = choiceGroupContext.disabled || disabledProp
     const id = useId(idProp)