Pickers modal display plugin

[gselderslaghs]

Proposed changes

Implements a modal display plugin in timepicker and datepicker components

Timepicker example:

document.addEventListener('DOMContentLoaded', function() {
    const timepickerEl = document.querySelector('.timepicker');
    const title = document.createElement('h4');
    title.innerText = 'Select time';

    M.Timepicker.init(timepickerEl, {
        autoSubmit: true,
        showClearBtn: false,
        displayPlugin: 'modal',
        displayPluginOptions: { title }
    });
});

Datepicker example:

document.addEventListener('DOMContentLoaded', function() {
    const datepickerEl = document.querySelector('.datepicker');
    const title = document.createElement('h4');
    title.innerText = 'Select date';

    M.Datepicker.init(datepickerEl, {
        autoSubmit: true,
        showClearBtn: true,
        displayPlugin: 'modal',
        displayPluginOptions: { title }
    });
});

Screenshots (if appropriate) or codepen:

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My commit messages follows the conventional commit format
• My change requires a change to the documentation, and updated it accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[gselderslaghs]

The codebase has been rebased according to recent changes in v2-dev and I've added additional refinements required for this feature, this is ready for a coding review

[wuda-io]

Looks nice! Why not use the existing Modal Component and implement the create methods there. It is ok for now i guess.

Can you provide a storybooks kind of documentation for the date- and timepicker too? With all variants would be awesome.
Check out the other examples too. They are in the dev-branch already. (Buttons, Checkbox, Radiobuttons, navbar)
It is very nice for testing and development. I think we should transfer all components in near future to this approach. Thanks.

[gselderslaghs]

Looks nice! Why not use the existing Modal Component and implement the create methods there. It is ok for now i guess.

This was initially the idea, as the new Modal implementation was in parallel with the Pickers changes I decided to not take the risk implementing it in a manner that could possibly gets overridden or would require additional changes afterwards

Let's make the transition to use the Modal Component in a separate pr, since the Modal component slightly might be refactored as wel to accompli with requirements in Pickers components

Can you provide a storybooks kind of documentation for the date- and timepicker too? With all variants would be awesome. Check out the other examples too. They are in the dev-branch already. (Buttons, Checkbox, Radiobuttons, navbar) It is very nice for testing and development. I think we should transfer all components in near future to this approach. Thanks.

Definitely, I like the idea, perhaps it has already gone out of scope for this feature, it would be a better approach creating an overarching issue listing all components that are currently lacking storybooks

Let me know if any additional changes would be required to make this pr work into v2-dev

[wuda-io]

why is this file needed? I think we should use the already existing popover! Modal was removed in the last version.

[gselderslaghs]

Regarding #558

Excerpt from Material M3 specs

Three types: docked, modal, modal input

This is the reason why this was implemented in this way, I can confirm it could take additional refinements based on your remarks, would be great if we can split this reviewing up into several stages

[wuda-io]

also this is not needed. We should use popover attribute. And in near future we can use anchor-positioning.

[gselderslaghs]

This was already approved in #140 , can you clarify why this was approved and then dismissed afterwards?

The merge-base changed after approval.

The merge-base changed after approval.

The merge-base changed after approval.

[wuda-io]

also i can not approve it, i think someone else has to confirm too. Would be nice if you could take a look @bugy or @mauromascarenhas . Thanks