ionic-team · brandyscarney · Mar 25, 2025 · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025
@@ -347,3 +347,50 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: highlights'), () => {
+    test.describe('textarea: no fill', () => {
+      test('should render valid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            value="hi@ionic.io"
+            class="ion-valid has-focus"
+            label="Email"
+            label-placement="stacked"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-valid`));
+      });
+      test('should render invalid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            value="hi@ionic.io"
+            class="ion-touched ion-invalid"
+            label="Email"
+            label-placement="stacked"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-invalid`));
+      });
+    });
+  });
+});
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Textarea - Disabled</title>
+    <title>Textarea - States</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -49,13 +49,127 @@
           <div class="grid-item">
             <h2>Readonly</h2>
 
-            <ion-textarea label="Email" value="hi@ionic.io" readonly="true"></ion-textarea>
+            <ion-textarea
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              readonly="true"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Readonly: Valid</h2>
+
+            <ion-textarea
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              readonly="true"
+              class="ion-valid has-focus"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Readonly: Invalid</h2>
+
+            <ion-textarea
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              readonly="true"
+              class="ion-invalid ion-touched"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Readonly: Color</h2>
+
+            <ion-textarea
+              color="warning"
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              readonly="true"
+            ></ion-textarea>
           </div>
 
           <div class="grid-item">
             <h2>Disabled</h2>
 
-            <ion-textarea label="Email" value="hi@ionic.io" disabled="true"></ion-textarea>
+            <ion-textarea
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              disabled="true"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled: Valid</h2>
+
+            <ion-textarea
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              disabled="true"
+              class="ion-valid has-focus"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled: Invalid</h2>
+
+            <ion-textarea
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              disabled="true"
+              class="ion-invalid ion-touched"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled: Color</h2>
+
+            <ion-textarea
+              color="warning"
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              counter="true"
+              maxlength="99"
+              helper-text="Helper text"
+              error-text="Error text"
+              disabled="true"
+            ></ion-textarea>
           </div>
         </div>
       </ion-content>

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: states'), () => {
     test('should render readonly textarea correctly', async ({ page }) => {
       await page.setContent(
@@ -30,19 +30,127 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
 });
 
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('focused'), () => {
-    test('should render focused textarea correctly', async ({ page }) => {
-      await page.setContent(
-        `
-        <div class="container ion-padding">
-          <ion-textarea fill="outline" value="hi@ionic.io" class="has-focus"></ion-textarea>
-        </div>
-      `,
-        config
-      );
+  test.describe(title('textarea: states'), () => {
+    test.describe(title('disabled'), () => {
+      test.describe(title('no fill'), () => {
+        test('should render disabled textarea correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-textarea
+                label="Email"
+                label-placement="stacked"
+                value="hi@ionic.io"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                disabled="true"
+              ></ion-textarea>
+
+              <ion-textarea
+                label="Email"
+                label-placement="stacked"
+                value="hi@ionic.io"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                class="ion-valid has-focus"
+                disabled="true"
+              ></ion-textarea>
+
+              <ion-textarea
+                label="Email"
+                label-placement="stacked"
+                value="hi@ionic.io"
+                error-text="Please enter a valid email"
+                counter="true"
+                maxlength="20"
+                class="ion-touched ion-invalid"
+                disabled="true"
+              ></ion-textarea>
+
+              <ion-textarea
+                label="Email"
+                label-placement="stacked"
+                value="hi@ionic.io"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                disabled="true"
+                color="warning"
+              ></ion-textarea>
+            </div>
+          `,
+            config
+          );
+
+          // Set the viewport size taller to capture all of the textareas
+          await page.setViewportSize({ width: 393, height: 800 });
+
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`textarea-disabled-no-fill`));
+        });
+      });
+    });
+
+    test.describe(title('focused'), () => {
+      test('should render focused textarea correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <div class="container">
+            <ion-textarea
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="outline"
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-textarea>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
+      });
+    });
+
+    test.describe(title('readonly'), () => {
+      test.describe(title('no fill'), () => {
+        test('should render readonly textarea correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-textarea
+                label="Email"
+                label-placement="stacked"
+                value="hi@ionic.io"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                readonly="true"
+              ></ion-textarea>
+            </div>
+          `,
+            config
+          );
 
-      const container = page.locator('.container');
-      await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`textarea-readonly-no-fill`));
+        });
+      });
     });
   });
 });
@@ -351,8 +351,6 @@
 
   border-top: var(--border-width) var(--border-style) var(--border-color);
 
-  font-size: dynamic-font(12px);
-
   white-space: normal;
 }
 
@@ -381,8 +379,6 @@
 
 .textarea-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {

@@ -134,6 +134,10 @@ ion-icon {
   color: globals.$ion-primitives-neutral-800;
 }
 
+:host(.has-focus.ion-valid) .helper-text {
+  color: var(--highlight-color-valid);
+}
+
 :host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-width: #{globals.$ion-border-size-025};
@@ -190,7 +194,24 @@ ion-icon {
 :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
 :host(.textarea-disabled) .textarea-bottom .counter,
 :host(.textarea-disabled) .label-text-wrapper {
-  color: globals.$ion-primitives-neutral-500;
+  color: globals.$ion-text-disabled;
+}
+
+:host(.textarea-disabled.has-focus.ion-valid) {
+  --border-color: rgba(#{globals.$ion-semantics-success-base-rgb}, 0.6);
+}
+
+:host(.textarea-disabled.ion-touched.ion-invalid) {
+  --border-color: rgba(#{globals.$ion-semantics-danger-base-rgb}, 0.6);
+}
+
+:host(.textarea-disabled.ion-color) {
+  --border-color: #{globals.current-color(base, 0.6)};
+}
+
+:host(.textarea-disabled.has-focus.ion-valid) .textarea-bottom .helper-text,
+:host(.textarea-disabled.ion-touched.ion-invalid) .error-text {
+  opacity: 0.6;
 }
 
 // Textarea - Readonly