refactor!: remove swipe gesture for toggling year scroller (#9362)

Author: web-padawan

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

@@ -5,7 +5,7 @@
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.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 {
@@ -75,10 +75,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           value: '(min-width: 375px)',
         },
 
-        _yearScrollerWidth: {
-          value: 50,
-        },
-
         i18n: {
           type: Object,
         },
@@ -176,9 +172,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @protected */
     _addListeners() {
-      setTouchAction(this.$.scrollers, 'pan-y');
-
-      addListener(this.$.scrollers, 'track', this._track.bind(this));
       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(
@@ -226,7 +219,6 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     reset() {
       this._closeYearScroller();
-      this._toggleAnimateClass(true);
     }
 
     /**
@@ -643,82 +635,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       window.requestAnimationFrame(smoothScroll);
     }
 
-    /** @private */
-    _limit(value, range) {
-      return Math.min(range.max, Math.max(range.min, value));
-    }
-
-    /** @private */
-    _handleTrack(e) {
-      // Check if horizontal movement threshold (dx) not exceeded or
-      // scrolling fast vertically (ddy).
-      if (Math.abs(e.detail.dx) < 10 || Math.abs(e.detail.ddy) > 10) {
-        return;
-      }
-
-      // If we're flinging quickly -> start animating already.
-      if (Math.abs(e.detail.ddx) > this._yearScrollerWidth / 3) {
-        this._toggleAnimateClass(true);
-      }
-
-      const newTranslateX = this._translateX + e.detail.ddx;
-      this._translateX = this._limit(newTranslateX, {
-        min: 0,
-        max: this._yearScrollerWidth,
-      });
-    }
-
-    /** @private */
-    _track(e) {
-      if (this._desktopMode) {
-        // No need to track for swipe gestures on desktop.
-        return;
-      }
-
-      switch (e.detail.state) {
-        case 'start':
-          this._toggleAnimateClass(false);
-          break;
-        case 'track':
-          this._handleTrack(e);
-          break;
-        case 'end':
-          this._toggleAnimateClass(true);
-          if (this._translateX >= this._yearScrollerWidth / 2) {
-            this._closeYearScroller();
-          } else {
-            this._openYearScroller();
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    /** @private */
-    _toggleAnimateClass(enable) {
-      if (enable) {
-        this.classList.add('animate');
-      } else {
-        this.classList.remove('animate');
-      }
-    }
-
     /** @private */
     _toggleYearScroller() {
       this.toggleAttribute('years-visible');
     }
 
-    /** @private */
-    _openYearScroller() {
-      this._translateX = 0;
-      this.setAttribute('years-visible', '');
-    }
-
     /** @private */
     _closeYearScroller() {
       this.removeAttribute('years-visible');
-      this._translateX = this._yearScrollerWidth;
     }
 
     /** @private */

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

@@ -65,11 +65,6 @@ export const overlayContentStyles = css`
     visibility: visible;
   }
 
-  :host(.animate) ::slotted([slot='months']),
-  :host(.animate) ::slotted([slot='years']) {
-    transition: all 200ms;
-  }
-
   [part='toolbar'] {
     display: flex;
     grid-area: toolbar;

packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js

@@ -295,7 +295,6 @@ snapshots["vaadin-date-picker host opened overlay"] =
   top-aligned=""
 >
   <vaadin-date-picker-overlay-content
-    class="animate"
     desktop=""
     role="dialog"
   >
@@ -458,7 +457,6 @@ snapshots["vaadin-date-picker host opened overlay class"] =
   top-aligned=""
 >
   <vaadin-date-picker-overlay-content
-    class="animate"
     desktop=""
     role="dialog"
   >
@@ -621,7 +619,6 @@ snapshots["vaadin-date-picker host opened overlay theme"] =
   top-aligned=""
 >
   <vaadin-date-picker-overlay-content
-    class="animate"
     desktop=""
     role="dialog"
     theme="custom"

packages/date-picker/test/visual/common.js

@@ -27,18 +27,6 @@ registerStyles(
   `,
 );
 
-registerStyles(
-  'vaadin-date-picker-overlay-content',
-  css`
-    /* Disable animation */
-    ::slotted([slot='years']),
-    ::slotted([slot='months']) {
-      animation: none !important;
-      transition: none !important;
-    }
-  `,
-);
-
 /* Stop focused day animation */
 registerStyles(
   'vaadin-month-calendar',

packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js

@@ -533,7 +533,6 @@ snapshots["vaadin-date-time-picker host overlay class date-picker"] =
   top-aligned=""
 >
   <vaadin-date-picker-overlay-content
-    class="animate"
     desktop=""
     role="dialog"
   >

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

@@ -94,11 +94,6 @@
   visibility: visible;
 }
 
-:host(.animate) ::slotted([slot='months']),
-:host(.animate) ::slotted([slot='years']) {
-  transition: all 200ms;
-}
-
 /* Year scroller position indicator */
 ::slotted([slot='years'])::before {
   border: none;