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..3ede7a373cc 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..c28de3cd689 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..7da62ae4241 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..e4651afed0c 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..45ef4c31983 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..58118c3a415 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..1ba94d2e954 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..9df7ec60320 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..5dbae7c3b1c 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..4b3da88acdc 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..779bd7c51df 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..eaaffaeb675 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..f88eec6fb4e 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..55b4852ae2e 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..0766fe9898d 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..595c469c6a5 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..cbcb3bfdb23 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..77737a25eac 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..2c3ccf3549b --- /dev/null +++ b/core/src/components/textarea/test/rows/index.html @@ -0,0 +1,119 @@ + + + + + Textarea - Rows + + + + + + + + + + + + + + Textarea - Rows + + + + +
+ +
+

Rows: 1

+ +
+ +
+

Rows: 3

+ +
+ +
+

Rows: 8

+ +
+ + +
+

Rows: 3, Size Small

+ +
+ +
+

Rows: 3, Size Medium

+ +
+ +
+

Rows: 3, Size Large

+ +
+ + +
+

Rows: 3, Auto-grow

+ +
+
+
+
+ + 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..e7713dbedf6 --- /dev/null +++ b/core/src/components/textarea/test/rows/textarea.e2e.ts @@ -0,0 +1,88 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions + * This behavior only applies to the `ionic` theme. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: rows'), () => { + test('should respect rows attribute', async ({ page }) => { + await page.setContent( + ` +
+ + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows`)); + }); + + 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-sizes`)); + }); + + test('should respect rows when auto-grow is enabled', async ({ page }) => { + await page.setContent( + ` +
+ +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-autogrow`)); + }); + }); +}); diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..bcb6998c76a Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-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-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..edbd511467a Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-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-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e1e0bde964e Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-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-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b1694b69f31 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9ce22ad7195 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f383c8d7f18 Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7767a2a337e Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-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-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..dd27d0ba2da Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-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-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8e7e9e6d68b Binary files /dev/null and b/core/src/components/textarea/test/rows/textarea.e2e.ts-snapshots/textarea-rows-sizes-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..04c6ed80ddb 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..f0e1a627f05 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..fc6ef395ecd 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..d43bd1f71de 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..bdf3e0aaea1 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..03ade6b3289 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..04c6ed80ddb 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..f0e1a627f05 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..fc6ef395ecd 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..64eaea7520f 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..06450f761af 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..be4ad92828a 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..1201845351d 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..e3e6dc20922 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..3ef72bafc23 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..1201845351d 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..e3e6dc20922 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..3ef72bafc23 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..04c6ed80ddb 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..f0e1a627f05 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..fc6ef395ecd 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..04c6ed80ddb 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..f0e1a627f05 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..fc6ef395ecd 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..57888f187c1 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..c200bc08da2 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..0ba23bc1b18 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..57888f187c1 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..c200bc08da2 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..0ba23bc1b18 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..d4d008cf763 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..784db413bbc 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..2f0b07cd214 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..266a5b38763 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..c4abf02e416 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..df4f7b2f116 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..b2d4e3f66dd 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..8ad269eb0ee 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..859091b85c4 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..ea8bda99776 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..41ebf6bd7d8 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..f6f2f80ab32 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.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..4ceb6379036 100644 --- a/core/src/components/textarea/textarea.ionic.scss +++ b/core/src/components/textarea/textarea.ionic.scss @@ -27,19 +27,11 @@ // Ionic Textarea Sizes // -------------------------------------------------- -// Setting height to 0 allows it to collapse in height -// instead of growing above the min height by default. -.textarea-wrapper-inner { - height: 0; -} - :host(.textarea-size-small) .textarea-wrapper-inner { --padding-top: #{globals.$ion-space-200}; --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 +39,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 +46,13 @@ --padding-end: #{globals.$ion-space-500}; --padding-bottom: #{globals.$ion-space-400}; --padding-start: #{globals.$ion-space-500}; +} - min-height: globals.$ion-scale-3600; +// Native Textarea +// -------------------------------------------------- + +:host .native-wrapper::after { + @include globals.padding(0); } // Ionic Textarea Shapes @@ -75,17 +70,6 @@ --border-radius: #{globals.$ion-rectangular-xl}; } -// Textarea Wrapper -// ---------------------------------------------------------------- - -.textarea-wrapper { - gap: globals.$ion-space-100; -} - -.textarea-wrapper-inner { - @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); -} - // Textarea Auto Grow // ---------------------------------------------------------------- @@ -101,36 +85,54 @@ max-height: inherit; } -// Textarea Label +// Textarea Wrapper // ---------------------------------------------------------------- -.label-text-wrapper { - @include globals.typography(globals.$ion-body-sm-medium); - - max-width: globals.$ion-scale-5000; +.textarea-wrapper { + gap: globals.$ion-space-100; +} - transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive, - transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive; +.textarea-wrapper-inner { + @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); +} - color: globals.$ion-text-subtle; +:host([rows]:not([auto-grow])) .textarea-wrapper-inner { + @include globals.padding(0, var(--padding-end), 0, var(--padding-start)); } -:host(.label-floating) .label-text-wrapper { - @include globals.transform(none); +/** + * Top and bottom padding are applied to ensure that text remains visible + * as it scrolls past the container boundaries. This provides a "sneak peek" + * of the content transitioning off-screen, mirroring native textarea behavior + * where text isn't immediately clipped or "glued" to the border at the + * scroll limits. + */ +:host([rows]:not([auto-grow])) .textarea-wrapper-inner .native-textarea { + padding-top: var(--padding-top); + padding-bottom: var(--padding-bottom); } -// Textarea Slotted Content +// Textarea Highlight // ---------------------------------------------------------------- -ion-icon { - --color: globals.$ion-icon-subtlest; - - font-size: globals.$ion-scale-400; +:host(.has-focus.ion-valid), +:host(.ion-touched.ion-invalid) { + --border-width: #{globals.$ion-border-size-025}; } -.start-slot-wrapper, -.end-slot-wrapper { - margin-top: globals.$ion-space-050; +.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 Bottom Content @@ -154,27 +156,83 @@ ion-icon { color: var(--highlight-color-valid); } -:host(.has-focus.ion-valid), -:host(.ion-touched.ion-invalid) { - --border-width: #{globals.$ion-border-size-025}; +// Textarea Label +// ---------------------------------------------------------------- + +.label-text-wrapper { + @include globals.typography(globals.$ion-body-sm-medium); + + max-width: globals.$ion-scale-5000; + + transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive, + transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive; + + color: globals.$ion-text-subtle; } -// Textarea Highlight +:host(.label-floating) .label-text-wrapper { + @include globals.transform(none); +} + +/** + * This makes the label sit above the textarea. + */ +:host(.label-floating) .label-text-wrapper { + $form-control-label-stacked-scale: 0.75; + + /** + * Label text should not extend + * beyond the bounds of the textarea. + */ + max-width: calc(100% / #{$form-control-label-stacked-scale}); +} + +.textarea-wrapper textarea { + /** + * When the floating label appears on top of the + * textarea, we need to fade the textarea out so that the + * label does not overlap with the placeholder. + */ + transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive; +} + +// Textarea Label Placement - Fixed // ---------------------------------------------------------------- -.textarea-highlight { - @include globals.position(null, null, -1px, 0); +/** + * Label is on the left of the textarea in LTR and + * on the right in RTL. Label also has a fixed width. + */ +:host(.textarea-label-placement-fixed) .label-text { + $text-wrapper-width: calc(globals.$ion-scale-2400 + globals.$ion-space-100); - position: absolute; + flex: 0 0 $text-wrapper-width; - width: 100%; - height: globals.$ion-border-size-050; + width: $text-wrapper-width; + min-width: $text-wrapper-width; + max-width: globals.$ion-scale-5000; +} - transform: scale(0); +// Textarea Slotted Content +// ---------------------------------------------------------------- - transition: transform globals.$ion-transition-time-200; +ion-icon { + --color: globals.$ion-icon-subtlest; - background: var(--border-color); + font-size: globals.$ion-scale-400; +} + +// Start / End Slots +// ---------------------------------------------------------------- + +.start-slot-wrapper, +.end-slot-wrapper { + margin-top: globals.$ion-space-050; +} + +:host([rows]:not([auto-grow])) .start-slot-wrapper, +:host([rows]:not([auto-grow])) .end-slot-wrapper { + @include globals.padding(var(--padding-top), 0, var(--padding-bottom), 0); } // Textarea Focus @@ -237,42 +295,3 @@ ion-icon { :host(.textarea-readonly) { --background: #{globals.$ion-bg-input-read-only}; } - -/** - * This makes the label sit above the textarea. - */ -:host(.label-floating) .label-text-wrapper { - $form-control-label-stacked-scale: 0.75; - - /** - * Label text should not extend - * beyond the bounds of the textarea. - */ - max-width: calc(100% / #{$form-control-label-stacked-scale}); -} - -.textarea-wrapper textarea { - /** - * When the floating label appears on top of the - * textarea, we need to fade the textarea out so that the - * label does not overlap with the placeholder. - */ - transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive; -} - -// Textarea Label Placement - Fixed -// ---------------------------------------------------------------- - -/** - * Label is on the left of the textarea in LTR and - * on the right in RTL. Label also has a fixed width. - */ -:host(.textarea-label-placement-fixed) .label-text { - $text-wrapper-width: calc(globals.$ion-scale-2400 + globals.$ion-space-100); - - flex: 0 0 $text-wrapper-width; - - width: $text-wrapper-width; - min-width: $text-wrapper-width; - max-width: globals.$ion-scale-5000; -}