Skip to content

[6.x] Fix date picker inconsistencies#14732

Merged
jasonvarga merged 4 commits into
6.xfrom
make-date-pickers-consistent
Jun 4, 2026
Merged

[6.x] Fix date picker inconsistencies#14732
jasonvarga merged 4 commits into
6.xfrom
make-date-pickers-consistent

Conversation

@jaygeorge
Copy link
Copy Markdown
Contributor

@jaygeorge jaygeorge commented May 26, 2026

Edit by Jason:
The scope crept a little. I noticed some more inconsistencies between the single and range fields, so thought made sense to resolve them here. Things like padding, leading, spacing, etc.


Description of the Problem

Tiny thing, but the date range picker button is slightly different from the date picker button.
This is noticeable when escaping the date field

Escaping the date field

(desirable focus experience) – see the sidebar date field calendar icon, which just receives a gray background

2026-05-26 at 17 47 25@2x

Escaping the date range field

(undesirable focus experience) – see the sidebar date field calendar icon, which receives a wonky blue ring

2026-05-26 at 17 49 25@2x

What this PR Does

Fixes the date range calendar icon to use the same styling as the date field calendar icon, like this

(wonky blue focus line no longer visible)

2026-05-26 at 17 53 54@2x

How to Reproduce

  1. Add a date range field type
  2. Click the picker calendar icon
  3. Press escape without picking anything
  4. Observe the wonky focus ring

jaygeorge and others added 4 commits May 26, 2026 17:44
…Trigger, which gave it a different focus ring/background than the date picker. It now matches the DatePicker for consistency
- Add `leading-[1.375rem]` to DatePicker container to fix vertical alignment and focused segment height
- Remove `text-sm` and `antialiased` from DatePicker literal separators to fix thinner slashes/colons
- Add `whitespace-pre` to literal separators in both pickers to preserve space in ", " separators
- Reduce DatePicker segment padding from `px-0.5` to `px-0.25` to fix wider gaps between segments
- Remove `py-2` and change `px-2.5` → `px-2` on DateRangePicker container to align with DatePicker
- Change DateRangePicker trigger from `size-8 -ms-2` to `p-2 -ms-1` to match DatePicker sizing
- Change DateRangePicker calendar icon from `size-3.5!` to `size-4` to match DatePicker

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jasonvarga
Copy link
Copy Markdown
Member

I added a little scope creep that made more things consistent between the single and range fields.

@jasonvarga jasonvarga changed the title [6.x] Make the date range picker the same button [6.x] Fix single and range date picker inconsistencies Jun 4, 2026
@jasonvarga jasonvarga changed the title [6.x] Fix single and range date picker inconsistencies [6.x] Fix date picker inconsistencies Jun 4, 2026
@jasonvarga jasonvarga merged commit 32cfa03 into 6.x Jun 4, 2026
19 checks passed
@jasonvarga jasonvarga deleted the make-date-pickers-consistent branch June 4, 2026 20:19
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.

2 participants