[grid-pro] vaadin-date-picker + vaadin-grid-pro = ❤️

[anezthes]

I wanted to use vaadin-date-picker with vaadin-grid-pro, but of course, it didn't look correct at first.

So I decided to take a look at how you guys implemented vaadin-grid-pro-edit-text-field.

Here's what I ended up with:

<dom-module id="vaadin-grid-pro-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="vaadin-grid-pro-date-picker"]) {
        --lumo-text-field-size: 27px;
        bottom: 0;
        box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
        font-size: inherit;
        left: 0;
        padding: 0;
        position: absolute;
        right: 0;
        top: 0;
        will-change: transform;
      }

      :host([theme~="vaadin-grid-pro-date-picker"]) [part="input-field"] {
        border-radius: 0;
        flex-grow: 1;
        font-weight: 400;
        padding-left: 0;
      }

      :host([theme~="vaadin-grid-pro-date-picker"]) [part="value"] {
        font-size: inherit;
        padding: 0 var(--lumo-space-m);
      }
    </style>
  </template>
</dom-module>

<vaadin-grid-pro-edit-column path="date">
  <template class="editor">
    <vaadin-date-picker theme="vaadin-grid-pro-date-picker"></vaadin-date-picker>
  </template>
</vaadin-grid-pro-edit-column>

Feel free to include this somehow so we don't have to write it again. :slightly_smiling_face:

[anezthes]

Same thing for the Material theme. The margin: -6px 0 0; feels quite random. I thought it looked better without it, but I wanted to keep it consistent with how you're currently theming inputs.

<dom-module id="vaadin-grid-pro-date-picker" theme-for="vaadin-date-picker">
  <template>
    <style>
      :host([theme~="vaadin-grid-pro-date-picker"]) {
        margin: -6px 0 0;
        position: relative;
        top: 6px;
        width: 100%;
      }
    </style>
  </template>
</dom-module>

<dom-module id="vaadin-grid-pro-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="vaadin-grid-pro-date-picker"]) {
        font-size: inherit;
        margin: 0;
        padding: 0;
      }
    </style>
  </template>
</dom-module>