Adds Calendar Component to Web Components v3

[Mich0608]

trafficstars

Changes

This is a draft PR for the current state of the calendar component.

Appearance - 08/21/2023

The calendar has a primary panel and an optional secondary panel. The primary panel contains the day grid, and the secondary panel contains the month and year picker grids. The calendar also has an optional "Go to today" link. The calendar currently does not support having the secondary panel overlaid on top of the primary panel.

Update 8/21/2023: The calendar is now styled according to the Calendar Figma Design Spec (Incomplete) and Date Picker Figma Design Spec (Incomplete). Scroll animations have been added to both the day grid and the secondary panel grid following animations on the React v8 Calendar and the React v9 Date Picker.

Appearance - 7/29/2023

Functionalities

The calendar currently supports the following interactions:

• click on a date on the left panel to select the date (inspect to view the selected date in console)
• click on a month on the month picker to select a month
• click on a year on the year picker to select a year
• navigate between months on the left panel by using the up and down arrow icons
• navigate between months on the left panel by clicking on dates that belong to previous/next months
• navigate between years on the month picker by using the up and down arrow icons
• navigate between decades on the year picker by using the up and down arrow icons
• toggle the year picker by clicking on the secondary panel title
• click on "Go to today" to return to today
• toggle the visibility of the "Go to today" link via storybook controls
• toggle whether the current month pr year is highlighted on the secondary panel via storybook controls
• toggle whether the selected month pr year is highlighted on the secondary panel via storybook controls

The calendar has yet to support:

• have the month picker overlaid on top of the left panel
• set the calendar type manually, including range-picker
• show week numbers on the left panel
• filter view by days or work week
• set first day of week based on locale
• set first week of year
• range selection (part of the range-picker type)
• accessibility and keyboard navigation
• styling in full alignment with Fluent 2

Keyboard Navigation

All keyboard interactions are based on the Fluent Date Picker Design Spec and the WCAG pattern guidelines' Date Picker example. I also referenced the React v8 Calendar and the React v9 Date Picker when uncertain, and clarified questions with James.

• Arrows: Moves focus when navigating the day grid or the secondary panel grid
• Enter: Select the focused cell on either panels
• Home: Moves focus to the first day (e.g. Sunday) of the current week on the day grid; Moves focus to the first cell on the secondary panel grid
• End: Moves focus to the last day (e.g. Satuday) of the current week on the day grid; Moves focus to the last cell on the secondary panel grid
• Page Up: Changes the day grid to the previous month
• Page Down: Changes the day grid to the next month

I'm Looking for Feedback On...

Current - 08/21/2023

• How animation classes are added to the rows on both the day grid and the secondary panel grid in calendar.ts. Note that in handleSwitchMonth, I check for a series of conditions to determine which transition needs to be applied. Transition logic is also present in the new handleSwitchSecondaryPanel method. Is there a way to organize/centralize this logic a bit more?
• I don't have a great deal of experience in CSS, so any feedback for calendar.styles.ts is welcome.
• General code clarity, style, and readability!

08/07/2023

• The placement of keydown handlers on the template. Currently, I have a total of six keydown handlers:
  • handleKeydown extends from the base FAST Calendar and handles keydown events on the day grid cells.
  • handleSecondaryPanelKeydown handles keydown events on the secondary panel grid cells.
  • handleControlKeydown handles keydown events on the entire control (used for the page up and page down interactions).
  • handleNavIconKeydown handles keydown events on the navigation icons on either panels.
  • handleSecondaryPanelTitleKeydown handles keydown events on the secondary panel title (toggles year picker).
  • handleLinkKeydown handles keydown events on the "Go to today" link on the footer.
• General code clarity, style, and readability!

07/29/2023

• The way that the right panel template is handled - Due to the similarity between the month picker and year picker templates, I decided to make a general template for the right panel and just feed it different data depending on whether the year picker is open. However, this might come at a cost of readability/clarity in my code, as in a few spots I need to check whether the year picker is open, as well as keep variable names relatively vague (for example, both month picker and year picker data are stored in the form of a 2D array that have a "text" field and a "detail" field) (2D array is for rendering with FAST Data Grid).
• To keep things organized, I defined two types - MonthPickerInfo and YearPickerInfo to keep track of current, previous, and next states in the right panel. I also have two attributes monthPickerYear and yearPickerDecade that keep track of the current display data on the right panel. I'm basing this approach pretty heavily on the FAST calendar implementation, but I'm open to feedback since I think this approach makes my code a bit complicated. In particular, there are multiple places where you can potentially access the same information. They should communicate/sync automatically but having another pair of eyes on it would be helpful!
• General code clarity, style, and readability!

References

• My code is heavily based on the FAST calendar implementation.
• Calendar Figma Design Spec (Incomplete)
• Date Picker Figma Design Spec (Incomplete)
• React v8 Calendar
• React v9 Date Picker

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 39453a9c0641991b6f0377f3e8ca79a888aacb65}

[fabricteam]

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 39453a9c0641991b6f0377f3e8ca79a888aacb65 (build)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ff7e127c8999ff96429643c22cd8532e0e15ea47:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[jpaims]

Design review

#	Issue	Category
1	Focus border styling: colorStrokeFocus1 (inner 1px stroke), colorStrokeFocus2 (outer 2px stroke)	Appearance
2	Today's date number should be Body 1 Strong	Appearance
3	Hitting Enter on month switcher arrows should maintain focus on the arrow	Accessibility
4	There should only be one tab stop in the day picking section	Accessibility
5	'Go to today' should stay in the same location even if the month requires increased height. Currently shifts in height between e.g. Apr and Aug 2023	Appearance

[layershifter]

Closing for housekeeping 🏡 Feel free to re-open 👍