Skip to content

feat(DateRangePicker): add XDSDateRangePicker component - #2201

Merged
czarandy merged 1 commit into
mainfrom
feat/date-range-picker
May 19, 2026
Merged

feat(DateRangePicker): add XDSDateRangePicker component#2201
czarandy merged 1 commit into
mainfrom
feat/date-range-picker

Conversation

@czarandy

@czarandy czarandy commented May 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

  • Adds XDSDateRangePicker, a button-triggered date range picker with dual-month calendar popover and configurable preset sidebar (closes XDSDateRangePicker #184)
  • Uses XDSCalendar in range mode for selection with hover preview
  • Presets are configurable via presets prop with {label, getRange()} — sidebar highlights the active preset
  • Value type is DateRange | null ({start: ISODateString, end: ISODateString})
  • Smart display formatting (omits year when same as current year)
  • hasClear defaults to true (standard for filter UIs)

Test plan

  • 23 unit tests covering rendering, accessibility, trigger behavior, clear, status, disabled states
  • 15 Storybook stories (Default, WithPresets, WithValue, MinMax, statuses, AllVariations, etc.)
  • Build passes, lint clean, sync checks pass
  • Visual review in Storybook at Core/Inputs/DateRangePicker

@vercel

vercel Bot commented May 18, 2026

Copy link
Copy Markdown

@czarandy must be a member of the Meta Open Source team on Vercel to deploy.
- Click here to add @czarandy to the team.
- If you initiated this build, request access.

Learn more about collaboration on Vercel and other options here.

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label May 18, 2026
@czarandy
czarandy force-pushed the feat/date-range-picker branch from 76508ed to 818a1aa Compare May 19, 2026 00:09
@vercel

vercel Bot commented May 19, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
xds-sandbox Error Error May 19, 2026 4:12am

Request Review

@github-actions

github-actions Bot commented May 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@xds/core 18.6KB 28.7KB 4.3KB

Accessibility Audit

Status: No accessibility violations detected.

Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

cixzhang
cixzhang reviewed May 19, 2026
View reviewed changes

@cixzhang cixzhang left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good implementation — a11y, composition with XDSCalendar, and mobile font floor are all solid.

One gap for API parity: missing changeAction and isLoading. XDSDateTimePicker and XDSDateInput both support these for async optimistic updates. DateRangePicker should have them too for consistency across date input components.

@czarandy
czarandy force-pushed the feat/date-range-picker branch from 818a1aa to 2f7111c Compare May 19, 2026 02:11
@czarandy

czarandy commented May 19, 2026

Copy link
Copy Markdown
Collaborator Author

Added changeAction and isLoading

@czarandy
czarandy force-pushed the feat/date-range-picker branch from 2f7111c to 4dbdf3d Compare May 19, 2026 02:13
@czarandy
feat(DateRangePicker): add XDSDateRangePicker component (#184)
0948d13 
Button-triggered date range picker with a dual-month calendar popover
and configurable preset sidebar. Uses XDSCalendar in range mode for
selection with hover preview. Value is DateRange | null.
@czarandy
czarandy force-pushed the feat/date-range-picker branch from 4dbdf3d to 0948d13 Compare May 19, 2026 04:12
@czarandy
czarandy enabled auto-merge (squash) May 19, 2026 04:14
cixzhang
cixzhang approved these changes May 19, 2026
View reviewed changes

@cixzhang cixzhang left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changeAction and isLoading added. Good for parity.

@czarandy
czarandy merged commit 126df42 into main May 19, 2026
20 of 21 checks passed
cixzhang pushed a commit that referenced this pull request Jun 21, 2026
@czarandy
feat(DateRangePicker): add XDSDateRangePicker component (#184) (#2201)
466577f 
Button-triggered date range picker with a dual-month calendar popover
and configurable preset sidebar. Uses XDSCalendar in range mode for
selection with hover preview. Value is DateRange | null.
cixzhang pushed a commit that referenced this pull request Jun 21, 2026
@czarandy
feat(DateRangePicker): add XDSDateRangePicker component (#184) (#2201)
d257a13 
Button-triggered date range picker with a dual-month calendar popover
and configurable preset sidebar. Uses XDSCalendar in range mode for
selection with hover preview. Value is DateRange | null.
@cixzhang
cixzhang deleted the feat/date-range-picker branch June 21, 2026 16:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cixzhang cixzhang cixzhang approved these changes
@josephfarina josephfarina Awaiting requested review from josephfarina josephfarina is a code owner

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

XDSDateRangePicker

2 participants

@czarandy @cixzhang