feat(textarea): added highlight and focus styles to ionic theme

core/src/components/textarea/test/states/textarea.e2e.ts

@@ -28,3 +28,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+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
+      );
+
+      const container = page.locator('.container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
+    });
+  });
+});

core/src/components/textarea/textarea.ionic.outline.scss

@@ -59,3 +59,10 @@
 :host(.textarea-fill-outline) textarea {
   margin-top: globals.$ion-space-100;
 }
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline.has-focus) {
+  --border-width: #{globals.$ion-border-size-050};
+}

core/src/components/textarea/textarea.ionic.scss

@@ -132,3 +132,37 @@ ion-icon {
 .textarea-bottom .counter {
   color: globals.$ion-primitives-neutral-800;
 }
+
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-width: #{globals.$ion-border-size-025};
+}
+
+// Textarea Highlight
+// ----------------------------------------------------------------
+
+.textarea-highlight {
+  @include globals.position(null, null, -1px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: globals.$ion-border-size-050;
+
+  transform: scale(0);
+
+  transition: transform globals.$ion-transition-time-200;
+
+  background: var(--border-color);
+}
+
+// Textarea Focus
+// ----------------------------------------------------------------
+
+:host(.has-focus) {
+  --border-color: #{globals.$ion-border-focus-default};
+}
+
+:host(.has-focus) .textarea-highlight {
+  transform: scale(1);
+}

core/src/components/textarea/textarea.tsx

@@ -670,7 +670,7 @@ export class Textarea implements ComponentInterface {
     const shape = this.getShape();
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
-    const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+    const shouldRenderHighlight = (theme === 'md' || theme === 'ionic') && fill !== 'outline' && !inItem;
 
     const hasValue = this.hasValue();
     const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;