diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html index 6d739085136..23c9f3fe1c9 100644 --- a/core/src/components/textarea/test/basic/index.html +++ b/core/src/components/textarea/test/basic/index.html @@ -12,6 +12,28 @@ + @@ -23,17 +45,22 @@ - - - +
+
+

Default

+ + + +
+
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index a79c4482e3e..bbe771c4d30 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2ed7db0b20d..e9cbe88c2a2 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 79c8e92550b..9c55e1c8692 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png index b13bd583250..df9d80d7097 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 53f5e6ab887..16c959cd0d3 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png index 2c50763b890..28daf19480d 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 510cf000d3c..018553c7127 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png index c214d1d4488..ce340583053 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png index 517195bd589..70963657b68 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2e4c1cb2310..647f3061b7a 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 7544fdca3d3..91447185378 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png index 150c03e76ce..d052a994d5d 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6383767feb0..bd7e7bb1b20 100644 Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 590e68cb478..36b33f3dc2c 100644 Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png index 49ef14c8359..e2c248546b4 100644 Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png index d08a2188bbb..743ab095110 100644 Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 74159afbcea..ec96f1dfd57 100644 Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png index f04d7cf1e7a..73bdaccf600 100644 Binary files a/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/index.html b/core/src/components/textarea/test/rows/index.html new file mode 100644 index 00000000000..94d15acbfac --- /dev/null +++ b/core/src/components/textarea/test/rows/index.html @@ -0,0 +1,255 @@ + + + + + Textarea - Rows + + + + + + + + + + + + + + Textarea - Rows + + + + +
+
+

Rows: 3

+ +
+ +
+

Rows: 2

+ +
+ +
+

Rows: 5

+ +
+ +
+

Rows: 8

+ +
+ +
+

Rows: 4, Fill Outline

+ +
+ +
+

Rows: 4, Fill Solid

+ +
+ +
+

Rows: 3, Size Small

+ +
+ +
+

Rows: 3, Size Medium

+ +
+ +
+

Rows: 3, Size Large

+ +
+ +
+

Rows: 3, Auto-grow

+ +
+ +
+

Rows: 3, Label Start

+ +
+ +
+

Rows: 3, Label End

+ +
+ +
+

Rows: 3, Label Floating

+ +
+ +
+

Rows: 3, Label Fixed

+ +
+ +
+

Rows: 3, Shape Soft

+ +
+ +
+

Rows: 3, Shape Round

+ +
+ +
+

Rows: 3, Shape Rectangular

