chore: calendar new today indicator by snowystinger · Pull Request #9591 · adobe/react-spectrum

snowystinger · 2026-02-03T22:22:26Z

Closes

Discussion with design, prototype for review.
Update: Design signed off

Note, was trying to do the container query like we do in the vanilla starter to make the calendar even more responsive. But I haven't solved it yet. See https://github.com/adobe/react-spectrum/compare/responsive-calendar?expand=1

✅ 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 · 2026-02-03T22:37:01Z

Build successful! 🎉

rspbot · 2026-02-16T23:59:41Z

Build successful! 🎉

rspbot · 2026-02-17T01:41:04Z

Build successful! 🎉

snowystinger · 2026-02-17T01:53:45Z

Chromatic green https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1121

rspbot · 2026-02-17T01:54:13Z

Build successful! 🎉

rspbot · 2026-02-17T02:02:13Z

Build successful! 🎉

LFDanLu

the styles looks good to me, but I haven't been able to find the figma files that document this change (especially the dotted -> solid line change for the selection outline).

rspbot · 2026-03-02T20:03:16Z

Build successful! 🎉

rspbot · 2026-03-02T23:16:10Z

Build successful! 🎉

rspbot · 2026-03-17T05:57:22Z

Build successful! 🎉

rspbot · 2026-03-17T05:57:22Z

## 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
+  errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   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
   shouldFlip?: 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
 }

/@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
+  errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   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
   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
   shouldFlip?: 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
+  errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   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
   shouldFlip?: 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
 }

/@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
+  errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   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
   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
   shouldFlip?: 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
 }

snowystinger added 2 commits February 4, 2026 09:21

chore: calendar new today indicator

12a5a28

fix lint

ca3775f

snowystinger marked this pull request as ready for review February 3, 2026 22:56

snowystinger changed the title ~~chore: calendar new today indicator~~ chore: calendar new today indicato Feb 16, 2026

snowystinger changed the title ~~chore: calendar new today indicato~~ chore: calendar new today indicator Feb 16, 2026

simplify css and put selection hover between background and border

c0062b2

github-actions bot added the S2 label Feb 16, 2026

fix unavailable dates

9e8bf07

snowystinger and others added 2 commits February 17, 2026 12:45

fix to match expectations in chromatic

df034d5

Merge branch 'main' into new-calendar-today-indicator

3716ee5

snowystinger added the ready for review label Feb 17, 2026

LFDanLu reviewed Feb 20, 2026

View reviewed changes

Merge branch 'main' into new-calendar-today-indicator

e09f321

snowystinger removed the ready for review label Mar 2, 2026

adjust padding

bd35017

devongovett force-pushed the main branch from 8df1873 to a6e720d Compare March 4, 2026 00:20

snowystinger and others added 2 commits March 17, 2026 00:17

Merge branch 'main' into new-calendar-today-indicator

f2a89cf

update remaining tokens and setup error message

3397670

snowystinger added the ready for review label Mar 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: calendar new today indicator#9591

chore: calendar new today indicator#9591
snowystinger wants to merge 10 commits intomainfrom
new-calendar-today-indicator

snowystinger commented Feb 3, 2026 •

edited

Loading

Uh oh!

rspbot commented Feb 3, 2026

Uh oh!

rspbot commented Feb 16, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

snowystinger commented Feb 17, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

LFDanLu left a comment

Uh oh!

rspbot commented Mar 2, 2026

Uh oh!

rspbot commented Mar 2, 2026

Uh oh!

rspbot commented Mar 17, 2026

Uh oh!

rspbot commented Mar 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

snowystinger commented Feb 3, 2026 • 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 Feb 3, 2026

Uh oh!

rspbot commented Feb 16, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

snowystinger commented Feb 17, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

rspbot commented Feb 17, 2026

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

rspbot commented Mar 2, 2026

Uh oh!

rspbot commented Mar 2, 2026

Uh oh!

rspbot commented Mar 17, 2026

Uh oh!

rspbot commented Mar 17, 2026

@react-spectrum/s2

/@react-spectrum/s2:DatePicker

/@react-spectrum/s2:DateRangePicker

/@react-spectrum/s2:DatePickerProps

/@react-spectrum/s2:DateRangePickerProps

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

snowystinger commented Feb 3, 2026 •

edited

Loading