Implement Lumo & Material themes

[tomivirkki]

Implement Lumo & Material themes

[Haprog]

We can leave the width of date picker and time picker as is by default for now, but to make it possible to make more horizontally compact field we should introduce some predefined theme variants to control the width of time picker (and maybe also date picker?).

But imo these new theme variants should be implemented within vaadin-time-picker (and optionally vaadin-date-picker) so that they can also be used in those components, and they would automatically be available to use also via setting a theme attribute for vaadin-date-time-picker.

To allow controlling the width of date picker and time picker separately we could e.g. make sure to prefix or suffix those theme variant names with date/time so we can pass them as is in date-time-picker.

Some ideas for theme variant names for time picker:

• time-width-hours ("00:00")
• time-width-hours-12h ("00:00 AM")
• time-width-seconds ("00:00:00")
• time-width-seconds-12h ("00:00:00 AM")
• time-width-milliseconds ("00:00:00.000")

Date picker could have similar variants for some most common date formats

[Haprog]

Related discussion about the width of the component(s) (mainly time picker): https://vaadin.slack.com/archives/C3TGRP4HY/p1571296778094300

[jouni]

Yes, I agree that these variants should be in the contained components, not just date-time-picker.

time-width-hours should IMO be time-width-mins instead, as it is showing minutes as well.

What happens when an explicit width is set on the date-time-picker? How do the fields shrink/grow?

[Haprog]

time-width-hours should IMO be time-width-mins instead, as it is showing minutes as well.

That's what I meant to write but somehow wrote hours instead. :)