react-spectrum (WIP) Removing date segment placeholder default width

Full width is no longer reserved for date segments in DateField, TimeField, DatePicker, and DateRangePicker. Segments take the space of the placeholder or their value.

This also resolves #6183

Field sizes might adjust because the placeholder is no longer italic which makes it a few pixels smaller. This will break a lot of Chromatic stories.

There are some existing component fields that already shrink/grow when you edit the segments. It's only with some components, in some cases. This can be caused by:

changing the AM/PM
switching to a year that uses GMT+X instead of a time zone.
switching the month so the time zone changes.

🧢 Your Project:

RSP

Jun 18 '24 05:06 ktabors

Build successful! 🎉

Jun 18 '24 17:06 rspbot

Build successful! 🎉

Jun 18 '24 18:06 rspbot

One other problem appears to be that when you type into the field, the entire field gets wider or shorter...

Jun 18 '24 22:06 devongovett

Build successful! 🎉

Jun 21 '24 23:06 rspbot

Build successful! 🎉

Jun 26 '24 22:06 rspbot

Build successful! 🎉

Jul 11 '24 19:07 rspbot

Build successful! 🎉

Jul 11 '24 19:07 rspbot

Build successful! 🎉

Jul 12 '24 00:07 rspbot

Build successful! 🎉

Jul 12 '24 17:07 rspbot

Build successful! 🎉

Jul 12 '24 17:07 rspbot

Build successful! 🎉

Jul 12 '24 18:07 rspbot

Build successful! 🎉

Jul 12 '24 21:07 rspbot

Build successful! 🎉

Jul 12 '24 22:07 rspbot

Build successful! 🎉

Jul 12 '24 22:07 rspbot

I also found that Android now crashes when trying to change AM/PM in the time field. Steps to reproduce:

I was able to reproduce it on an another PR build. Follow the same steps, but when it doesn't crash press backspace and then it crashes. We should enter a bug for this.

Jul 12 '24 23:07 ktabors

Build successful! 🎉

Jul 15 '24 17:07 rspbot

## API Changes

unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }

@react-stately/datepicker

DateFieldState

 DateFieldState {
   calendar: Calendar
   clearSegment: (SegmentType) => void
   confirmPlaceholder: () => void
   dateFormatter: DateFormatter
   dateValue: Date
   decrement: (SegmentType) => void
   decrementPage: (SegmentType) => void
   formatValue: (FieldOptions) => string
+  getDateFormatter: (string, FormatterOptions) => DateFormatter
   granularity: Granularity
   increment: (SegmentType) => void
   incrementPage: (SegmentType) => void
   isDisabled: boolean
   isReadOnly: boolean
   isRequired: boolean
   maxGranularity: 'year' | 'month' | Granularity
   segments: Array<DateSegment>
   setSegment: (SegmentType, number) => void
   setValue: (DateValue) => void
   value: DateValue
 }

it changed:

useDateFieldState

DatePickerState

 DatePickerState {
   dateValue: DateValue
   formatValue: (string, FieldOptions) => string
+  getDateFormatter: (string, FormatterOptions) => DateFormatter
   granularity: Granularity
   hasTime: boolean
   isInvalid: boolean
   isOpen: boolean
   setOpen: (boolean) => void
   setTimeValue: (TimeValue) => void
   setValue: (DateValue | null) => void
   timeValue: TimeValue
   value: DateValue | null
 }

it changed:

useDatePickerState

DateRangePickerState

 DateRangePickerState {
   dateRange: DateRange | null
   formatValue: (string, FieldOptions) => {
     start: string
   end: string
 }
+  getDateFormatter: (string, FormatterOptions) => DateFormatter
   granularity: Granularity
   hasTime: boolean
   isInvalid: boolean
   isOpen: boolean
   setDateRange: (DateRange) => void
   setDateTime: ('start' | 'end', DateValue) => void
   setOpen: (boolean) => void
   setTime: ('start' | 'end', TimeValue) => void
   setTimeRange: (TimeRange) => void
   setValue: (DateRange | null) => void
   timeRange: TimeRange | null
   value: DateRange | null
 }

it changed:

useDateRangePickerState

Jul 15 '24 17:07 rspbot

filed https://github.com/orgs/adobe/projects/19/views/4?pane=issue&itemId=70985842 for the Android crash

Seems like this bug is basically https://github.com/adobe/react-spectrum/issues/6183 except that instead of crashing, it concatenates AM and PM (so that it looks like AMPM).

I followed the same steps to reproduce the crash above on main, and when it would crash here, it would concatenate AMPM.

Jul 15 '24 18:07 yihuiliao