Skip to content

DatePicker: Allow date segments to be incremented with the arrow keys in DatePickerInput - #3191

Open
marcysutton wants to merge 1 commit into
WB-2425-date-picker-activationfrom
WB-2431-numeric-input
Open

DatePicker: Allow date segments to be incremented with the arrow keys in DatePickerInput#3191
marcysutton wants to merge 1 commit into
WB-2425-date-picker-activationfrom
WB-2431-numeric-input

Conversation

@marcysutton

Copy link
Copy Markdown
Member

Summary:

To make the DatePicker work more like the native time input, we allow the arrow keys to adjust numeric date segments in the date picker input.

Issue: WB-2431

Test plan:

  1. Ensure tests pass
  2. Compare interaction model to the native time input: /?path=/story/packages-datepicker-datepicker--date-and-time-comparison&globals=theme:thunderblocks
  3. Ensure text date formats still validate as expected

@changeset-bot

changeset-bot Bot commented Aug 28, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1b8602f

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

This PR includes changesets to release 1 package
Name Type
@khanacademy/wonder-blocks-date-picker Minor

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

@khan-actions-bot
khan-actions-bot requested a review from a team August 28, 2026 22:08
@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (f987de4) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR3191"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR3191

@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Size Change: +977 B (+0.74%)

Total Size: 133 kB

📦 View Changed
Filename Size Change
packages/wonder-blocks-date-picker/dist/es/index.js 9.62 kB +977 B (+11.31%) ⚠️
ℹ️ View Unchanged
Filename Size
packages/eslint-plugin-wonder-blocks/dist/es/index.js 7.11 kB
packages/wonder-blocks-accordion/dist/es/index.js 3.02 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.43 kB
packages/wonder-blocks-badge/dist/es/index.js 2.03 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.93 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 798 B
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-card/dist/es/index.js 1.09 kB
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.61 kB
packages/wonder-blocks-core/dist/es/index.js 2.6 kB
packages/wonder-blocks-data/dist/es/index.js 5.51 kB
packages/wonder-blocks-dropdown/dist/es/index.js 20.6 kB
packages/wonder-blocks-form/dist/es/index.js 6.39 kB
packages/wonder-blocks-grid/dist/es/index.js 1.25 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4.08 kB
packages/wonder-blocks-icon/dist/es/index.js 1.89 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.47 kB
packages/wonder-blocks-layout/dist/es/index.js 1.69 kB
packages/wonder-blocks-link/dist/es/index.js 1.54 kB
packages/wonder-blocks-modal/dist/es/index.js 7.36 kB
packages/wonder-blocks-pill/dist/es/index.js 1.32 kB
packages/wonder-blocks-popover/dist/es/index.js 4.41 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.49 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.12 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.6 kB
packages/wonder-blocks-tabs/dist/es/index.js 5.62 kB
packages/wonder-blocks-testing-core/dist/es/index.js 4.12 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.53 kB
packages/wonder-blocks-tokens/dist/es/index.js 6.5 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.19 kB
packages/wonder-blocks-typography/dist/es/index.js 1.04 kB

compressed-size-action

@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

Metric Total
Captured snapshots 22
Tests with visual changes 0
Total stories 868
Inherited (not captured) snapshots [TurboSnap] 519
Tests on the build 541

ArrowUp/ArrowDown adjust the day/month/year segment under the input
caret for numeric date formats, matching native date/time inputs.
Text formats (e.g. spelled-out month names) are unaffected.

Split out of WB-2425-date-picker-activation into its own PR per request;
this branch is stacked on top of it.
@marcysutton
marcysutton force-pushed the WB-2431-numeric-input branch from ee771a6 to 1b8602f Compare August 28, 2026 22:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant