-
-
Notifications
You must be signed in to change notification settings - Fork 257
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature(packages/ui): Combobox
component
#14814
Conversation
ok ok, this definetely "looks" good and useful, but I want to make sure it "blends" in our existing style. wdyt? |
good question, and yes it does blend with our existing style and branding! do check this demo |
ok I think we are missing the "more" options here. It is important because it lets us show a smaller number of options by default but if the use r wants more, then more are shown. Do you think you could add that? |
good point! will add that! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hum, I am not sure I see the moreOptions
option.
The goal here is to show a specifc subset of items by default (not just the first n...)
@@ -22,7 +22,8 @@ interface Option { | |||
} | |||
|
|||
interface ComboboxProps { | |||
options: Option[] | |||
initialOptions: Option[] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's just keep options
here for backward compatibility!
@@ -22,7 +22,8 @@ interface Option { | |||
} | |||
|
|||
interface ComboboxProps { | |||
options: Option[] | |||
initialOptions: Option[] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
initialOptions: Option[] | |
options: Option[] |
// Default story with a mix of initial and more options | ||
export const Default = { | ||
args: { | ||
initialOptions: getRandomItems(allOptions, 5), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shouldn't that be options
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the stories need to be updated, no?
export const WithLongList = { | ||
args: { | ||
// Generate 10 initial options | ||
initialOptions: getRandomItems( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same?
// Story without any additional options in the "More options" section | ||
export const WithoutMoreOptions = { | ||
args: { | ||
initialOptions: getRandomItems(allOptions, allOptions.length), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ditto
// Story with duplicate options to test handling of non-unique values | ||
export const WithDuplicates = { | ||
args: { | ||
initialOptions: getRandomItems(allOptions, 5), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and there as well?
oh definitely. the push failed for some reason! |
Description
This PR introduces a new
Combobox
component to ourui
package, aimed at improving user experience and accessibility over traditional select elements. It includes a dynamic search functionality, making it easier for users to filter and locate options within large datasets. It also supports full keyboard navigation (enter
, Arrow keys,escape
,tab
) for enhanced accessibility compliance.Additional features include customizable prepend/append elements, disabled states, and clear visual feedback with check icons, all integrated with our
FieldLayout
for consistent styling.Overall, it simplifies dropdown selection.
ScreenGrab
Checklist: