feat(input): support notch with label slot (#27635)

Author: liamdebeasi

core/src/components/input/input.md.outline.scss

@@ -172,6 +172,16 @@
 
   opacity: 0;
   pointer-events: none;
+
+  /**
+   * The spacer currently inherits
+   * border-box sizing from the Ionic reset styles.
+   * However, we do not want to include padding in
+   * the calculation of the element dimensions.
+   * This code can be removed if input is updated
+   * to use the Shadow DOM.
+   */
+  box-sizing: content-box;
 }
 
 :host(.input-fill-outline) .input-outline-start {

core/src/components/input/input.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -33,6 +33,9 @@ export class Input implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private isComposing = false;
   private legacyFormController!: LegacyFormController;
+  private notchSpacerEl: HTMLElement | undefined;
+
+  private notchController?: NotchController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -359,6 +362,11 @@ export class Input implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
 
     this.emitStyle();
     this.debounceChanged();
@@ -375,6 +383,10 @@ export class Input implements ComponentInterface {
     this.originalIonInput = this.ionInput;
   }
 
+  componentDidRender() {
+    this.notchController?.calculateNotchWidth();
+  }
+
   disconnectedCallback() {
     if (Build.isBrowser) {
       document.dispatchEvent(
@@ -383,6 +395,11 @@ export class Input implements ComponentInterface {
         })
       );
     }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   /**
@@ -635,7 +652,7 @@ export class Input implements ComponentInterface {
         <div class="input-outline-container">
           <div class="input-outline-start"></div>
           <div class="input-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
+            <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
           </div>

core/src/components/input/test/fill/input.e2e.ts

@@ -180,3 +180,58 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: label slot'), () => {
+    test('should render the notch correctly with a slotted label', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-input
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-slotted-label`));
+    });
+    test('should render the notch correctly with a slotted label after the input was originally hidden', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-input
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+          style="display: none"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+
+      await input.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display'));
+
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-hidden-slotted-label`));
+    });
+  });
+});

core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png

@@ -1,9 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
-import { win } from '@utils/browser';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes, raf } from '@utils/helpers';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
+import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController } from '@utils/overlays';
@@ -58,7 +57,8 @@ export class Select implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private nativeWrapperEl: HTMLElement | undefined;
   private notchSpacerEl: HTMLElement | undefined;
-  private notchVisibilityIO: IntersectionObserver | undefined;
+
+  private notchController?: NotchController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -245,6 +245,11 @@ export class Select implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
 
     this.updateOverlayOptions();
     this.emitStyle();
@@ -267,6 +272,11 @@ export class Select implements ComponentInterface {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   /**
@@ -746,17 +756,7 @@ export class Select implements ComponentInterface {
   }
 
   componentDidRender() {
-    if (this.needsExplicitNotchWidth()) {
-      /**
-       * Run this the frame after
-       * the browser has re-painted the select.
-       * Otherwise, the label element may have a width
-       * of 0 and the IntersectionObserver will be used.
-       */
-      raf(() => {
-        this.setNotchWidth();
-      });
-    }
+    this.notchController?.calculateNotchWidth();
   }
 
   /**
@@ -777,120 +777,6 @@ export class Select implements ComponentInterface {
     return this.label !== undefined || this.labelSlot !== null;
   }
 
-  private needsExplicitNotchWidth() {
-    if (
-      /**
-       * If the notch is not being used
-       * then we do not need to set the notch width.
-       */
-      this.notchSpacerEl === undefined ||
-      /**
-       * If either the label property is being
-       * used or the label slot is not defined,
-       * then we do not need to estimate the notch width.
-       */
-      this.label !== undefined ||
-      this.labelSlot === null
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  /**
-   * When using a label prop we can render
-   * the label value inside of the notch and
-   * let the browser calculate the size of the notch.
-   * However, we cannot render the label slot in multiple
-   * places so we need to manually calculate the notch dimension
-   * based on the size of the slotted content.
-   *
-   * This function should only be used to set the notch width
-   * on slotted label content. The notch width for label prop
-   * content is automatically calculated based on the
-   * intrinsic size of the label text.
-   */
-  private setNotchWidth() {
-    const { el, notchSpacerEl } = this;
-
-    if (notchSpacerEl === undefined) {
-      return;
-    }
-
-    if (!this.needsExplicitNotchWidth()) {
-      notchSpacerEl.style.removeProperty('width');
-      return;
-    }
-
-    const width = this.labelSlot!.scrollWidth;
-    if (
-      /**
-       * If the computed width of the label is 0
-       * and notchSpacerEl's offsetParent is null
-       * then that means the element is hidden.
-       * As a result, we need to wait for the element
-       * to become visible before setting the notch width.
-       *
-       * We do not check el.offsetParent because
-       * that can be null if ion-select has
-       * position: fixed applied to it.
-       * notchSpacerEl does not have position: fixed.
-       */
-      width === 0 &&
-      notchSpacerEl.offsetParent === null &&
-      win !== undefined &&
-      'IntersectionObserver' in win
-    ) {
-      /**
-       * If there is an IO already attached
-       * then that will update the notch
-       * once the element becomes visible.
-       * As a result, there is no need to create
-       * another one.
-       */
-      if (this.notchVisibilityIO !== undefined) {
-        return;
-      }
-
-      const io = (this.notchVisibilityIO = new IntersectionObserver(
-        (ev) => {
-          /**
-           * If the element is visible then we
-           * can try setting the notch width again.
-           */
-          if (ev[0].intersectionRatio === 1) {
-            this.setNotchWidth();
-            io.disconnect();
-            this.notchVisibilityIO = undefined;
-          }
-        },
-        /**
-         * Set the root to be the select
-         * This causes the IO callback
-         * to be fired in WebKit as soon as the element
-         * is visible. If we used the default root value
-         * then WebKit would only fire the IO callback
-         * after any animations (such as a modal transition)
-         * finished, and there would potentially be a flicker.
-         */
-        { threshold: 0.01, root: el }
-      ));
-
-      io.observe(notchSpacerEl);
-      return;
-    }
-
-    /**
-     * If the element is visible then we can set the notch width.
-     * The notch is only visible when the label is scaled,
-     * which is why we multiply the width by 0.75 as this is
-     * the same amount the label element is scaled by in the
-     * select CSS (See $select-floating-label-scale in select.vars.scss).
-     */
-    notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
-  }
-
   /**
    * Renders the border container
    * when fill="outline".

core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png

@@ -1 +1,2 @@
 export * from './form-controller';
+export * from './notch-controller';