-
Notifications
You must be signed in to change notification settings - Fork 205
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
fix(combobox): add combobox pattern #3894
Conversation
Tachometer resultsCurrently, no packages are changed by this PR... |
packages/combobox/src/Combobox.ts
Outdated
export type ComboboxOption = { | ||
id: string; | ||
value: string; | ||
}; |
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.
Question that came up for me as I work on the benchmark test: do we want to expand this API to also to accept an array of strings that could get converted to ComboboxOptions
? The id
could match the value
, or we could do some fancy RegEx or whatever to convert the value
to something more multipurpose.
The reason I ask is because I have an String
array of a list of countries, and it's annoying for me to have to convert them into an object so I can fit it into this API. It'd be nice if I could just have the combobox do the work of converting it for me. I'm also thinking about that in case we end up using the select-only combobox as a basis for the lazy picker or something... What do you think, @Westbrook?
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.
Currently, we can do this with a map and have all the values in the lightDOM, but I wouldn't want that to be the only option.
<sp-combobox>
${countryList.map(
(value, index) => html`
<sp-menu-item id=${index} value=${value}>
${option.value}
</sp-menu-item>
`
)}
</sp-combobox>
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.
This is a great question for potential consumers of the element. I'm not opposed to it so much as I would be surprised to see someone with a functional data set that didn't already have not a unique identifier AND a user readable value.
In that case that there were, conditioning data to support this is also not too crazy:
<sp-combobox
.options=${countryList.map((value, index) => ({ value, index }))}
></sp-combobox>
This repeats the data processing more than would be appropriate, so you would probably cache a conditioned array in the parent context. That's not so different than us doing it as well, so maybe we would just do it by default.
The question will always go back to whether it actually makes sense to for consumers to actually reference values by their visible value vs always having a unique ID for them.
56d8884
to
1477765
Compare
14aac36
to
40cd849
Compare
09cc8e7
to
d34ecd4
Compare
* feat(combobox): wip * chore: update sizes and stories * chore: add isoverlayopen decorator to stories --------- Co-authored-by: Westbrook Johnson <[email protected]> Co-authored-by: Najika Yoo <[email protected]>
* chore: add benchmark test for lightdom combobox * chore: add object version of benchmark test * chore: rename files --------- Co-authored-by: Najika Yoo <[email protected]>
…sited in future work (#3919) * test(combobox): get more tests passing and skip tests that will be visited in future work * ci: update golden images cache * test(combobox): ignore Combobox Item code
* chore(combobox): cleanup unused code * ci: update golden images cache
* fix(combobox): add support for external tooltip elements * chore(combobox): remove unused code paths * ci: update golden images cache * docs(combobox): include slot present in API docs
* chore: add labels to combobox input * chore: get tests passing * test(combobox): get a11y tests passing * chore: remove unused positionlistbox method * test: get tests passing, change spelling of activeDescendant * chore: missed some descendents * chore: add help text demo and test * ci: update hash * chore: address review comments * chore: abstract shared data to index files * test(combobox): update tests and stories to use legible data * ci: update hash * chore: label menu and rename stories * ci: update hash --------- Co-authored-by: Najika Yoo <[email protected]>
* chore: add tooltip to ariadescribedby * test(combobox): add a11y test for tooltip --------- Co-authored-by: Najika Yoo <[email protected]>
* chore(combobox): clean up property availability and type * refactor(combobox): update ComboboxOption type * ci: update golden images cache * refactor(combobox): simplify typing and correct query location when moving items into viewport * docs: use human useful content in stories * ci: update golden images cache
6a5c85c
to
86d27f6
Compare
…3988) * docs(combobox): add story demonstrating controlled-component usage * Update packages/combobox/stories/combobox.stories.ts Co-authored-by: Westbrook Johnson <[email protected]> --------- Co-authored-by: Westbrook Johnson <[email protected]>
* docs(textfield): expand on attribute/property descriptions * fix(combobox): add support for "readonly" and "disabled" * ci: update golden images cache * fix(textfield): prevent outline on :focus-visible elements that are disabled
Description
Add a Combobox pattern to the library:
Visit the docs for more information.
Related issue(s)
How has this been tested?
autocomplete="none"
Comboboxautocomplete="list"
ComboboxScreenshots (if appropriate)
Types of changes
Checklist