chore: s2 date followup #8537

snowystinger · 2025-07-14T02:42:14Z

Contains review follow up and bugs found in testing

Outstanding comments from #8428 (comment)

Open questions:

useful to add isToday to renderProps for cells
useful to add weekIndex/dayIndex to renderProps for cells, see aa7701d#diff-08206439985c4bfe014f71e8aa5df9fbe4cbcf4c478f4923e9f551cb2b4b2af7R473 and thread

Bugs from testing:

ColorPicker needs padding on popover
Collapsed label needs translations
If you put an invalid date (e.g. start date is after the end date) and try to open the calendar, you get an intl message error, see screenshot
hide timezone doesn't do anything? no timezone?
looks like I forgot to Omit the props for timefield that we omitted for all the other components
If you have multiple months, a range that traverses multiple months won't include all the dates, see the screenshot 8, note how the bottom dates in the months aren't selected
listbox dnd images are massive

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-07-14T02:59:47Z

Build successful! 🎉

rspbot · 2025-07-14T22:24:54Z

Build successful! 🎉

rspbot · 2025-07-14T22:51:00Z

Build successful! 🎉

rspbot · 2025-07-14T22:59:11Z

Build successful! 🎉

rspbot · 2025-07-14T23:08:45Z

Build successful! 🎉

rspbot · 2025-07-15T01:47:11Z

Build successful! 🎉

# Conflicts: # packages/react-aria-components/stories/ColorArea.stories.tsx # packages/react-aria-components/stories/ColorSlider.stories.tsx # packages/react-aria-components/stories/ColorSwatch.stories.tsx # packages/react-aria-components/stories/Popover.stories.tsx # packages/react-aria-components/stories/Table.stories.tsx # packages/react-aria-components/stories/Tooltip.stories.tsx

rspbot · 2025-07-15T02:15:42Z

Build successful! 🎉

rspbot · 2025-07-15T02:17:36Z

Build successful! 🎉

starters/docs/src/Popover.tsx

rspbot · 2025-07-15T23:34:26Z

Build successful! 🎉

rspbot · 2025-07-15T23:34:27Z

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:DatePicker

 DatePicker <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
+  maxVisibleMonths?: number = 1
   minValue?: DateValue | null
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
-  visibleMonths?: number = 1
 }

/@react-spectrum/s2:DateRangePicker

 DateRangePicker <T extends DateValue> extends RangeCalendarProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
+  maxVisibleMonths?: number = 1
   minValue?: DateValue | null
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   startName?: string
   styles?: StylesProp
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

/@react-spectrum/s2:DatePickerProps

 DatePickerProps <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
+  maxVisibleMonths?: number = 1
   minValue?: DateValue | null
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
-  visibleMonths?: number = 1
 }

/@react-spectrum/s2:DateRangePickerProps

 DateRangePickerProps <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
+  maxVisibleMonths?: number = 1
   minValue?: DateValue | null
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   startName?: string
   styles?: StylesProp
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

devongovett

Let's merge so we can get a build of the starter.

snowystinger added 2 commits July 14, 2025 10:07

chore: s2 date followup

a919d1e

fix extra padding

3032348

snowystinger added the release label Jul 14, 2025

reidbarber previously approved these changes Jul 14, 2025

View reviewed changes

snowystinger mentioned this pull request Jul 14, 2025

feat: S2 DateField/DatePicker/Calendar #8428

Merged

5 tasks

omit extraneous props

78456bc

snowystinger dismissed reidbarber’s stale review via 78456bc July 14, 2025 22:15

snowystinger added 3 commits July 15, 2025 08:38

Add timezone stories

32a51d8

fix lint

7e5e344

add action group translations

36c4b4a

fix popover padding and range calendar translation

05e3f0a

import global css into all stories

83eb298

snowystinger added 2 commits July 15, 2025 12:05

fix logic for highlighting ranges

646a7f8

devongovett reviewed Jul 15, 2025

View reviewed changes

starters/docs/src/Popover.tsx Outdated Show resolved Hide resolved

fix calendar alignment and missing props, docs starter popover padding

7e000cc

devongovett approved these changes Jul 16, 2025

View reviewed changes

snowystinger enabled auto-merge July 16, 2025 10:52

reidbarber approved these changes Jul 16, 2025

View reviewed changes

snowystinger added this pull request to the merge queue Jul 16, 2025

Merged via the queue into main with commit 514384f Jul 16, 2025
31 checks passed

snowystinger deleted the s2-date-followup branch July 16, 2025 15:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: s2 date followup #8537

chore: s2 date followup #8537

Uh oh!

snowystinger commented Jul 14, 2025 •

edited

Loading

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

devongovett left a comment

Uh oh!

Uh oh!

Uh oh!

chore: s2 date followup #8537

chore: s2 date followup #8537

Uh oh!

Conversation

snowystinger commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 14, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

Uh oh!

rspbot commented Jul 15, 2025

Uh oh!

rspbot commented Jul 15, 2025

@react-spectrum/s2

/@react-spectrum/s2:DatePicker

/@react-spectrum/s2:DateRangePicker

/@react-spectrum/s2:DatePickerProps

/@react-spectrum/s2:DateRangePickerProps

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

snowystinger commented Jul 14, 2025 •

edited

Loading