diff --git a/core/src/components/select/test/async/select.e2e.ts b/core/src/components/select/test/async/select.e2e.ts index 8db1aa8966f..83004222c44 100644 --- a/core/src/components/select/test/async/select.e2e.ts +++ b/core/src/components/select/test/async/select.e2e.ts @@ -1,7 +1,8 @@ import { expect } from '@playwright/test'; import { test } from '@utils/test/playwright'; -test.describe('select: async', () => { +// TODO: This test is extremely flaky +test.skip('select: async', () => { test('should correctly set the value after a delay', async ({ page, skip }) => { skip.rtl('This is checking internal logic. RTL tests are not needed'); diff --git a/core/src/components/textarea/test/color/index.html b/core/src/components/textarea/test/color/index.html new file mode 100644 index 00000000000..8bbbe076456 --- /dev/null +++ b/core/src/components/textarea/test/color/index.html @@ -0,0 +1,172 @@ + + + + + Textarea - Color + + + + + + + + + + + + + + Textarea - Color + + + + +

No Fill

+
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Stacked

+ +
+
+ +

Solid

+
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Stacked

+ +
+
+ +

Outline

+
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Stacked

+ +
+
+
+
+ + diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts b/core/src/components/textarea/test/color/textarea.e2e.ts new file mode 100644 index 00000000000..adf909b1646 --- /dev/null +++ b/core/src/components/textarea/test/color/textarea.e2e.ts @@ -0,0 +1,173 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('textarea: color', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + skip.mode( + 'ios', + 'iOS does not have any color theming besides the caret which cannot be captured in a stable manner in screenshots.' + ); + }); + + /** + * Manually setting the .has-focus class + * lets us quickly test the rendering of a + * focused textarea without need to wait for + * focus events. + */ + test.describe('textarea: fill none', () => { + test('should set label and highlight color on focus with start label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-no-fill-color-start-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with end label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-no-fill-color-end-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with fixed label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-no-fill-color-fixed-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with floating label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-no-fill-color-floating-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with stacked label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-no-fill-color-stacked-${page.getSnapshotSettings()}.png` + ); + }); + }); + test.describe('textarea: fill solid', () => { + test('should set label and highlight color on focus with start label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-solid-color-start-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with end label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot(`textarea-solid-color-end-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with fixed label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-solid-color-fixed-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with floating label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-solid-color-floating-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with stacked label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-solid-color-stacked-${page.getSnapshotSettings()}.png` + ); + }); + }); + test.describe('textarea: fill outline', () => { + test('should set label and highlight color on focus with start label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-outline-color-start-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with end label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-outline-color-end-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with fixed label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-outline-color-fixed-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with floating label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-outline-color-floating-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with stacked label placement', async ({ page }) => { + await page.setContent(` + + `); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + `textarea-outline-color-stacked-${page.getSnapshotSettings()}.png` + ); + }); + }); +}); diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..74e276892b4 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..04d68567554 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dfc84fa7e1b Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7288bc1cd2c Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0a1bc29f761 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..56208a85a1b Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d2513174315 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c4e50b9b884 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d9caf0a3341 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d2513174315 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c4e50b9b884 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d9caf0a3341 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2df0a89a376 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c6929b50184 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..47a3bdc9203 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..bf84245f351 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c91cf4a7cf8 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7f8a5d13f0d Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cff62379d0f Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9fe197a8bad Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a224032c6ee Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..03106e1a6c4 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9a625c4d425 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..369b6496630 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..03106e1a6c4 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9a625c4d425 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..369b6496630 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..559a472cb14 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f46b43ecbc0 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2210f6e5b0 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..250cb58dab7 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a0f6a5a811f Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d2606aa1c0d Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..83489e2347a Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6f51bafc270 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f78387d1955 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..85767be0b1c Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c9cedc0023 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e566c4a8f84 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..85767be0b1c Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c9cedc0023 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e566c4a8f84 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1cb01ca016d Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..de3003b82c5 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..763c3900a85 Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png index bd125a30566..ba7edf7a522 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png index 8c6363fff28..bdb6a82b213 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png index aaaeec5b839..b9b3b0b272b 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png index c13cfd2b2f4..843ea1a83e1 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png index 99f68daa69c..ff1bed5bf86 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png index ac4a5c9314d..3d5ac52bebb 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss index c49201810f6..cb83901d72c 100644 --- a/core/src/components/textarea/textarea.md.scss +++ b/core/src/components/textarea/textarea.md.scss @@ -56,6 +56,56 @@ --padding-top: 0px; } +// Textarea Label +// ---------------------------------------------------------------- + +/** + * When the textarea is focused the label should + * take on the highlight color. This should + * only apply to floating or stacked labels. + */ +:host(.textarea-label-placement-floating.has-focus) .label-text-wrapper, +:host(.textarea-label-placement-stacked.has-focus) .label-text-wrapper { + color: var(--highlight-color); +} + +:host(.textarea-label-placement-floating.ion-touched.ion-valid) .label-text-wrapper, +:host(.textarea-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper, +:host(.textarea-label-placement-stacked.ion-touched.ion-valid) .label-text-wrapper, +:host(.textarea-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper { + color: var(--highlight-color); +} + +// Textarea Highlight +// ---------------------------------------------------------------- + +.textarea-highlight { + @include position(null, null, -1px, 0); + + position: absolute; + + width: 100%; + height: 2px; + + transform: scale(0); + + transition: transform 200ms; + + background: var(--highlight-color); +} + +:host(.has-focus) .textarea-highlight { + transform: scale(1); +} + +/** + * Adjust the highlight up by 1px + * so it is not cut off by the + * the item's line (if one is present). + */ +:host(.in-item) .textarea-highlight { + @include position(null, null, 0, 0); +} // Textarea Shape Rounded // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index 172529d01ac..bc6a6f14617 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -75,12 +75,14 @@ white-space: pre-wrap; } -:host(.ion-color) { - background: initial; +:host(.legacy-textarea.ion-color) { + color: current-color(base); } :host(.ion-color) { - color: current-color(base); + --highlight-color-focused: #{current-color(base)}; + + background: initial; } // Textarea Within An Item @@ -271,6 +273,13 @@ height: 100%; } +// Textarea Native +// ---------------------------------------------------------------- + +:host(.has-focus) textarea { + caret-color: var(--highlight-color); +} + .native-wrapper textarea { @include padding(var(--padding-top), 0px, var(--padding-bottom), 0px); } diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 64d44819390..2413a5def6c 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -600,6 +600,7 @@ For textareas that do not have a visible label, developers should use "aria-labe const { inputId, disabled, fill, shape, labelPlacement } = this; const mode = getIonMode(this); const value = this.getValue(); + const shouldRenderHighlight = mode === 'md' && fill !== 'outline'; return ( + {shouldRenderHighlight &&
} {this.renderBottomContent()}