Repository: ionic-team/ionic-framework
File: core/src/components/datetime-button/datetime-button.tsx (TypeScript)

Code before:
   * 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 = async (ev: Event, needsPresentationChange: boolean, triggerEl?: HTMLElement) => {
    const { overlayEl } = this;

    if (!overlayEl) {
      return;
    }

    /**
     * We set fit-content to allow the overlay to
     * take on the size of the datetime. If developers
     * want a smaller/larger overlay all they need
     * to do is change the width/height of the datetime.
     * Additionally, this lets us avoid having to set
     * explicit widths on each variant of datetime.
     */
    overlayEl.style.setProperty('--height', `fit-content`);
    overlayEl.style.setProperty('--width', 'fit-content');

    if (overlayEl.tagName === 'ION-POPOVER') {
      /**
       * When the presentation on datetime changes,
       * we need to wait for the component to re-render
       * otherwise the computed width/height of the
       * popover content will be wrong, causing
       * the popover to not align with the trigger element.
       */

      if (needsPresentationChange) {
        await this.waitForDatetimeChanges();
      }

      /**
       * We pass the trigger button element
       * so that the popover aligns with the individual
       * button that was clicked, not the component container.
       */
      (overlayEl as HTMLIonPopoverElement).present({
        ...ev,
        detail: {
          ionShadowTarget: triggerEl,
        },
      } as CustomEvent);

Review comment (bug):
Would it make sense to do this via a class instead (with `fit-content` added via pure CSS)? I worry that doing it via JS will be hard to debug if we need to figure out where those properties came from later.

Code after:
    /**
     * Track which button was clicked
     * so that it can have the correct
     * activated styles applied when
     * the modal/popover containing
     * the datetime is opened.
     */
    this.selectedButton = 'time';

    this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
  };

  /**
   * If the datetime is presented in an
   * overlay, the datetime and overlay
   * should be appropriately sized.
   * These classes provide default sizing values
   * that developers can customize.
   * The goal is to provide an overlay that is
   * reasonably sized with a datetime that
   * fills the entire container.
   */
  private presentOverlay = async (ev: Event, needsPresentationChange: boolean, triggerEl?: HTMLElement) => {
    const { overlayEl } = this;

    if (!overlayEl) {
      return;
    }

    if (overlayEl.tagName === 'ION-POPOVER') {
      /**
       * When the presentation on datetime changes,
       * we need to wait for the component to re-render
       * otherwise the computed width/height of the
       * popover content will be wrong, causing
       * the popover to not align with the trigger element.
       */

      if (needsPresentationChange) {
        await this.waitForDatetimeChanges();
      }

      /**
       * We pass the trigger button element
       * so that the popover aligns with the individual
       * button that was clicked, not the component container.
       */
      (overlayEl as HTMLIonPopoverElement).present({
        ...ev,
        detail: {
          ionShadowTarget: triggerEl,