feat(textarea): add label slot (#27647)

Author: liamdebeasi

core/src/components.d.ts

@@ -2987,7 +2987,7 @@ export namespace Components {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the textarea.
+          * The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -7083,7 +7083,7 @@ declare namespace LocalJSX {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the textarea.
+          * The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**

core/src/components/textarea/test/a11y/index.html

@@ -15,6 +15,7 @@
     <main>
       <h1>Textarea - a11y</h1>
 
+      <ion-textarea><div slot="label">Slotted Label</div></ion-textarea><br />
       <ion-textarea label="my label"></ion-textarea><br />
       <ion-textarea aria-label="my aria label"></ion-textarea><br />
       <ion-textarea label="Email" label-placement="stacked" value="[email protected]"></ion-textarea>

core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png

@@ -180,3 +180,19 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('textarea: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea fill="outline" label-placement="stacked" aria-label="my textarea"></ion-textarea>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-textarea .textarea-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
+});

core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png

@@ -25,18 +25,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const textarea = page.locator('ion-textarea');
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start-multi-line-value`));
     });
-
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="start"></ion-textarea>
-    `,
-        config
-      );
-
-      const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start-label-truncated`));
-    });
   });
   test.describe(title('textarea: label placement end'), () => {
     test('label should appear on the ending side of the textarea', async ({ page }) => {
@@ -61,17 +49,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const textarea = page.locator('ion-textarea');
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end-multi-line-value`));
     });
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="end"></ion-textarea>
-    `,
-        config
-      );
-
-      const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end-label-truncated`));
-    });
   });
   test.describe(title('textarea: label placement fixed'), () => {
     test('label should appear on the starting side of the textarea and have a fixed width', async ({ page }) => {
@@ -234,3 +211,32 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: label overflow'), () => {
+    test('label property should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-textarea label="Label Label Label Label Label" placeholder="Text Input"></ion-textarea>
+          `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-truncate`));
+    });
+    test('label slot should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-textarea placeholder="Text Input">
+              <div slot="label">Label Label Label Label Label</div>
+            </ion-textarea>
+          `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-slot-truncate`));
+    });
+  });
+});

core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Textarea - Slot</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      .required {
+        color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Textarea - Slot</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill / Start</h2>
+            <ion-textarea label-placement="start" value="[email protected]">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Start</h2>
+            <ion-textarea label-placement="start" fill="solid" value="[email protected]">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Start</h2>
+            <ion-textarea label-placement="start" fill="outline" value="[email protected]">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Fill / Floating</h2>
+            <ion-textarea label-placement="floating" value="[email protected]">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Floating</h2>
+            <ion-textarea label-placement="floating" fill="solid" value="[email protected]">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating</h2>
+            <ion-textarea label-placement="floating" fill="outline" value="[email protected]">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png

@@ -12,3 +12,57 @@ it('should inherit attributes', async () => {
   expect(nativeEl.getAttribute('tabindex')).toBe('-1');
   expect(nativeEl.getAttribute('data-form-type')).toBe('password');
 });
+
+/**
+ * Textarea uses emulated slots, so the internal
+ * behavior will not exactly match IonSelect's slots.
+ * For example, Textarea does not render an actual `<slot>` element
+ * internally, so we do not check for that here. Instead,
+ * we check to see which label text is being used.
+ * If Textarea is updated to use Shadow DOM (and therefore native slots),
+ * then we can update these tests to more closely match the Select tests.
+ **/
+describe('textarea: label rendering', () => {
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea label="Label Prop Text"></ion-textarea>
+      `,
+    });
+
+    const textarea = page.body.querySelector('ion-textarea');
+
+    const labelText = textarea.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea><div slot="label">Label Prop Slot</div></ion-textarea>
+      `,
+    });
+
+    const textarea = page.body.querySelector('ion-textarea');
+
+    const labelText = textarea.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Slot');
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea label="Label Prop Text"><div slot="label">Label Prop Slot</div></ion-textarea>
+      `,
+    });
+
+    const textarea = page.body.querySelector('ion-textarea');
+
+    const labelText = textarea.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+});

core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png

@@ -62,8 +62,6 @@
 
   font-family: $font-family-base;
 
-  white-space: pre-wrap;
-
   z-index: $z-index-item-input;
 
   box-sizing: border-box;
@@ -74,6 +72,8 @@
   flex: 1;
 
   background: var(--background);
+
+  white-space: pre-wrap;
 }
 
 // TODO: FW-2876 - Remove this selector
@@ -131,9 +131,8 @@
   outline: none;
 
   background: transparent;
-  box-sizing: border-box;
-  resize: none;
-  appearance: none;
+
+  white-space: pre-wrap;
 
   /**
    * This ensures the textarea
@@ -145,6 +144,9 @@
    * contrast of the textarea.
    */
   z-index: 1;
+  box-sizing: border-box;
+  resize: none;
+  appearance: none;
 
   &::placeholder {
     @include padding(0);
@@ -159,6 +161,11 @@
   }
 }
 
+// TODO: FW-2876 - Remove this selector
+:host(.legacy-textarea) .native-textarea {
+  white-space: inherit;
+}
+
 // TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) .native-textarea,
 :host(.legacy-textarea) .textarea-legacy-wrapper::after {
@@ -455,14 +462,25 @@
  * works on block-level elements. A flex item is
  * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
  */
-.label-text {
+.label-text,
+::slotted([slot="label"]) {
   text-overflow: ellipsis;
 
   white-space: nowrap;
 
   overflow: hidden;
 }
 
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden,
+.textarea-outline-notch-hidden {
+  display: none;
+}
+
 .textarea-wrapper textarea {
   /**
    * When the floating label appears on top of the