feat(site/src/components): add date-time range picker with quick picks - #28392
Merged
Conversation
…cker with quick picks
…s instead of preset tokens
…dings Radiogroup semantics with roving focus for quick picks, blur-gated time validation with aria-describedby error linking, future dates disabled, Apply requires a complete range, and intra-day custom labels include times.
…eTimeRange helpers
Contributor
|
super nit with no advice! I literally cannot think of a better place for the error to show, but this layout jump looks juuuuust a little weird to me: Screen.Recording.2026-08-20.at.2.01.25.PM.mov |
…rs on the calendar Inline error messages grew the popover and shifted the layout. Errors now render as a single floating alert over the calendar's bottom edge, keeping the popover size stable. Stories use fn() for onChange so calls appear in the Storybook actions panel.
Contributor
Author
|
Fixed in 83c3c4a: validation errors now render as a single floating alert overlaid on the calendar's bottom edge instead of inline text, so the popover size stays fixed. The alert keeps Posted by Coder Agents on behalf of @tracyjohnsonux. |
… ranges A lone calendar click now forms a valid one-day range instead of leaving Apply disabled, and the To time defaults to 11:59:59 PM so day-only selections span the full final day rather than ending at its midnight.
… the current month
… overlay The floating validation message hides after five seconds like a toast. Invalid field styling and the disabled Apply button persist until the input is corrected, and a changed error message re-shows the overlay.
tracyjohnsonux
marked this pull request as ready for review
August 20, 2026 21:42
…able react-day-picker marks nav buttons with aria-disabled rather than disabled, so they kept a pointer cursor and accepted no-op clicks. Disabled chevrons now also drop pointer events.
Args-based stories passed a frozen value, so committing a selection in the Storybook canvas never updated the trigger while the render-function stories did. A shared stateful render now backs every story, with onChange still spied through fn() for the actions panel.
tracyjohnsonux
changed the title
jeremyruppel
approved these changes
Aug 20, 2026
jeremyruppel
left a comment
jeremyruppel
left a comment
Contributor
There was a problem hiding this comment.
let's pick some datetimes!
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
Adds a frontend-only
DateTimeRangePickercomponent: a date range picker with quick picks (Last 15 min, Last hour, Today, This week) and per-boundary time selection. The dropdown opens as just the quick-pick list; the calendar and From/To time fields only appear after selecting "Custom range". Quick picks commit immediately, custom ranges commit via Apply.No backend changes. The value is always resolved dates:
Quick picks resolve to concrete
start/endat selection time;presetexists solely so the trigger can keep rendering the preset label. Consumers sendstart/endto the API in UTC viaDate.toISOString().Composed from existing primitives (
Calendar,Popover,Select,Input,Button); theCalendarcomponent is unchanged. Includes 9 Storybook stories with play-function coverage: quick-picks-only open state, immediate preset commit, custom panel expansion, apply flow, invalid time validation, end-before-start validation, and cancel discarding the draft.Design notes and follow-ups
Mockup deviations
Buttonoutline variant to match the design system.Settled decisions
Follow-ups (separate PRs)
DateTimeRangeFilter(text-expression based, used by the AIBridge sessions filter) is a candidate for migration to this design.Generated by Coder Agents on behalf of @tracyjohnsonux.