Skip to content
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-1675: Implement Combobox component with single selection #2221

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented May 1, 2024

Summary:

This is the first PR associated to the Combobox implementation. It includes the
basic structure of the Combobox component with single selection support.

Combobox Implementation Plan:

  1. WB-1589: Add Listbox component with Single and Multiple selection support #2216
  2. Add Combobox component with Single selection support. [CURRENT]
  3. Add multiple selection support to Combobox component.
  4. Add autocomplete support to Combobox component.
  5. Add async/dynamic support to Combobox component.

Issue: https://khanacademy.atlassian.net/browse/WB-1675

Test plan:

Verify that the new Component component works as expected and that the new
documentation is accurate.

/?path=/docs/packages-dropdown-combobox--docs

https://5e1bf4b385e3fb0020b7073c-mzmurnrasq.chromatic.com/?path=/docs/packages-dropdown-combobox--docs

Keyboard navigation:

  • Focus on the input field to open the Listbox.
  • Use the ArrowDown / ArrowUp keys to navigate through the options.
  • Use the Enter key to select an option.
  • Use the Escape key to close the Listbox.
  • Verify that the selected option is displayed in the input field.
Screen.Recording.2024-05-01.at.3.10.07.PM.mov

@jandrade jandrade self-assigned this May 1, 2024
Copy link

changeset-bot bot commented May 1, 2024

🦋 Changeset detected

Latest commit: 7554bcd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
@khanacademy/wonder-blocks-dropdown Minor
@khanacademy/wonder-blocks-icon-button Minor
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-modal Patch
@khanacademy/wonder-blocks-popover Patch
@khanacademy/wonder-blocks-search-field Patch
@khanacademy/wonder-blocks-tooltip Patch

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

Copy link
Contributor

github-actions bot commented May 1, 2024

Size Change: +1.36 kB (+1.41%)

Total Size: 97.8 kB

Filename Size Change
packages/wonder-blocks-dropdown/dist/es/index.js 15.2 kB +1.36 kB (+9.82%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.78 kB
packages/wonder-blocks-banner/dist/es/index.js 1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.72 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 1.13 kB
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-cell/dist/es/index.js 2.24 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.29 kB
packages/wonder-blocks-core/dist/es/index.js 3.67 kB
packages/wonder-blocks-data/dist/es/index.js 6.33 kB
packages/wonder-blocks-form/dist/es/index.js 5.33 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js 4.56 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.21 kB
packages/wonder-blocks-icon/dist/es/index.js 1.06 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 72 B
packages/wonder-blocks-layout/dist/es/index.js 1.89 kB
packages/wonder-blocks-link/dist/es/index.js 2.53 kB
packages/wonder-blocks-modal/dist/es/index.js 5.52 kB
packages/wonder-blocks-pill/dist/es/index.js 1.65 kB
packages/wonder-blocks-popover/dist/es/index.js 4.86 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.55 kB
packages/wonder-blocks-switch/dist/es/index.js 2.1 kB
packages/wonder-blocks-testing/dist/es/index.js 3.94 kB
packages/wonder-blocks-theming/dist/es/index.js 697 B
packages/wonder-blocks-timing/dist/es/index.js 1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js 1.74 kB
packages/wonder-blocks-toolbar/dist/es/index.js 857 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.91 kB
packages/wonder-blocks-typography/dist/es/index.js 1.49 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented May 1, 2024

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-seiomgwdex.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 331
Tests with visual changes 0
Total stories 418
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 331

Copy link

codecov bot commented May 1, 2024

Codecov Report

Attention: Patch coverage is 98.56851% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 94.72%. Comparing base (afeac13) to head (7554bcd).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2221      +/-   ##
==========================================
+ Coverage   94.48%   94.72%   +0.23%     
==========================================
  Files         248      249       +1     
  Lines       29268    29736     +468     
  Branches     1638     2447     +809     
==========================================
+ Hits        27654    28166     +512     
+ Misses       1610     1543      -67     
- Partials        4       27      +23     
Files Coverage Δ
.../wonder-blocks-dropdown/src/components/listbox.tsx 100.00% <100.00%> (ø)
...-blocks-icon-button/src/components/icon-button.tsx 100.00% <100.00%> (ø)
...s/wonder-blocks-dropdown/src/hooks/use-listbox.tsx 98.36% <90.47%> (-0.75%) ⬇️
...wonder-blocks-dropdown/src/components/combobox.tsx 98.74% <98.74%> (ø)

... and 39 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update afeac13...7554bcd. Read the comment docs.

@jandrade jandrade marked this pull request as ready for review May 7, 2024 14:36
@khan-actions-bot khan-actions-bot requested a review from a team May 7, 2024 14:36
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/gold-houses-own.md, .changeset/swift-peaches-hunt.md, __docs__/wonder-blocks-dropdown/combobox.stories.tsx, packages/wonder-blocks-dropdown/src/index.ts, packages/wonder-blocks-dropdown/src/components/combobox.tsx, packages/wonder-blocks-dropdown/src/components/listbox.tsx, packages/wonder-blocks-dropdown/src/hooks/use-listbox.tsx, packages/wonder-blocks-icon-button/src/components/icon-button.tsx, packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

Copy link
Contributor

github-actions bot commented May 7, 2024

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (8b29604) 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="PR2221"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2221

Copy link
Member

@jeresig jeresig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice work - looks good to me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants