Calendar and DatePicker audits and chromatic stories #3046

devongovett · 2022-04-19T00:16:06Z

Fixes #2751. Fixes #1682.

Updates keyboard paging behavior as discussed in Streamline the touch screen reader experience for Calendar #3032 (cc. @majornista)
Adds SSR tests and fixes failures.
Adds support for FocusableRef interface on all components.
Adds support for passing through DOM props like data attributes
Adds support for controlled isOpen props and shouldFlip to DatePicker
Adds chromatic stories for all components and fixes some styling issues found
API audit
Adds missing docs

devongovett · 2022-04-19T00:18:02Z

packages/@react-aria/datepicker/src/index.ts

+export type {AriaDateFieldProps, DateFieldAria} from './useDateField';
+export type {DatePickerAria} from './useDatePicker';
+export type {DateRangePickerAria} from './useDateRangePicker';
+export type {DateSegmentAria} from './useDateSegment';


New pattern? We aren't currently very consistent about what types we export from our packages. I was thinking we could try to export all input and output types from the hooks explicitly. Note that this also includes some re-exports from @react-types as it avoids users needing to install another package separately to use them.

devongovett · 2022-04-19T00:18:37Z

packages/@react-spectrum/calendar/chromatic/Calendar.chromatic.tsx

+  title: 'Calendar',
+  parameters: {
+    chromaticProvider: {
+      locales: ['en-US'/* , 'ar-EG', 'ja-JP' */]


Waiting on translations

devongovett · 2022-04-19T00:19:28Z

packages/@react-spectrum/overlays/src/OpenTransition.tsx

@@ -32,6 +32,11 @@ const OPEN_STATES = {
 */

 export function OpenTransition(props) {
+  // Do not apply any transition if in chromatic.
+  if (process.env.CHROMATIC) {


This is stripped by Parcel during the build so won't be published

adobe-bot · 2022-04-19T00:20:42Z

Build successful! 🎉

adobe-bot · 2022-04-19T16:19:37Z

Build successful! 🎉

majornista

Keyboard navigation seems to work as expected now. PageUp/PageDown always increments/decrements month, regardless of the visible range.

majornista · 2022-04-19T17:06:17Z

Separate issue: this is definitely an edge case, perhaps only of interest to peculiar folk who want to figure out on what day of the week Christmas in 127 BCE would fall, but I encounter the error “Too many re-renders. React limits the number of renders to prevent an infinite loop,” when navigating moving between some eras using the Calendar. It happens in the Gregorian calendar, but it’s easier to test with the Japanese calendar and it seems to happen with all calendar systems.

Open https://reactspectrum.blob.core.windows.net/reactspectrum/f056588fa1eb4fd124d5ec4aa0899ccee891[…]ex.html?path=/story/date-and-time-calendar--default and select the Japanese calendar from the second Picker.
Hold down Shift+PageUp (fn + Shift + ArrowUp on a Mac laptop keyboard) to decrement by year until you reach April 2 Meiji.
Press Shift+PageUp (fn + Shift + ArrowUp on a Mac laptop keyboard) to decrement to the last year of this first era of the modern Japanese calendar and React throws an error.

.chromatic/custom-addons/chromatic/disableAnimations.css

packages/@react-stately/overlays/src/useOverlayTriggerState.ts

packages/@react-aria/utils/src/mergeRefs.ts

packages/@react-spectrum/datepicker/src/utils.ts

packages/@react-stately/calendar/src/useCalendarState.ts

devongovett · 2022-04-20T22:36:02Z

@majornista interesting find. The problem in that case is that the Japanese calendar implementation currently doesn't support dates before the Meiji era, which begins September 8, 1868 Gregorian. Therefore, April of that Gregorian year doesn't exist according to the implementation. Japanese eras get fuzzy before then, a lot of data is required to support them, and I didn't think it was terribly important for our current use cases to support.

For now, I've fixed the issue by constraining the date within supported eras. If you go back to September 1 Meiji, you'll see the month appears to start on day 8 and navigating to previous dates does nothing.

I didn't see the issue with the Gregorian calendar. How did you reproduce?

LFDanLu

Tested locally, confirmed the new PageUp/Down/Home/End keyboard functionality + the Japanese date constraints. Still going through the chromatic stories but approving for now

adobe-bot · 2022-04-20T23:54:26Z

Build successful! 🎉

…cleanup # Conflicts: # packages/@react-aria/calendar/src/types.ts # packages/@react-aria/calendar/src/useCalendarBase.ts # packages/@react-aria/calendar/src/useCalendarGrid.ts # packages/@react-aria/calendar/src/useRangeCalendar.ts # packages/@react-spectrum/calendar/src/CalendarBase.tsx # packages/@react-spectrum/calendar/src/CalendarMonth.tsx # packages/@react-spectrum/calendar/test/CalendarBase.test.js

adobe-bot · 2022-04-21T16:39:25Z

Build successful! 🎉

snowystinger

looks fine after merge :) gave it a quick run in chrome

majornista · 2022-04-22T18:25:47Z

@majornista interesting find. The problem in that case is that the Japanese calendar implementation currently doesn't support dates before the Meiji era, which begins September 8, 1868 Gregorian. Therefore, April of that Gregorian year doesn't exist according to the implementation. Japanese eras get fuzzy before then, a lot of data is required to support them, and I didn't think it was terribly important for our current use cases to support.

For now, I've fixed the issue by constraining the date within supported eras. If you go back to September 1 Meiji, you'll see the month appears to start on day 8 and navigating to previous dates does nothing.

I didn't see the issue with the Gregorian calendar. How did you reproduce?

Open https://codesandbox.io/s/fervent-mirzakhani-qkyzpi?file=/src/App.js
Move keyboard focus to the selected date for the defaultValue in the calendar, January 1, 1 AD.
Press ArrowUp to try navigating to the previous week or PageUp for the previous month.
The error will be thrown.

devongovett added 14 commits April 14, 2022 13:08

Update keyboard paging behavior

97d15fa

Add SSR tests

c74e3db

Remove unnecessary dependencies

2d1d1ba

Add support for refs and dom props

b1e5c29

Test for provider props support

fea256b

Use explicit re-exports

d0d52c8

Add help text props to TS for TimeField

89872a0

Support overlay trigger options in DatePicker

af790e9

Mark selection outside min/max date as invalid

358357b

Random style fixes

1d52e10

Add chromatic stories

8746c5a

Fix TS issue with number formatter

1bf2b93

Fixes #2751

Audit exports

27fbef4

Add missing docs for @internationalized/date

f056588

devongovett commented Apr 19, 2022

View reviewed changes

Internationalized docs audit

a266960

majornista self-requested a review April 19, 2022 16:58

majornista previously approved these changes Apr 19, 2022

View reviewed changes

snowystinger reviewed Apr 20, 2022

View reviewed changes

Constrain Japanese dates within supported eras

5cd82d8

devongovett dismissed majornista’s stale review via 5cd82d8 April 20, 2022 22:35

Also constrain when converting between calendars

b764ffb

LFDanLu previously approved these changes Apr 20, 2022

View reviewed changes

Merge branch 'main' into calendar-cleanup

9b99c24

snowystinger previously approved these changes Apr 21, 2022

View reviewed changes

devongovett dismissed stale reviews from snowystinger and LFDanLu via 2b7bef1 April 21, 2022 16:32

snowystinger approved these changes Apr 21, 2022

View reviewed changes

devongovett merged commit 3419dee into main Apr 21, 2022

devongovett deleted the calendar-cleanup branch April 21, 2022 16:53

LFDanLu added the needs testing label Apr 22, 2022

This was referenced Apr 22, 2022

Fix issues converting and comparing Gregorian dates in BC #3060

Merged

Upgrade to "June 15, 2021 Release" leads to build errors because of Intl.DateTimeFormatOptions#fractionalSecondDigits #2096

Closed

dannify added release and removed needs testing labels Apr 28, 2022

dannify removed the release label Oct 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Calendar and DatePicker audits and chromatic stories #3046

Calendar and DatePicker audits and chromatic stories #3046

devongovett commented Apr 19, 2022 •

edited

Loading

devongovett Apr 19, 2022

devongovett Apr 19, 2022

devongovett Apr 19, 2022

adobe-bot commented Apr 19, 2022

adobe-bot commented Apr 19, 2022

majornista left a comment

majornista commented Apr 19, 2022 •

edited

Loading

devongovett commented Apr 20, 2022

LFDanLu left a comment

adobe-bot commented Apr 20, 2022

adobe-bot commented Apr 21, 2022

snowystinger left a comment

majornista commented Apr 22, 2022

Calendar and DatePicker audits and chromatic stories #3046

Calendar and DatePicker audits and chromatic stories #3046

Conversation

devongovett commented Apr 19, 2022 • edited Loading

devongovett Apr 19, 2022

Choose a reason for hiding this comment

devongovett Apr 19, 2022

Choose a reason for hiding this comment

devongovett Apr 19, 2022

Choose a reason for hiding this comment

adobe-bot commented Apr 19, 2022

adobe-bot commented Apr 19, 2022

majornista left a comment

Choose a reason for hiding this comment

majornista commented Apr 19, 2022 • edited Loading

devongovett commented Apr 20, 2022

LFDanLu left a comment

Choose a reason for hiding this comment

adobe-bot commented Apr 20, 2022

adobe-bot commented Apr 21, 2022

snowystinger left a comment

Choose a reason for hiding this comment

majornista commented Apr 22, 2022

devongovett commented Apr 19, 2022 •

edited

Loading

majornista commented Apr 19, 2022 •

edited

Loading