refactor!: update date-picker overlay content to use CSS grid (#9360)

Author: web-padawan

packages/date-picker/src/vaadin-date-picker-month-scroller.js

@@ -12,12 +12,8 @@ stylesTemplate.innerHTML = `
   <style>
     :host {
       --vaadin-infinite-scroller-item-height: 270px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
+      grid-area: months;
+      height: auto;
     }
   </style>
 `;

packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js

@@ -75,10 +75,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           value: '(min-width: 375px)',
         },
 
-        _translateX: {
-          observer: '_translateXChanged',
-        },
-
         _yearScrollerWidth: {
           value: 50,
         },
@@ -710,11 +706,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     _toggleYearScroller() {
-      if (this._isYearScrollerVisible()) {
-        this._closeYearScroller();
-      } else {
-        this._openYearScroller();
-      }
+      this.toggleAttribute('years-visible');
     }
 
     /** @private */
@@ -729,19 +721,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       this._translateX = this._yearScrollerWidth;
     }
 
-    /** @private */
-    _isYearScrollerVisible() {
-      return this._translateX < this._yearScrollerWidth / 2;
-    }
-
-    /** @private */
-    _translateXChanged(x) {
-      if (!this._desktopMode) {
-        this._monthScroller.style.transform = `translateX(${x - this._yearScrollerWidth}px)`;
-        this._yearScroller.style.transform = `translateX(${x}px)`;
-      }
-    }
-
     /** @private */
     _yearAfterXMonths(months) {
       return dateAfterXMonths(months).getFullYear();

packages/date-picker/src/vaadin-date-picker-overlay-content-styles.js

@@ -7,22 +7,37 @@ import { css } from 'lit';
 
 export const overlayContentStyles = css`
   :host {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-areas:
+      'header header'
+      'months years'
+      'toolbar years';
+    grid-template-columns: minmax(0, 1fr) 0;
     height: 100%;
-    width: 100%;
     outline: none;
   }
 
+  :host([desktop]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :host([fullscreen][years-visible]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :host([fullscreen]) :is([part='toggle-button'], [part='clear-button'], [part='label']) {
+    display: none;
+  }
+
   [part='overlay-header'] {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: nowrap;
+    display: none;
+    grid-area: header;
     align-items: center;
+    justify-content: center;
   }
 
-  :host(:not([fullscreen])) [part='overlay-header'] {
-    display: none;
+  :host([fullscreen]) [part='overlay-header'] {
+    display: flex;
   }
 
   [part='label'] {
@@ -38,20 +53,16 @@ export const overlayContentStyles = css`
   }
 
   #scrollers {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
+    display: contents;
   }
 
