refactor!: remove obsolete date-picker overlay header parts (#9370)

Author: web-padawan

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

@@ -8,13 +8,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import {
-  dateAfterXMonths,
-  dateAllowed,
-  dateEquals,
-  extractDateParts,
-  getClosestDate,
-} from './vaadin-date-picker-helper.js';
+import { dateAfterXMonths, dateAllowed, dateEquals, getClosestDate } from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
@@ -170,17 +164,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
     }
 
-    /** @protected */
-    _addListeners() {
-      addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
-      addListener(this.shadowRoot.querySelector('[part="toggle-button"]'), 'tap', this._cancel.bind(this));
-      addListener(
-        this.shadowRoot.querySelector('[part="years-toggle-button"]'),
-        'tap',
-        this._toggleYearScroller.bind(this),
-      );
-    }
-
     /** @protected */
     _initControllers() {
       this.addController(
@@ -195,7 +178,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           initializer: (btn) => {
             btn.setAttribute('theme', 'tertiary');
             btn.addEventListener('keydown', (e) => this.__onTodayButtonKeyDown(e));
-            addListener(btn, 'tap', this._onTodayTap.bind(this));
+            btn.addEventListener('click', this._onTodayTap.bind(this));
             this._todayButton = btn;
           },
         }),
@@ -207,7 +190,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           initializer: (btn) => {
             btn.setAttribute('theme', 'tertiary');
             btn.addEventListener('keydown', (e) => this.__onCancelButtonKeyDown(e));
-            addListener(btn, 'tap', this._cancel.bind(this));
+            btn.addEventListener('click', this._cancel.bind(this));
             this._cancelButton = btn;
           },
         }),
@@ -515,14 +498,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       });
     }
 
-    /** @protected */
-    _formatDisplayed(date, i18n, label) {
-      if (date && i18n && typeof i18n.formatDate === 'function') {
-        return i18n.formatDate(extractDateParts(date));
-      }
-      return label;
-    }
-
     /** @private */
     _onTodayTap() {
       const today = this._getTodayMidnight();
@@ -672,11 +647,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       this._close();
     }
 
