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)