+ +
+
+ + + + diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts b/core/src/components/textarea/test/rows/textarea.e2e.ts new file mode 100644 index 00000000000..90965c77bf3 --- /dev/null +++ b/core/src/components/textarea/test/rows/textarea.e2e.ts @@ -0,0 +1,258 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * Rows attribute is only available in the Ionic theme. + * When set, it increases the container min-height to accommodate the number of rows. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: rows'), () => { + test('should respect rows attribute and set min-height', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3`)); + }); + + test('should respect rows attribute with different values', async ({ page }) => { + await page.setContent( + ` +
+ + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`)); + }); + + test('should respect rows attribute with fill outline and solid', async ({ page }) => { + await page.setContent( + ` +
+ + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-4-fill`)); + }); + + test('should respect rows attribute with different sizes', async ({ page }) => { + await page.setContent( + ` +
+ + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`)); + }); + + test('should respect rows attribute with value content', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-with-value`)); + }); + + test('should respect rows when auto-grow is enabled', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`)); + }); + + test('should respect rows attribute with different label placements', async ({ page }) => { + await page.setContent( + ` +
+ + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-label-placements`)); + }); + + test('should respect rows attribute with different shapes', async ({ page }) => { + await page.setContent( + ` +
+ + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-shapes`)); + }); + }); +}); diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0ccd6bc54a6 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3b3bad2640b Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6548f9cf734 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8b91534ff8b Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9f553a3f431 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cffced1f87d Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8b91534ff8b Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9f553a3f431 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cffced1f87d Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0e77dbc589a Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..183c9c677c4 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dab748ce844 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8d21a85cf29 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..467e0edc189 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..282062bea97 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..aabfbecbf7c Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1333ae53dd2 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b6fd082c8 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7be9faaa9d3 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2d267371861 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..566b6be963a Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-label-placements-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..469fbd8cf76 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..24b5854e0e4 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ad89abaf28b Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-shapes-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9be8ceb108d..4aa030254d4 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index caa323f7209..f35d57b8926 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 6617bdde44f..bcf9b794b42 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index d693db26077..7c77fa8f235 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index 468fe4c0f78..e6dc2b5ca3b 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index 729951ea315..7dce87fc6af 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9be8ceb108d..4aa030254d4 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index caa323f7209..f35d57b8926 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 6617bdde44f..bcf9b794b42 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index c15e3a8e42c..d01e10b457d 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 80b6de7e2cc..37c72836d01 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index 28104f1111a..644352063b9 100644 Binary files a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7107140d10e..9dbd98d09a7 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index fcdfaf3c2ea..671cee24033 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png index f391289ef1b..09b291d3829 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7c8e6fccd51..1ffd8a71d1c 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 69a60bf60c3..2ed3be72597 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 81a409d852d..aec54176160 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7c8e6fccd51..1ffd8a71d1c 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 69a60bf60c3..2ed3be72597 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 81a409d852d..aec54176160 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png index b7cfec2f118..f30a7fbe1dd 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5b64bd43262..29d639de55f 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png index 83fd0048d87..0e12dbecad6 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9be8ceb108d..4aa030254d4 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index caa323f7209..f35d57b8926 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 6617bdde44f..bcf9b794b42 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9be8ceb108d..4aa030254d4 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index caa323f7209..f35d57b8926 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 6617bdde44f..bcf9b794b42 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index a3ef0af8dd6..5453fe2f693 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2bfb21d62da..544737212f6 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png index 3e9914db8d2..b8599390f97 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index ec81cfc7d5e..fca782da348 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index bc4f4ef3ad4..1798ec420a8 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 38271e01b17..c23e93463bd 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index ec81cfc7d5e..fca782da348 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index bc4f4ef3ad4..1798ec420a8 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 38271e01b17..c23e93463bd 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8f1b29e6b5b..7b72dbed032 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index dc865e89e1d..4b752928635 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index da668e67f5a..1fc12039b36 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index a8b6e3c3104..335e6ba65b0 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9211b6c22f7..d0354bba73a 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index b04650787c9..efa61f3c9f8 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7b3ba4b7fbf..bb0b83fdad6 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index da4eb5bfe40..fdb383547b8 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index 09b890d0dc7..911fdb8dc38 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index f829ca42ffd..18420957f07 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8e307a39a1a..0464ad7ec67 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png index eb0929c613a..bfc72642a42 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/textarea.common.scss b/core/src/components/textarea/textarea.common.scss index e25866fbe36..b1ff7de5bcf 100644 --- a/core/src/components/textarea/textarea.common.scss +++ b/core/src/components/textarea/textarea.common.scss @@ -539,6 +539,18 @@ opacity: 1; } +/** + * When the rows attribute is set, the textarea should not force a min-height, + * but rather respect the natural height of the textarea, especially when + * rows is set to 1. + */ + :host(.textarea-fill-solid[rows]), + :host(.textarea-fill-outline[rows]), + :host(.textarea-label-placement-stacked[rows]), + :host(.textarea-label-placement-floating[rows]) { + min-height: auto; +} + // Start / End Slots // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss index c18190b4363..801f34d6f12 100644 --- a/core/src/components/textarea/textarea.ionic.outline.scss +++ b/core/src/components/textarea/textarea.ionic.outline.scss @@ -53,13 +53,6 @@ border-top: none; } -// Textarea Fill: Outline, Native Textarea -// ---------------------------------------------------------------- - -:host(.textarea-fill-outline) textarea { - margin-top: globals.$ion-space-100; -} - // Focus // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss index d3b16190fbb..f3070f39076 100644 --- a/core/src/components/textarea/textarea.ionic.scss +++ b/core/src/components/textarea/textarea.ionic.scss @@ -38,8 +38,6 @@ --padding-end: #{globals.$ion-space-300}; --padding-bottom: #{globals.$ion-space-200}; --padding-start: #{globals.$ion-space-300}; - - min-height: globals.$ion-scale-2800; } :host(.textarea-size-medium) .textarea-wrapper-inner { @@ -47,8 +45,6 @@ --padding-end: #{globals.$ion-space-400}; --padding-bottom: #{globals.$ion-space-300}; --padding-start: #{globals.$ion-space-400}; - - min-height: globals.$ion-scale-3400; } :host(.textarea-size-large) .textarea-wrapper-inner { @@ -56,8 +52,31 @@ --padding-end: #{globals.$ion-space-500}; --padding-bottom: #{globals.$ion-space-400}; --padding-start: #{globals.$ion-space-500}; +} + +// When the rows attribute is set, the container of the textarea should +// increase in height to accommodate the number of rows. +:host([rows]) .textarea-wrapper-inner { + /** + * Clamp the minimum value to 1 to prevent 0 or negative heights. + * Add 0.5 to show a half-line peek at the next row. + */ + --number-rows: calc(max(var(--host-rows, 1), 1) + 0.5); + + /** + * Calculate the minimum height for the textarea container based on the number of rows. + * - $textarea-row-line-height: Approximate height of a single line based on + * the browser's default line-height: normal (~1.2 × font-size). + * - (var(--number-rows) + 0.5): Show the requested rows plus a half-line peek + * at the next row, hinting that the textarea is scrollable. + * - var(--padding-top), var(--border-width): Account for + * box-sizing: border-box, which includes padding and border in min-height. + */ + $textarea-row-line-height: 1.2em; - min-height: globals.$ion-scale-3600; + min-height: calc( + var(--number-rows) * #{$textarea-row-line-height} + var(--padding-top, 0px) + var(--border-width, 0px) + ); } // Ionic Textarea Shapes @@ -83,19 +102,36 @@ } .textarea-wrapper-inner { - @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + @include globals.padding(0, var(--padding-end), 0, var(--padding-start)); +} + +/** + * Top and bottom padding are on the textarea so that when scrolling, + * text can scroll behind the outline borders. When at rest at top or bottom, + * the text is not glued to the outline lines. + */ +.textarea-wrapper-inner .native-textarea { + padding-top: var(--padding-top); + padding-bottom: var(--padding-bottom); } // Textarea Auto Grow // ---------------------------------------------------------------- +// In the Ionic theme, padding is on the textarea. The ::after in common.scss +// has matching padding so the auto-grow height calculation is correct. + // The height should be auto only when auto-grow is enabled. +// If rows is not set, the height should be auto. +:host(:not([rows])) .textarea-wrapper-inner, :host([auto-grow]) .textarea-wrapper-inner { height: auto; } // The min and max height should be inherited if auto-grow is enabled. // This allows the textarea to grow and shrink as needed. +// If rows is not set, the height should be auto. +:host(:not([rows])) .native-wrapper, :host([auto-grow]) .native-wrapper { min-height: inherit; max-height: inherit; @@ -276,3 +312,12 @@ ion-icon { min-width: $text-wrapper-width; max-width: globals.$ion-scale-5000; } + +/* + * As the ionic theme introduces padding in the textarea, + * there is no need to add margin-top to the textarea. + */ +:host(.textarea-label-placement-stacked) textarea, +:host(.textarea-label-placement-floating) textarea { + margin-top: 0; +} diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 0c5d19e5eb8..9dfafd5bb20 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -893,6 +893,10 @@ export class Textarea implements ComponentInterface { 'textarea-disabled': disabled, 'textarea-readonly': readonly, })} + // For ionic theme, we need to define this css variable + style={ + theme === 'ionic' ? { '--host-rows': this.rows !== undefined ? this.rows.toString() : undefined } : undefined + } > {/** * htmlFor is needed so that clicking the label always focuses