-  :host([desktop]) ::slotted([slot='months']) {
-    right: 50px;
-    transform: none !important;
+  ::slotted([slot='years']) {
+    visibility: hidden;
   }
 
-  :host([desktop]) ::slotted([slot='years']) {
-    transform: none !important;
+  :host([desktop]) ::slotted([slot='years']),
+  :host([years-visible]) ::slotted([slot='years']) {
+    visibility: visible;
   }
 
   :host(.animate) ::slotted([slot='months']),
@@ -61,8 +72,13 @@ export const overlayContentStyles = css`
 
   [part='toolbar'] {
     display: flex;
+    grid-area: toolbar;
     justify-content: space-between;
     z-index: 2;
     flex-shrink: 0;
   }
+
+  :host([fullscreen]) [part='toolbar'] {
+    grid-area: header;
+  }
 `;

packages/date-picker/src/vaadin-date-picker-year-scroller.js

@@ -13,10 +13,9 @@ stylesTemplate.innerHTML = `
       --vaadin-infinite-scroller-item-height: 80px;
       width: 50px;
       display: block;
-      height: 100%;
-      position: absolute;
-      right: 0;
-      transform: translateX(100%);
+      position: relative;
+      grid-area: years;
+      height: auto;
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
       user-select: none;

packages/date-picker/src/vaadin-infinite-scroller.js

@@ -21,9 +21,9 @@ template.innerHTML = `
       height: 100%;
       overflow: auto;
       outline: none;
-      margin-right: -40px;
       -webkit-overflow-scrolling: touch;
       overflow-x: hidden;
+      scrollbar-width: none;
     }
 
     #scroller.notouchscroll {
@@ -38,7 +38,6 @@ template.innerHTML = `
       position: absolute;
       width: var(--vaadin-infinite-scroller-buffer-width, 100%);
       box-sizing: border-box;
-      padding-right: 40px;
       top: var(--vaadin-infinite-scroller-buffer-offset, 0);
     }
   </style>

packages/date-picker/test/overlay-content.test.js

@@ -24,7 +24,7 @@ describe('overlay', () => {
     beforeEach(async () => {
       overlay = fixtureSync(`
         <vaadin-date-picker-overlay-content
-          style="position: absolute; top: 0"
+          style="position: absolute; top: 0; min-width: 300px"
           scroll-duration="0"
         ></vaadin-date-picker-overlay-content>
       `);

packages/date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-dropdown.png

@@ -20,6 +20,10 @@ registerStyles(
       cursor: default;
     }
 
+    :host([dir='rtl']) {
+      background-position: top left;
+    }
+
     ::slotted([slot='months']) {
       /* Month calendar height:
               header height + margin-bottom
@@ -39,36 +43,25 @@ registerStyles(
       -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       position: relative;
-      margin-right: 57px;
     }
 
     ::slotted([slot='years']) {
       /* TODO get rid of fixed magic number */
-      --vaadin-infinite-scroller-buffer-width: 97px;
+      --vaadin-infinite-scroller-buffer-width: 57px;
       width: 57px;
-      height: auto;
-      top: 0;
-      bottom: 0;
       font-size: var(--lumo-font-size-s);
       box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
       -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
       mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
       cursor: var(--lumo-clickable-cursor);
     }
 
-    ::slotted([slot='years']:hover) {
-      --_lumo-date-picker-year-opacity: 1;
-    }
-
-    /* TODO unsupported selector */
-    #scrollers {
-      position: static;
-      display: block;
+    :host([dir='rtl']) ::slotted([slot='years']) {
+      box-shadow: inset -2px 0 4px 0 var(--lumo-shade-5pct);
     }
 
-    /* TODO fix this in vaadin-date-picker that it adapts to the width of the year scroller */
-    :host([desktop]) ::slotted([slot='months']) {
-      right: auto;
+    ::slotted([slot='years']:hover) {
+      --_lumo-date-picker-year-opacity: 1;
     }
 
     /* Year scroller position indicator */
@@ -84,10 +77,14 @@ registerStyles(
       z-index: 1;
     }
 
+    :host([dir='rtl']) ::slotted([slot='years'])::before {
+      right: 0;
+      transform: translate(75%, -50%) rotate(45deg);
+    }
+
     [part='toolbar'] {
       padding: var(--lumo-space-s);
       border-bottom-left-radius: var(--lumo-border-radius-l);
-      margin-right: 57px;
     }
 
     [part='toolbar'] ::slotted(vaadin-button) {
@@ -97,26 +94,15 @@ registerStyles(
     /* Narrow viewport mode (fullscreen) */
 
     :host([fullscreen]) [part='toolbar'] {
-      order: -1;
       background-color: var(--lumo-base-color);
     }
 
     :host([fullscreen]) [part='overlay-header'] {
-      order: -2;
       height: var(--lumo-size-m);
       padding: var(--lumo-space-s);
-      position: absolute;
-      left: 0;
-      right: 0;
       justify-content: center;
     }
 
-    :host([fullscreen]) [part='toggle-button'],
-    :host([fullscreen]) [part='clear-button'],
-    [part='overlay-header'] [part='label'] {
-      display: none;
-    }
-
     /* Very narrow screen (year scroller initially hidden) */
 
     [part='years-toggle-button'] {
@@ -150,14 +136,10 @@ registerStyles(
 
       /* TODO make date-picker adapt to the width of the years part */
       ::slotted([slot='years']) {
-        --vaadin-infinite-scroller-buffer-width: 90px;
+        --vaadin-infinite-scroller-buffer-width: 50px;
         width: 50px;
         background-color: var(--lumo-shade-5pct);
       }
-
-      :host([years-visible]) ::slotted([slot='months']) {
-        padding-left: 50px;
-      }
     }
   `,
   { moduleId: 'lumo-date-picker-overlay-content' },