Add DatePicker and TimePicker to the design system - #3603
Open
tom2drum wants to merge 21 commits into
Open
Conversation
Resolves #3567
Replace the native date inputs with FormFieldDate. Form state now holds Array<DateValue>, so both forms convert at the API boundary: csv export sends absolute UTC timestamps through a new serialize-form-fields helper, the audit form sends a date-only string. The csv export period validator compares with DateValue.compare instead of dayjs. Date picker fixes found while integrating: - format through toCalendarDateTime, since a ZonedDateTime stringifies with an IANA suffix that dayjs cannot parse and rendered as "Invalid Date" - return a CalendarDate when withTime is false rather than inventing a time, which made a date-only value read as past a same-day max - widen to CalendarDateTime before applying a time, as a date-only value silently ignored the time fields Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Time picker treated hour/minute 0 as unset, so picking a minute could rewrite a valid midnight hour and an out-of-range 00:00 was never cleared when the limits tightened. Compare against undefined instead of using falsy checks. Date picker: - clamp a carried-over time into [min, max], since a day can be selectable while a specific time on it is not - report valueAsString with formatWithTime when withTime is set, it always omitted the time before - pass readOnly to the picker root so the input cannot be edited - clearing the time now drops the time component rather than falling back to 00:00, which the time picker immediately read back as a selected midnight - fix the popover scroll offset, which was 8px short and negative for hour 0 - name the forwardRef render function after the component dateValidatorFactory dereferenced value[0] without checking it, so validating a cleared field threw instead of passing. Also memoise the csv export max date, truncate the dialog defaults to whole minutes as before, and fix the design system demo's form field type. Regenerate pnpm-lock.yaml: it has been out of date with the toolkit manifest since the peer dependencies were added, which fails a --frozen-lockfile install. Add unit tests for the serializer and the date validator, including the cleared value regression. The time picker limit handling is not covered: it lives in component callbacks and the toolkit has no component test convention yet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
tom2drum
added
dependencies
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
1 participant
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.
Description and Related Issue(s)
Resolves #3567
Adds a Chakra-based DatePicker (with optional time) and TimePicker to the toolkit, wires them into react-hook-form via
FormFieldDate, and adopts them in CSV export and contract audit forms.Proposed Changes
DatePickerandTimePickerwrappers intoolkit/chakra, with theme recipes and design-system showcase tabsFormFieldDate+ date validators for form integration@blockscout/ui-toolkit; adds@internationalized/date(and related toolkit peer deps)Breaking or Incompatible Changes
None for the app. Toolkit consumers may need to satisfy the new peer dependencies (
@internationalized/date, etc.) when upgrading@blockscout/ui-toolkit.Additional Information
—
Checklist for PR author
Made with Cursor