-
Notifications
You must be signed in to change notification settings - Fork 10
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
WB-1676: Combobox - Add multiple Selection support #2223
base: combobox-single
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 265751e The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Size Change: +985 B (+1.01%) Total Size: 98.8 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-hlfeyayxwv.chromatic.com/ Chromatic results:
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## combobox-single #2223 +/- ##
===================================================
+ Coverage 94.72% 95.26% +0.54%
===================================================
Files 249 251 +2
Lines 29736 30046 +310
Branches 2447 2453 +6
===================================================
+ Hits 28166 28624 +458
+ Misses 1543 1412 -131
+ Partials 27 10 -17
... and 31 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (a52e000) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2223" Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2223 |
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.
Looking good to me, thank you!
Summary:
Create the multiple version that displays the selected values as individual Pill
components that can be deleted/unchecked.
Added a new hook to manage keyboard navigation for the multiple selection logic.
Combobox Implementation Plan:
Listbox
component with Single and Multiple selection support #2216Combobox
component.[CURRENT]Combobox
component.Combobox
component.Issue: https://khanacademy.atlassian.net/browse/WB-1676
Test plan:
Keyboard navigation instructions (when the combobox is focused):
Arrow Up | Arrow Down
: to navigate the listbox optionsArrow left | Arrow right
: to navigate the selected options (pills displayed before the input)Backspace
: removes the last pill in the stackEnter
:Screen.Recording.2024-05-09.at.4.24.30.PM.mov