diff --git a/.changeset/slow-snails-swim.md b/.changeset/slow-snails-swim.md
new file mode 100644
index 00000000000..0e366fd6e38
--- /dev/null
+++ 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
index ac040fb057c..41c48c9487c 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -4,12 +4,14 @@ import {
Autocomplete,
BaseStyles,
Box,
+ Button,
Checkbox,
CheckboxGroup,
FormControl,
Radio,
RadioGroup,
Select,
+ SelectPanel,
Text,
TextInput,
TextInputWithTokens,
@@ -17,7 +19,8 @@ import {
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 (
+
+ )
+ }
+}
+
+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([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 (
+
+ Select Labels
+ (
+
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ items={filteredItems}
+ selected={selected}
+ onSelectedChange={setSelected}
+ onFilterChange={setFilter}
+ />
+
+ )
+}
+
export const WithLeadingVisual = () => (
diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index 257163c753a..a6ccd15c858 100644
--- 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(
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)