fix(textarea): update background placement for ionic (#29910)

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'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: fill'), () => {
     test.describe('textarea: fill solid', () => {
       test('should not have visual regressions', async ({ page }) => {
@@ -13,6 +13,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           <ion-textarea
             fill="solid"
             label="Email"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -25,49 +26,12 @@ 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="hi@ionic.io"
-            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(
-          `
-          <ion-textarea
-            shape="round"
-            fill="solid"
-            label="Email"
-            value="hi@ionic.io"
-            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-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 +42,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
             shape="round"
             fill="solid"
             label="Email"
-            label-placement="floating"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -99,6 +63,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           <ion-textarea
             fill="outline"
             label="Email"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -111,6 +76,66 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline`));
       });
+      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="hi@ionic.io"
+            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-shaped-outline-custom`));
+      });
+    });
+  });
+});
+
+/**
+ * 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(
+          `
+          <ion-textarea
+            fill="solid"
+            label="Email"
+            label-placement="floating"
+            value="hi@ionic.io"
+            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(
           `
@@ -130,53 +155,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
       });
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-textarea
-            shape="round"
-            fill="outline"
-            label="Email"
-            value="hi@ionic.io"
-            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-shaped-outline`));
-      });
-      test('padding and border radius should be customizable', async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            ion-textarea {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
-
-          <ion-textarea
-            shape="round"
-            fill="outline"
-            label="Email"
-            label-placement="floating"
-            value="hi@ionic.io"
-            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-shaped-outline-custom`));
-      });
     });
   });
 });

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

@@ -1,6 +1,38 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+/**
+ * This behavior does not vary across directions.
+ * The round shape is only available in the Ionic and Material Design themes.
+ * Shapes with different fill types are only available in the Material Design theme.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: shape'), () => {
+    test.describe('fill: solid', () => {
+      test.describe('round', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.setContent(
+            `
+            <ion-textarea
+              shape="round"
+              fill="solid"
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+            ></ion-textarea>
+          `,
+            config
+          );
+
+          const textarea = page.locator('ion-textarea');
+
+          await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-shape-round`));
+        });
+      });
+    });
+  });
+});
+
 /**
  * This behavior does not vary across directions
  * The round shape is only available in the Ionic and Material Design themes

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