fix(textarea): update background placement for ionic

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

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Fill is only available in MD mode
+ * Fill is only available in MD and Ionic
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: fill'), () => {
     test.describe('textarea: fill solid', () => {
       test('should not have visual regressions', async ({ page }) => {
@@ -25,25 +25,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-textarea
-            fill="solid"
-            label="Email"
-            label-placement="floating"
-            value="[email protected]"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-textarea>
-        `,
-          config
-        );
-
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-label-floating`));
-      });
       test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(
           `
@@ -63,11 +44,12 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+      test('padding, border radius, and background should be customizable', async ({ page }) => {
         await page.setContent(
           `
           <style>
             ion-textarea {
+              --background: #e5e5e5 !important;
               --border-radius: 10px !important;
               --padding-start: 50px !important;
               --padding-end: 50px !important;
@@ -78,7 +60,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
             shape="round"
             fill="solid"
             label="Email"
-            label-placement="floating"
+            label-placement="stacked"
             value="[email protected]"
             helper-text="Enter your email"
             maxlength="20"
@@ -111,13 +93,13 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
+      test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(
           `
           <ion-textarea
+            shape="round"
             fill="outline"
             label="Email"
-            label-placement="floating"
             value="[email protected]"
             helper-text="Enter your email"
             maxlength="20"
@@ -128,15 +110,25 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline`));
       });
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
+      test('padding, border radius, and background should be customizable', async ({ page }) => {
         await page.setContent(
           `
+          <style>
+            ion-textarea {
+              --background: #e5e5e5 !important;
+              --border-radius: 10px !important;
+              --padding-start: 50px !important;
+              --padding-end: 50px !important;
+            }
+          </style>
+
           <ion-textarea
             shape="round"
             fill="outline"
             label="Email"
+            label-placement="stacked"
             value="[email protected]"
             helper-text="Enter your email"
             maxlength="20"
@@ -147,21 +139,43 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+    });
+  });
+});
+
+/**
+ * Fill with floating label is only available in MD mode
+ */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: fill'), () => {
+    test.describe('textarea: fill solid', () => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
-          <style>
-            ion-textarea {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
+          <ion-textarea
+            fill="solid"
+            label="Email"
+            label-placement="floating"
+            value="[email protected]"
+            helper-text="Enter your email"
+            maxlength="20"
+            counter="true"
+          ></ion-textarea>
+        `,
+          config
+        );
 
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-label-floating`));
+      });
+    });
+    test.describe('textarea: fill outline', () => {
+      test('should render correctly with floating label', async ({ page }) => {
+        await page.setContent(
+          `
           <ion-textarea
-            shape="round"
             fill="outline"
             label="Email"
             label-placement="floating"
@@ -175,7 +189,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
       });
     });
   });

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

@@ -11,6 +11,10 @@
 // Textarea Fill: Outline, Textarea Wrapper
 // ----------------------------------------------------------------
 
+:host(.textarea-fill-outline) .textarea-wrapper {
+  background: initial;
+}
+
 :host(.textarea-fill-outline) .textarea-wrapper-inner {
   /**
    * The border should be relative to the inner wrapper
@@ -34,6 +38,8 @@
   pointer-events: none;
 
   border: var(--border-width) var(--border-style) var(--border-color);
+
+  background: var(--background);
 }
 
 // Textarea Fill: Outline, Bottom Content