Revert "fix(input): floating label works correctly with long text and notch (#26252)"

This reverts commit 753ffda.

Author: liamdebeasi

core/src/components/input/input.ios.scss

@@ -48,8 +48,3 @@
 :host(.input-label-placement-stacked) .input-wrapper {
   min-height: 56px;
 }
-
-:host(.input-label-placement-stacked) .label-text-wrapper,
-:host(.input-label-placement-floating) .label-text-wrapper {
-  max-width: 100%;
-}

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

@@ -1,5 +1,3 @@
-@import "./input.vars";
-
 // Input Fill: Outline
 // ----------------------------------------------------------------
 
@@ -11,7 +9,7 @@
 }
 
 :host(.input-fill-outline.input-shape-round) {
-  --border-radius: 28px;
+  --border-radius: 9999px;
   --padding-start: 32px;
   --padding-end: 32px;
 }
@@ -64,15 +62,7 @@
 
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
-  @include transform-origin(start, top);
-
-  position: absolute;
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+  @include transform-origin(center, top);
 }
 
 /**
@@ -93,14 +83,8 @@
 :host(.has-value.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(#{$input-floating-label-scale}));
+  @include transform(translateY(-32%), scale(.75));
   @include margin(0);
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$input-floating-label-scale});
 }
 
 /**
@@ -144,51 +128,20 @@
   border-bottom: var(--border-width) var(--border-style) var(--border-color);
 }
 
-/**
- * Ensures long labels do not cause the notch to flow
- * out of bounds.
- */
-:host(.input-fill-outline) .input-outline-notch {
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
-}
-
-/**
- * This element ensures that the notch used
- * the size of the scaled text so that the
- * border cut out is the correct width.
- * The text in this element should not
- * be interactive.
- */
-:host(.input-fill-outline) .notch-spacer {
-  /**
-   * We need $input-md-floating-label-padding of padding on the right.
-   * However, we also subtracted $input-md-floating-label-padding from
-   * the width of .input-outline-start
-   * to create space, so we need to take
-   * that into consideration here.
-   */
-  @include padding(null, #{$input-md-floating-label-padding * 2}, null, null);
-
-  font-size: calc(1em * #{$input-floating-label-scale});
-
-  opacity: 0;
-  pointer-events: none;
-}
-
-
 :host(.input-fill-outline) .input-outline-start {
   @include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
   @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
 
-  /**
-   * There should be spacing between the translated text
-   * and .input-outline-start. However, we can't add this
-   * spacing onto the notch because it would cause the
-   * label to look like it is not aligned with the
-   * text input. Instead, we subtract a few pixels from
-   * this element.
-   */
-  width: calc(var(--padding-start) - #{$input-md-floating-label-padding});
+  width: 12px;
+}
+
+/**
+ * When shape="round", the starting outline fragment
+ * should appear with a pill shape.
+ */
+:host(.input-fill-outline.input-shape-round) .input-outline-start {
+  @include border-radius(28px, 0px, 0px, 28px);
+  width: 28px;
 }
 
 :host(.input-fill-outline) .input-outline-end {

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

@@ -1,5 +1,3 @@
-@import "./input.vars";
-
 // Input Fill: Solid
 // ----------------------------------------------------------------
 
@@ -61,22 +59,3 @@
    */
   @include border-radius(var(--border-radius), var(--border-radius), 0px, 0px);
 }
-
-// Input Label
-// ----------------------------------------------------------------
-
-:host(.input-fill-solid.input-label-placement-stacked) .label-text-wrapper,
-:host(.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
-  max-width: 100%;
-}
-
-:host(.has-focus.input-fill-solid.input-label-placement-stacked) .label-text-wrapper,
-:host(.has-value.input-fill-solid.input-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.input-fill-solid.input-label-placement-floating) .label-text-wrapper,
-:host(.has-value.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / #{$input-floating-label-scale});
-}

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

@@ -75,6 +75,3 @@ $input-md-inset-margin-bottom:            ($item-md-padding-bottom * 0.5) !defau
 
 /// @prop - Margin start of the inset input
 $input-md-inset-margin-start:             $item-md-padding-start !default;
-
-/// @prop - The amount of whitespace to display on either side of the floating label
-$input-md-floating-label-padding:         4px !default;

core/src/components/input/input.scss

@@ -393,6 +393,13 @@
 // ----------------------------------------------------------------
 
 .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, 8px, 0, 0);
+
   /**
    * This causes the label to take up
    * the entire height of its container
@@ -402,16 +409,6 @@
 
   align-items: center;
 
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   * However, we do not set the max
-   * width to 100% because then
-   * only the label would show and users
-   * would not be able to see what they are typing.
-   */
-  max-width: 200px;
-
   transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1);
 
   /**
@@ -463,15 +460,6 @@
   flex-direction: row;
 }
 
-:host(.input-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, 8px, 0, 0);
-}
-
 // Input Label Placement - End
 // ----------------------------------------------------------------
 
@@ -495,15 +483,6 @@
 // Input Label Placement - Fixed
 // ----------------------------------------------------------------
 
-:host(.input-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, 8px, 0, 0);
-}
-
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -580,10 +559,4 @@
 :host(.has-focus.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-label-placement-floating) .label-text-wrapper {
   @include transform(translateY(50%), scale(.75));
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / #{$input-floating-label-scale});
 }

core/src/components/input/input.tsx

@@ -572,28 +572,28 @@ export class Input implements ComponentInterface {
    * when fill="outline".
    */
   private renderLabelContainer() {
-    const mode = getIonMode(this);
-    const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+    const { labelPlacement } = this;
+    const hasOutlineFill = this.fill === 'outline';
+    const needsNotch = labelPlacement === 'floating' || labelPlacement === 'stacked';
 
     if (hasOutlineFill) {
       /**
        * The outline fill has a special outline
        * that appears around the input and the label.
-       * Certain stacked and floating label placements cause the
+       * Certain label placements cause the
        * label to translate up and create a "cut out"
-       * inside of that border by using the notch-spacer element.
+       * inside of that border. When this happens, we need
+       * to render the label inside of the input-outline-notch
+       * element. Otherwise, we can render it as a sibling
+       * of the outline container.
        */
       return [
         <div class="input-outline-container">
           <div class="input-outline-start"></div>
-          <div class="input-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
-              {this.label}
-            </div>
-          </div>
+          <div class="input-outline-notch">{needsNotch && this.renderLabel()}</div>
           <div class="input-outline-end"></div>
         </div>,
-        this.renderLabel(),
+        !needsNotch && this.renderLabel(),
       ];
     }
 

core/src/components/input/input.vars.scss

@@ -1,4 +1 @@
 @import "../../themes/ionic.globals";
-
-/// @prop - How much to scale the floating label by
-$input-floating-label-scale: 0.75 !default;

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

@@ -22,24 +22,6 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-solid-${page.getSnapshotSettings()}.png`);
     });
-    test('should render correctly with floating label', async ({ page }) => {
-      await page.setContent(`
-        <ion-input
-          fill="solid"
-          label="Email"
-          label-placement="floating"
-          value="[email protected]"
-          helper-text="Enter your email"
-          maxlength="20"
-          counter="true"
-        ></ion-input>
-      `);
-
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(
-        `input-fill-solid-label-floating-${page.getSnapshotSettings()}.png`
-      );
-    });
     test('should not have visual regressions with shaped solid', async ({ page }) => {
       await page.setContent(`
         <ion-input
@@ -56,33 +38,6 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-shaped-solid-${page.getSnapshotSettings()}.png`);
     });
-    test('padding and border radius should be customizable', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          ion-input {
-            --border-radius: 10px !important;
-            --padding-start: 50px !important;
-            --padding-end: 50px !important;
-          }
-        </style>
-
-        <ion-input
-          shape="round"
-          fill="solid"
-          label="Email"
-          label-placement="floating"
-          value="[email protected]"
-          helper-text="Enter your email"
-          maxlength="20"
-          counter="true"
-        ></ion-input>
-      `);
-
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(
-        `input-fill-shaped-solid-custom-${page.getSnapshotSettings()}.png`
-      );
-    });
   });
   test.describe('input: fill outline', () => {
     test('should not have visual regressions', async ({ page }) => {
@@ -100,24 +55,6 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-outline-${page.getSnapshotSettings()}.png`);
     });
-    test('should render correctly with floating label', async ({ page }) => {
-      await page.setContent(`
-        <ion-input
-          fill="outline"
-          label="Email"
-          label-placement="floating"
-          value="[email protected]"
-          helper-text="Enter your email"
-          maxlength="20"
-          counter="true"
-        ></ion-input>
-      `);
-
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(
-        `input-fill-outline-label-floating-${page.getSnapshotSettings()}.png`
-      );
-    });
     test('should not have visual regressions with shaped outline', async ({ page }) => {
       await page.setContent(`
         <ion-input
@@ -134,32 +71,5 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-shaped-outline-${page.getSnapshotSettings()}.png`);
     });
-    test('padding and border radius should be customizable', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          ion-input {
-            --border-radius: 10px !important;
-            --padding-start: 50px !important;
-            --padding-end: 50px !important;
-          }
-        </style>
-
-        <ion-input
-          shape="round"
-          fill="outline"
-          label="Email"
-          label-placement="floating"
-          value="[email protected]"
-          helper-text="Enter your email"
-          maxlength="20"
-          counter="true"
-        ></ion-input>
-      `);
-
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(
-        `input-fill-shaped-outline-custom-${page.getSnapshotSettings()}.png`
-      );
-    });
   });
 });