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! 🎉 🚀
• [email protected] - First major release to include AppDatePicker, AppDatePickerDialog and the new AppDatePickerInput
• [email protected] - (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.

[brownieboy]

There's a number of helper functions that appear to have been dropped, e.g. hasClass and findShadowTarget.

Are there alternative methods for what these used to do?

[motss]

There's a number of helper functions that appear to have been dropped, e.g. hasClass and findShadowTarget.

In v6, most of the helpers are not needed due to low usage if not no usage at all after some rewrite.

Are there alternative methods for what these used to do?

I'm assuming you're using some of the helpers in the module. IMHO this is quite risky as they are not meant for public. I'd recommend to either create your own helper functions instead of depending on those 'private' helpers in this module or just copy those to be your own helpers.

[brownieboy]

I'd recommend to either create your own helper functions instead of depending on those 'private' helpers in this module or just copy those to be your own helpers

Thanks for your reply, @motss

Yes, I'd already started copying the functions into our own repo. I just wanted to check there wasn't some new methods that I was missing.

[KTibow]

How is it possible for v5 to be deprecated if v6 is still an RC? All tools (eg npm-check-updates, npmjs.com) still show v5 as the latest version.

[motss]

@KTibow That’s a valid question. You may be curious about the reason. It was because v6 had to wait for the stable release of the MD web and Lit 3. Now that MD3 and Lit 3 are out with major changes, the plan is to add them to the stable v6.