Skip to content

feat(List): filter date ranges by time - #3388

Merged
Lisa18289 merged 2 commits into
nextfrom
claude/flow-issue-3375-2e0210
Oct 21, 2026
Merged

Lisa18289 merged 2 commits into
nextfrom
claude/flow-issue-3375-2e0210

Conversation

@Lisa18289

@Lisa18289 Lisa18289 commented Oct 5, 2026 •

Copy link
Copy Markdown
Member

Lists of logs, backups or cronjob runs can now be narrowed to a time window instead of whole days. dateRangeOptions={{ granularity: "minute" }} replaces the range calendar with start date, start time, end date and end time fields, in the filter popover and in the "All filters" modal. The default stays "day", so existing lists don't change.

A date without a time covers its whole day, an end time its whole minute, and an empty date leaves that side open. Times are local wall-clock times (CalendarDateTime). Changes apply as they are typed, as long as the range is valid; otherwise the filter keeps the last valid range. A range that ends before it starts shows one error below all fields, whichever field was filled first, and a date outside minValue/maxValue shows its field's error. dateRangeOptions is a union now, so the calendar-only props are a type error with "minute".

Worth a look: the active filter chip now formats with the Flow locale instead of the browser's (still numeric, e.g. 9/2/2025, with , 14:30 for a time), for both granularities, which changes the existing "filtered" baseline. The new visual scenarios are gated on 1.5.0 for cross-version runs. resolveDateRangeFilterValue is exported (also from flr-universal and the Vue package) so a loader filtering on the server resolves a filter value to the same bounds.

The Vue List gets the same fields. The rules live in components-base, so both bindings run them: the comparison (a CalendarDateTime or ZonedDateTime cell now counts as a date), which typed input applies, and the chip text. e2e/list-parity has four new scenarios, and remote-dom-demo a Vue list-date-range demo.

Two fixes on the way. Setting a date range didn't notify the filter's listeners, so a list with a loader kept its batches; in Vue it kept showing the old range's rows. And the parity normalizer numbered Vue's useId before react-aria's ids within one aria-describedby, instead of left to right.

Closes #3375

🤖 Generated with Claude Code

@Lisa18289 Lisa18289 self-assigned this Oct 5, 2026
@github-actions

github-actions Bot commented Oct 5, 2026

Copy link
Copy Markdown
Contributor

🚀 Preview Deployment

Preview environments are ready:

Type URL
docs pr-3388.docs.review.flow-components.de
storybook pr-3388.storybook.review.flow-components.de

Images:

  • docs: ghcr.io/mittwald/flow/docs:pr-3388
  • storybook: ghcr.io/mittwald/flow/storybook:pr-3388

@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 6, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 6, 2026
@Lisa18289 Lisa18289 linked an issue Oct 7, 2026 that may be closed by this pull request
@Lisa18289
Lisa18289 force-pushed the claude/flow-issue-3375-2e0210 branch from a7625a2 to 6b12866 Compare October 7, 2026 08:53
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 7, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 7, 2026
@Lisa18289
Lisa18289 force-pushed the claude/flow-issue-3375-2e0210 branch 3 times, most recently from 2057e85 to ca1b99a Compare October 13, 2026 07:31
@Lisa18289
Lisa18289 marked this pull request as ready for review October 13, 2026 08:18
@Lisa18289
Lisa18289 requested a review from a team October 13, 2026 08:18
@Lisa18289
Lisa18289 force-pushed the claude/flow-issue-3375-2e0210 branch from ca1b99a to 780f20e Compare October 13, 2026 08:44
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 13, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 13, 2026
@Lisa18289 Lisa18289 added the run-visual-tests Runs the full visual regression suite against the existing baselines and fails the check on mismatch label Oct 13, 2026
@github-actions github-actions Bot removed the run-visual-tests Runs the full visual regression suite against the existing baselines and fails the check on mismatch label Oct 13, 2026
@Lisa18289 Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 13, 2026
@github-actions github-actions Bot removed the update-screenshots Label a PR to update the screenshots used for visual regression testing label Oct 13, 2026
@github-actions

Copy link
Copy Markdown
Contributor

❌ Visual Regression Tests Failed

At least one shard did not pass. If snapshots differ from the committed baselines, download the visual-diffs-* artifacts from this run to inspect the actual/diff images (a shard that failed before comparison, e.g. during install or browser setup, leaves none).

If the differences are intentional, update the baselines by adding the update-screenshots label to the PR.

Run details

`dateRangeOptions.granularity: "minute"` replaces the range calendar
with start and end date and time fields, in the popover and in the
"All filters" modal. Changes apply as they are typed. A date without a
time covers its whole day, an end time its whole minute, and an empty
date leaves that side open.

A range that ends before it starts shows one error below all fields,
whichever field was filled first, and dates outside minValue/maxValue
show their field's error. Neither is applied: the filter keeps the last
valid range. A year below 1000 counts as still being typed, since
react-aria reports it digit by digit, and raises no range error either.

The active filter chip formats with the Flow locale instead of the
browser's and shows open ranges ("from …", "until …"), for both
granularities.

The rules live in components-base and both bindings run them: the
comparison (a CalendarDateTime or ZonedDateTime cell now counts as a
date), which typed input applies (getListDateTimeRangeUpdate) and the
chip text (formatListDateRange). The Vue List gets the same fields, the
list-parity harness four scenarios for them, and remote-dom-demo a Vue
list-date-range demo.

Setting a date range now notifies the filter's listeners, as every other
filter change does. Without it a list with a loader kept its batches —
in Vue it kept showing the rows of the previous range.

The parity normalizer numbers ids in a reference list from left to
right; it numbered Vue's useId before react-aria's in one attribute.

`resolveDateRangeFilterValue` resolves a filter value to the instants
it covers, so a loader filtering on the server uses the same bounds. It
is exported from both remote packages.

Closes #3375

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Lisa18289
Lisa18289 force-pushed the claude/flow-issue-3375-2e0210 branch from 834eaaf to e556116 Compare October 13, 2026 12:15
@mfal
mfal self-requested a review October 15, 2026 12:18
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@Lisa18289
Lisa18289 enabled auto-merge October 21, 2026 05:59
@Lisa18289
Lisa18289 merged commit a7d68c9 into next Oct 21, 2026
24 checks passed
@Lisa18289
Lisa18289 deleted the claude/flow-issue-3375-2e0210 branch October 21, 2026 06:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

List: allow filtering by time in date range filter

2 participants