search

motss / app-datepicker

Datepicker element built with Google's lit and Material Design 2021
https://npm.im/app-datepicker
MIT License
178 stars 51 forks source link

v6: Lit 3 and Material Design 3 #180

Open motss opened 4 years ago

motss commented 4 years ago

What to expect

Highlights

Caveats

Planned

Roadmap

References

userquin commented 3 years ago

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.

ezgif com-gif-maker

userquin commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

ezgif com-gif-maker

Please raise an issue ticket for this.

brownieboy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 11 months ago

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 commented 5 months ago

@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.