Unusual spacing in DateRangePicker

[minaseem]

🐛 Bug Report

There is unusual space in DateRangePicker field

Space between points A and B, C and D is not proper. It seems that it is more than it should be which makes it looks little off.

🤔 Expected Behavior

Space between points A and B, C and D should be lesser.

😯 Current Behavior

Space between points A and B, C and D is more than it should ideally be.

💁 Possible Solution

🔦 Context

We have received this as feedback multiple times. People have raised concerns regarding the above-specified spacing.

💻 Code Sample

The issue can be reproduced within RS doc. Link

🌍 Your Environment

Software	Version(s)
react-spectrum	3
Browser
Operating System

🧢 Your Company/Team

Adobe / AJO

🕷 Tracking Issue (optional)

[LFDanLu]

The spacing is there to accommodate for the wider placeholder text that appears if you delete those values:

This was the best compromise we could come up with that allowed the placeholders to be readable/convey the proper date format, allowed for large enough date segment hit targets for mobile, and prevented layout shifting as the user inputs a value (aka if we had dynamic spacing instead of the static date segment widths)

[LFDanLu]

Note: the prefixed 0 is automatically included for some regions/locales (e.g. fr-FR), so this seems to be a regional preference. As such, we prefer that the prefixed "0" formatting is automatically handled (aka the current behavior)

[vladdoletskiy]

how about this space?

[devongovett]

As shown above, it's to accommodate the placeholder and avoid a layout shift when a value is entered or deleted.

[vladdoletskiy]

it's ugly. My designers don't want to use it because of this. Although DatePicker good. Tell me if it's possible to use only "/" instead of '-'

[devongovett]

The formatting depends on the locale. If the country/region/language uses / then that will be used, otherwise a different separator might be used.

This is a case where there is no perfect design. Previously, we had a numeric placeholder (example date), but people complained that they couldn't tell it was a placeholder and not filled in. So, we replaced with a text-based placeholder. But that means that the placeholder is a different width from a value. We thought it was weird to have things shifting around while entering a value (in fact, the whole component changes width), so reserved space for the placeholder at all times to avoid it.

Here's an example:

Screen.Recording.2022-08-08.at.1.57.14.PM.mov