v6: Lit 3 and Material Design 3

[motss]

What to expect

• AppDatePicker - 🎉 Redesigned date picker element with Material Design 2
• AppDatePickerDialog - 🎉 Redesigned date picker dialog element with Material Design 2
• AppDatePickerInput - 🆕 New date picker input element with Material Design 2

Highlights

• All elements are implemented with great keyboard and mouse support for interaction in desktops. Read the Caveats section below to find out why only desktops are supported.
• All elements are inspired by material-web to provide great extensibility that allows users to not only able to extend the base elements but also can override the original implementation. All thanks to JavaScript Classes and lit. 🚀
• All elements are fully compatible and interoperable with the elements in material-web so that users can make full use of Material Design 2 consistently in their projects.
• The infrastructure of the project also receives major overhaul to use the latest and the greatest toolings available that are more web compatible. As such, it is able to ship with 100% code coverage for all the written code to ensure superior code safety and consistent behavior on all evergreen browsers.
• All published codes are compatible with modern toolings so that users can choose to down compile the code when needed with their favorite project configuration and compilation tools such as Rollup, Webpack, Parcel, Skypack, or Vite, just to name a few.

Caveats

• The major overhaul only supports desktops. This decision is made to embrace the web platform in the year 2021 as input[type=date] has had great support in all mobile OSes for years and they leverage its own native date picker UI.

Planned

• AppRangeDatePicker - 🆕New range date picker first introduced in the Material Design 2. Again this will only support desktops.
• AppRangeDatePickerDialog - 🆕New range date picker dialog with Material Design 2
• AppRangeDatePickerInput - 🆕New range date picker input with Material Design 2

Roadmap

• app-datepicker RC becomes the default branch on March 27, 2022! 🎉 🚀
• app-datepicker@6.0.0 - First major release to include AppDatePicker, AppDatePickerDialog and the new AppDatePickerInput
• app-datepicker@6.1.0 - (TBD) Another minor release to include AppRangeDatePicker, AppRangeDatePickerInput, and AppRangeDatePickerInput.
• @material/web - v1 has been released alongside a new website designed and built with Material Design 3. Lit 3 also only available in components from @material/web. Major refactoring work needs to be done for a stable v6 release with Lit 3 and MD3 upgrades (Plans to upgrade to Lit 3 and Material Web 1 (M3)? #221). Stay tuned...

References

• https://api.flutter.dev/flutter/material/showDatePicker.html
• https://material.io/components/pickers#desktop-pickers
• https://docs.google.com/document/d/1AGKjBvO7EL2PuJGcwaa2PoCusjtTAvpYO7i_3A2vVpc/edit#heading=h.pub7jnop54q0
• https://medium.com/flutter/announcing-flutter-1-17-4182d8af7f8e

[userquin]

hi @motss, great work, I haven't use it since version 1:

Another change you will need to apply to app-datepicker is to prevent page scrolling on keyup events (only on calendar view): for example, go to your Configurable demo powered by Firebase and increase the screen font size until vertical scroll appears (Crtl ++), then focus a date on the calendar (not in dialog) and just press Arrow Up and Arrow Down moving between months => the page will scroll vertically.

This is because your handler is passive, so you cannot prevent it's propagation (I also tested to focus the target cell with preventScroll: false without success), so I suggest you to change it to not using passive event handler, use keydown instead keyup and prevent it's propagation.

If the dialog is shown on a popop instead on a dialog, it is very fustrating using the keyboard, the page will scroll up and down => just see the new Web Core Vitals concepts from Google (you can see that on chrome devtools on perfomance tab it will appear a new entry called Experience (between Frames and Main), you will see there:

Warning: Cumulative Layout Shifts can result in poor user experiences.

[userquin]

I also forget you need to add to all buttons the attribute type="button", this will prevent fire submit if shown inside a form (year, current date and month buttons).

[motss]

I also forget you need to add to all buttons the attribute type="button", this will prevent fire submit if shown inside a form (year, current date and month buttons).

Please raise an issue ticket for this.

[motss]

hi @motss, great work, I haven't use it since version 1:

Another change you will need to apply to app-datepicker is to prevent page scrolling on keyup events (only on calendar view): for example, go to your Configurable demo powered by Firebase and increase the screen font size until vertical scroll appears (Crtl ++), then focus a date on the calendar (not in dialog) and just press Arrow Up and Arrow Down moving between months => the page will scroll vertically.

This is because your handler is passive, so you cannot prevent it's propagation (I also tested to focus the target cell with preventScroll: false without success), so I suggest you to change it to not using passive event handler, use keydown instead keyup and prevent it's propagation.

If the dialog is shown on a popop instead on a dialog, it is very fustrating using the keyboard, the page will scroll up and down => just see the new Web Core Vitals concepts from Google (you can see that on chrome devtools on perfomance tab it will appear a new entry called Experience (between Frames and Main), you will see there:

Warning: Cumulative Layout Shifts can result in poor user experiences.

Please raise an issue ticket for this.