Skip to content

Commit

Permalink
Merge pull request #1891 from adevinta/combobox-split-trigger-compound
Browse files Browse the repository at this point in the history 
Combobox split trigger compound
  • Loading branch information
@Powerplex
Powerplex authored Feb 14, 2024
2 parents ee74399 + 0fb0202 commit 65b78a5
Show file tree
Hide file tree
Showing 11 changed files with 221 additions and 113 deletions.
1 change: 1 addition & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions packages/components/combobox/src/Combobox.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,15 @@ import { Combobox } from '@spark-ui/combobox'
of={Combobox}
description="A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from."
subcomponents={{
'Combobox.Trigger': {
of: Combobox.Trigger,
description:
'The area that toggles the combobox popover. The Select.Popover will position itself by aligning with its trigger.',
},
'Combobox.Input': {
of: Combobox.Input,
description:
'The button that toggles the select. The Select.Popover will position itself by aligning over the trigger.',
'The typing area in which the user can type. The input behaviour will differ if `autoComplete` is used or not.',
},
'Combobox.LeadingIcon': {
of: Combobox.LeadingIcon,
Expand Down Expand Up @@ -136,7 +141,7 @@ You can style this element directly, or you can use it as a wrapper to put an ic

### Leading icon

Use `Combobox.LeadingIcon` inside `Combobox.Input` to prefix your trigger with an icon.
Use `Combobox.LeadingIcon` inside `Combobox.Trigger` to prefix your trigger with an icon.

<Canvas of={stories.LeadingIcon} />

Expand Down
114 changes: 78 additions & 36 deletions packages/components/combobox/src/Combobox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ export const Default: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -88,12 +90,14 @@ export const Controlled: StoryFn = () => {
return (
<div className="pb-[300px]">
<Combobox value={value} onValueChange={setValue}>
<Combobox.Input
aria-label="Book"
placeholder="Pick a book"
value={inputValue}
onValueChange={setInputValue}
/>
<Combobox.Trigger>
<Combobox.Input
aria-label="Book"
placeholder="Pick a book"
value={inputValue}
onValueChange={setInputValue}
/>
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand Down Expand Up @@ -126,7 +130,9 @@ export const ControlledOpenState: StoryFn = () => {

<div className="pb-[300px]">
<Combobox open={open} onOpenChange={setOpen}>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -148,7 +154,9 @@ export const CustomItem: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand Down Expand Up @@ -187,7 +195,9 @@ export const Disabled: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox disabled>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand Down Expand Up @@ -217,7 +227,9 @@ export const FilteringAutoFilter: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox autoFilter>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand Down Expand Up @@ -248,12 +260,14 @@ export const FilteringManual: StoryFn = () => {
return (
<div className="pb-[300px]">
<Combobox>
<Combobox.Input
aria-label="Book"
placeholder="Pick a book"
value={inputValue}
onValueChange={setInputValue}
/>
<Combobox.Trigger>
<Combobox.Input
aria-label="Book"
placeholder="Pick a book"
value={inputValue}
onValueChange={setInputValue}
/>
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -278,7 +292,9 @@ export const ReadOnly: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox readOnly>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger aria-label="Book">
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -299,7 +315,9 @@ export const DisabledItem: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -322,7 +340,9 @@ export const Grouped: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox autoFilter>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Group>
Expand Down Expand Up @@ -351,7 +371,9 @@ export const LeadingIcon: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -374,7 +396,9 @@ export const ItemIndicator: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox multiple defaultValue={['book-1', 'book-2']}>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger aria-label="Book">
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand Down Expand Up @@ -419,7 +443,9 @@ export const Statuses: StoryFn = () => {
{statuses.map(status => {
return (
<Combobox state={status}>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger aria-label="Book">
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -442,7 +468,9 @@ export const MultipleSelection: StoryFn = _args => {
return (
<div className="pb-[300px]">
<Combobox multiple autoFilter defaultValue={['book-1', 'book-2']}>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand Down Expand Up @@ -475,12 +503,14 @@ export const MultipleSelectionControlled: StoryFn = () => {
return (
<div className="flex flex-col gap-md pb-[300px]">
<Combobox autoFilter multiple value={selectedValues} onValueChange={setSelectedValues}>
<Combobox.Input
aria-label="Book"
placeholder="todo placeholder"
value={inputValue}
onValueChange={setInputValue}
/>
<Combobox.Trigger>
<Combobox.Input
aria-label="Book"
placeholder="Pick a book"
value={inputValue}
onValueChange={setInputValue}
/>
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -505,7 +535,9 @@ export const FormFieldLabel: StoryFn = _args => {
<FormField>
<FormField.Label>Book</FormField.Label>
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
Expand All @@ -530,7 +562,9 @@ export const FormFieldHiddenLabel: StoryFn = _args => {
<VisuallyHidden>Book</VisuallyHidden>
</FormField.Label>
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
Expand All @@ -553,7 +587,9 @@ export const FormFieldReadOnly: StoryFn = _args => {
<FormField readOnly>
<FormField.Label>Book</FormField.Label>
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>

<Combobox.Popover>
<Combobox.Items>
Expand All @@ -577,7 +613,9 @@ export const FormFieldDisabled: StoryFn = _args => {
<FormField disabled>
<FormField.Label>Book</FormField.Label>
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
Expand All @@ -600,7 +638,9 @@ export const FormFieldRequired: StoryFn = _args => {
<FormField isRequired>
<FormField.Label>Book</FormField.Label>
<Combobox>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
Expand Down Expand Up @@ -629,7 +669,9 @@ export const FormFieldValidation: StoryFn = () => {
setState(value === 'default' ? undefined : (value as 'success' | 'alert' | 'error'))
}}
>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
<Combobox.Trigger aria-label="Book">
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Item value="default">default</Combobox.Item>
Expand Down
Loading

0 comments on commit 65b78a5

Please sign in to comment.