Add Date Picker and Calendar registry components - #120
Open
MUFFANUJ wants to merge 7 commits into
Open
Conversation
Collaborator
Author
|
Range selection uses the auto-normalize model: after a start date is selected, clicking an earlier date completes the range by swapping the dates, so the earlier date becomes from, and the original start becomes to. Some calendars instead restart the range when the second date is earlier; this implementation intentionally completes the range in either direction. I'm open to suggestions, if any! |
smeragoel
self-requested a review
August 12, 2026 22:41
smeragoel
requested changes
Aug 18, 2026
smeragoel
left a comment
Member
There was a problem hiding this comment.
Great work @MUFFANUJ! I have a few things I noticed, rest everything looks awesome:
Calendar:
- When going through the calendar with a keyboard, if I encounter a disabled day, I can't seem to move forward by skipping the disabled day.
- On the demo stories, could we use the real current date and current month rather than seeding July 2026? Otherwise, it can get confusing what's being higlighted.
- Drop opacity-50 from disabled days — muted-foreground is already our disabled-text token
- Month change isn't announced. Clicking the chevrons or hitting PageUp/PageDown swaps the whole grid but nothing is announced. An aria-live="polite" on the calendar-caption would cover it.
Date Picker:
- Segmented mode (1 and 4 are agent detected, so I'd appreciate a quick double-check on that)
- Segmented Mode is a you type into. Screen readers announce "button", Enter/Space do nothing, and there's no
inputmodeso on touch no soft keyboard appears and the mode would be unusable on mobile. - No invalid feedback. I typed 99992026 and it displays 99/99/2026 with no aria-invalid, no error border, and the underlying date unchanged. The user would have no idea they've entered invalid date.
- This one is a design issue. The trigger shows a calendar icon but has no popover at all. Having the popover affordance is misleading, so I have removed the calendar icon for segmented control from the design.
- The accessible name reads "…Year 2026 active" while a separate aria-describedby says "Year segment active." which is the same information twice, and "active" as a bare word in a name is odd.
- Segmented Mode is a you type into. Screen readers announce "button", Enter/Space do nothing, and there's no
- Usually we skip type-state matrix in the story and support any odd / unconventional state that needs to be demonstrated with an example instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reference Issues or PRs
Closes #114
What does this implement/fix?
Put a
xin the boxes that applyTesting
Documentation
Access-centered content checklist
Text styling
H1or#in markdown).Non-text content
Any other comments?
Adds reusable Calendar and Day components plus a DatePicker for single date, date range, date & time, and segmented typed date entry. The calendar includes the 6x7 month grid, day states, range states, accessible grid roles, keyboard navigation, and popover-surface styling; DatePicker composes Nebari Field with an input-styled Base UI popover trigger, time slots, controlled value callbacks, and segmented
MM/DD/YYYYentry. Stories and tests cover the state matrix, examples, selection behavior, disabled dates, popover open/close, keyboard range extension, and accessibility behavior.