feat(datetime-button): ensure overlays are sized correctly

Author: liamdebeasi

core/src/components/datetime-button/datetime-button.tsx

@@ -5,7 +5,7 @@ import { getIonMode } from '../../global/ionic-global';
 import type { Color, DatetimePresentation } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 import { printIonError } from '../../utils/logging';
-import { componentOnReady, addEventListener } from '../../utils/helpers';
+import { componentOnReady, addEventListener, raf } from '../../utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
 import { getToday } from '../datetime/utils/data';
 import { is24Hour } from '../datetime/utils/helpers';
@@ -20,6 +20,7 @@ import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalized
 })
 export class DatetimeButton implements ComponentInterface {
   private datetimeEl: HTMLIonDatetimeElement | null = null;
+  private overlayEl: HTMLElement | null = null;
 
   // STUBS
   @State() datetimePresentation?: DatetimePresentation = 'date-time';
@@ -80,7 +81,22 @@ export class DatetimeButton implements ComponentInterface {
 
     io.observe(datetimeEl);
 
+    /**
+     * Get a reference to any modal/popover
+     * the datetime is being used in so we can
+     * correctly size it when it is presented.
+     */
+    const overlayEl = this.overlayEl = datetimeEl.closest('ion-modal, ion-popover');
+
     componentOnReady(datetimeEl, () => {
+      /**
+       * Datetimes in overlays linked with datetime-button
+       * should display full width so that the overlay
+       * can be sized correctly.
+       */
+      if (overlayEl) {
+        datetimeEl.size = 'cover';
+      }
       const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');
 
       /**
@@ -201,6 +217,8 @@ export class DatetimeButton implements ComponentInterface {
      * the datetime is opened.
      */
     this.selectedButton = 'date';
+
+    this.setOverlaySize();
   };
 
   private handleTimeClick = () => {
@@ -234,8 +252,83 @@ export class DatetimeButton implements ComponentInterface {
      * the datetime is opened.
      */
     this.selectedButton = 'time';
+
+    this.setOverlaySize();
   };
 
+  /**
+   * If the datetime is presented in an
+   * overlay, the datetime and overlay
+   * should be appropriately size.
+   * These classes provide default sizing values
+   * that developers can customize.
+   * The goal is to provide an overlay that
+   * reasonably sized with a datetime that
+   * fills the entire container.
+   */
+  private setOverlaySize = () => {
+    const { overlayEl, datetimeEl } = this;
+
+    if (!overlayEl || !datetimeEl) {
+      return;
+    }
+
+    const { presentation } = datetimeEl;
+
+    /**
+     * All datetime overlays should have
+     * a consistent width and border radius.
+     * This is controlled by the ion-datetime-button-overlay
+     * class which developers can customize globally.
+     */
+    overlayEl.classList.add('ion-datetime-button-overlay');
+
+    /**
+     * Wheel picker styles in datetime always
+     * have a fixed height of 200px. This is
+     * because the buttons/headers are not shown
+     * with the wheel picker by design.
+     */
+    const hasWheelPicker = ['month', 'year', 'month-year', 'time'].includes(presentation);
+    const needsWiderWheel = presentation === 'month-year';
+
+    if (hasWheelPicker) {
+      overlayEl.style.setProperty('--height', `200px`);
+
+      /**
+       * The default width for month-year
+       * is too small, so we set it to 300px so
+       * the text is not cut off.
+       */
+      if (needsWiderWheel) {
+        overlayEl.style.setProperty('--width', '300px');
+      }
+
+      /**
+       * If we are not using the
+       * wheel picker then we need to automatically
+       * determine the height of the datetime by
+       * looking at scrollHeight. We look at scrollHeight
+       * as it will give us the height of the datetime
+       * even if it overflows outside of the overlay initially.
+       *
+       * We also wait a frame to allow the browser to
+       * unhide the overlay and calculate the size
+       * of the datetime.
+       *
+       * Doing this means developers can control the size
+       * of the overlay by setting the height of
+       * the datetime directly.
+       */
+    } else {
+      overlayEl.style.setProperty('--width', '300px');
+
+      raf(() => {
+        overlayEl.style.setProperty('--height', `${datetimeEl.scrollHeight}px`);
+      });
+    }
+  }
+
   render() {
     const { color, dateText, timeText, datetimePresentation, selectedButton, datetimeActive } = this;