-    /** @protected */
-    _preventDefault(e) {
-      e.preventDefault();
-    }
-
     /** @private */
     __toggleDate(date) {
       if (dateEquals(date, this.selectedDate)) {

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

@@ -25,25 +25,6 @@ export const overlayContentStyles = css`
     grid-template-columns: minmax(0, 1fr) auto;
   }
 
-  :host([fullscreen]) :is([part='toggle-button'], [part='clear-button'], [part='label']) {
-    display: none;
-  }
-
-  [part='overlay-header'] {
-    display: none;
-    grid-area: header;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :host([fullscreen]) [part='overlay-header'] {
-    display: flex;
-  }
-
-  [part='label'] {
-    flex-grow: 1;
-  }
-
   [hidden] {
     display: none !important;
   }
@@ -65,8 +46,6 @@ export const overlayContentStyles = css`
     display: flex;
     grid-area: toolbar;
     justify-content: space-between;
-    z-index: 2;
-    flex-shrink: 0;
   }
 
   :host([fullscreen]) [part='toolbar'] {

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

@@ -36,21 +36,19 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   /** @protected */
   render() {
     return html`
-      <div part="overlay-header" @touchend="${this._preventDefault}" aria-hidden="true">
-        <div part="label">${this._formatDisplayed(this.selectedDate, this.i18n, this.label)}</div>
-        <div part="clear-button" ?hidden="${!this.selectedDate}"></div>
-        <div part="toggle-button"></div>
-
-        <div part="years-toggle-button" ?hidden="${this._desktopMode}" aria-hidden="true">
-          ${this._yearAfterXMonths(this._visibleMonthIndex)}
-        </div>
-      </div>
-
       <slot name="months"></slot>
       <slot name="years"></slot>
 
-      <div @touchend="${this._preventDefault}" role="toolbar" part="toolbar">
+      <div role="toolbar" part="toolbar">
         <slot name="today-button"></slot>
+        <div
+          part="years-toggle-button"
+          ?hidden="${this._desktopMode}"
+          aria-hidden="true"
+          @click="${this._toggleYearScroller}"
+        >
+          ${this._yearAfterXMonths(this._visibleMonthIndex)}
+        </div>
         <slot name="cancel-button"></slot>
       </div>
     `;
@@ -62,7 +60,6 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
 
     this.setAttribute('role', 'dialog');
 
-    this._addListeners();
     this._initControllers();
   }
 }

packages/date-picker/src/vaadin-date-picker.d.ts

@@ -110,12 +110,8 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * Part name             | Description
  * ----------------------|--------------------
- * `overlay-header`      | Fullscreen mode header
- * `label`               | Fullscreen mode value/label
- * `clear-button`        | Fullscreen mode clear button
- * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `toolbar`             | Footer bar with slotted buttons
+ * `toolbar`             | Toolbar with slotted buttons
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *

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

@@ -74,12 +74,8 @@ import { datePickerStyles } from './vaadin-date-picker-styles.js';
  *
  * Part name             | Description
  * ----------------------|--------------------
- * `overlay-header`      | Fullscreen mode header
- * `label`               | Fullscreen mode value/label
- * `clear-button`        | Fullscreen mode clear button
- * `toggle-button`       | Fullscreen mode toggle button
  * `years-toggle-button` | Fullscreen mode years scroller toggle
- * `toolbar`             | Footer bar with slotted buttons
+ * `toolbar`             | Toolbar with slotted buttons
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *

packages/date-picker/test/basic.test.js

@@ -223,11 +223,6 @@ describe('basic features', () => {
       expect(weekdayTitles).to.eql(['ma', 'ti', 'ke', 'to', 'pe', 'la', 'su']);
     });
 
-    it('should reflect value in overlay header', () => {
-      datePicker.value = '2000-02-01';
-      expect(overlayContent.shadowRoot.querySelector('[part="label"]').textContent.trim()).to.equal('1.2.2000');
-    });
-
     it('should display buttons in correct locale', () => {
       expect(overlayContent._todayButton.textContent.trim()).to.equal('Tänään');
       expect(overlayContent._cancelButton.textContent.trim()).to.equal('Peruuta');

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

@@ -124,50 +124,11 @@ describe('overlay', () => {
       });
     });
 
-    describe('header', () => {
-      let header, clearButton;
-
-      beforeEach(() => {
-        header = overlay.shadowRoot.querySelector('[part="overlay-header"]');
-        clearButton = overlay.shadowRoot.querySelector('[part="clear-button"]');
-      });
-
-      it('should be visible', () => {
-        overlay.setAttribute('fullscreen', '');
-        expect(window.getComputedStyle(header).display).to.equal('flex');
-      });
-
-      it('should be invisible', () => {
-        expect(window.getComputedStyle(header).display).to.equal('none');
-      });
-
-      it('should reflect value in label', () => {
-        overlay.i18n = { ...overlay.i18n, formatDate: (date) => `${date.month + 1}/${date.day}/${date.year}` };
-        overlay.selectedDate = new Date(2000, 1, 1);
-        expect(overlay.shadowRoot.querySelector('[part="label"]').textContent.trim()).to.equal('2/1/2000');
-      });
-
-      it('should not show clear button if not value is set', () => {
-        expect(window.getComputedStyle(clearButton).display).to.equal('none');
-      });
-
-      it('should show clear button if value is set', () => {
-        overlay.selectedDate = new Date();
-        expect(window.getComputedStyle(clearButton).display).to.not.equal('none');
-      });
-
-      it('should clear the value', () => {
-        overlay.selectedDate = new Date();
-        click(clearButton);
-        expect(overlay.selectedDate).to.equal('');
-      });
-    });
-
     describe('footer', () => {
       it('should fire close on cancel click', () => {
         const spy = sinon.spy();
         overlay.addEventListener('close', spy);
-        tap(overlay._cancelButton);
+        click(overlay._cancelButton);
         expect(spy.calledOnce).to.be.true;
       });
 
@@ -178,7 +139,7 @@ describe('overlay', () => {
 
           const today = new Date();
           const spy = sinon.spy(overlay, 'scrollToDate');
-          tap(overlay._todayButton);
+          click(overlay._todayButton);
           await untilOverlayScrolled(overlay);
 
           expect(spy.calledOnce).to.be.true;
@@ -195,7 +156,7 @@ describe('overlay', () => {
 
           const spy = sinon.spy();
           overlay.addEventListener('close', spy);
-          tap(overlay._todayButton);
+          click(overlay._todayButton);
 
           expect(overlay.selectedDate.getFullYear()).to.equal(today.getFullYear());
           expect(overlay.selectedDate.getMonth()).to.equal(today.getMonth());
@@ -212,7 +173,7 @@ describe('overlay', () => {
           overlay.addEventListener('close', spy);
 
           overlay._monthScroller.$.scroller.scrollTop -= 1;
-          tap(overlay._todayButton);
+          click(overlay._todayButton);
 
           expect(overlay.selectedDate).to.be.not.ok;
           expect(spy.called).to.be.false;
@@ -228,7 +189,7 @@ describe('overlay', () => {
           const lastScrollPos = overlay._monthScroller.position;
 
           overlay._todayButton.disabled = true;
-          tap(overlay._todayButton);
+          click(overlay._todayButton);
 
           expect(overlay._monthScroller.position).to.equal(lastScrollPos);
           expect(closeSpy.called).to.be.false;
@@ -286,7 +247,7 @@ describe('overlay', () => {
             overlay.scrollToDate(todayMidnight);
             await untilOverlayScrolled(overlay);
 
-            tap(overlay._todayButton);
+            click(overlay._todayButton);
 
             expect(overlay.selectedDate.getFullYear()).to.equal(todayMidnight.getFullYear());
             expect(overlay.selectedDate.getMonth()).to.equal(todayMidnight.getMonth());

packages/date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -98,21 +98,14 @@ registerStyles(
       margin-inline-end: 57px;
     }
 
-    :host([fullscreen]) [part='overlay-header'] {
-      height: var(--lumo-size-m);
-      padding: var(--lumo-space-s);
-      justify-content: center;
-    }
-
     /* Very narrow screen (year scroller initially hidden) */
 
     [part='years-toggle-button'] {
       display: flex;
       align-items: center;
-      height: var(--lumo-size-s);
+      height: var(--lumo-size-m);
       padding: 0 0.5em;
       border-radius: var(--lumo-border-radius-m);
-      z-index: 3;
       color: var(--lumo-primary-text-color);
       font-weight: 500;
       -webkit-font-smoothing: antialiased;

packages/vaadin-lumo-styles/src/components/date-picker-overlay-content.css

@@ -33,10 +33,6 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
-[part='label'] {
-  flex-grow: 1;
-}
-
 [hidden] {
   display: none !important;
 }
@@ -111,8 +107,6 @@
   display: flex;
   grid-area: toolbar;
   justify-content: space-between;
-  z-index: 2;
-  flex-shrink: 0;
   padding: var(--lumo-space-s);
   border-bottom-left-radius: var(--lumo-border-radius-l);
 }
@@ -128,43 +122,18 @@
 
 /* Narrow viewport mode (fullscreen) */
 
-[part='overlay-header'] {
-  display: none;
-  grid-area: header;
-  align-items: center;
-  justify-content: center;
-}
-
-:host([fullscreen]) :is([part='toggle-button'], [part='clear-button'], [part='label']) {
-  display: none;
-}
-
 :host([fullscreen]) [part='toolbar'] {
   background-color: var(--lumo-base-color);
 }
 
-:host([fullscreen]) [part='overlay-header'] {
-  display: flex;
-  height: var(--lumo-size-m);
-  padding: var(--lumo-space-s);
-  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'] {
   display: flex;
   align-items: center;
-  height: var(--lumo-size-s);
+  height: var(--lumo-size-m);
   padding: 0 0.5em;
   border-radius: var(--lumo-border-radius-m);
-  z-index: 3;
   color: var(--lumo-primary-text-color);
   font-weight: 500;
   -webkit-font-smoothing: antialiased;