From 713f0f55261205d3f7e25874939cb1f998f38d4a Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 16 Nov 2021 12:05:11 -0500 Subject: [PATCH] fix(textarea): floating label with autogrow textareas (#24202) * fix(textarea): floating label with autogrow textareas * test(textarea): autogrow visual diff tests --- core/src/components/item/item.md.scss | 2 +- .../components/textarea/test/autogrow/e2e.ts | 18 ++++++ .../textarea/test/autogrow/index.html | 56 +++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 core/src/components/textarea/test/autogrow/e2e.ts create mode 100644 core/src/components/textarea/test/autogrow/index.html diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index d65d1880ee..30ff73350b 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -463,7 +463,7 @@ :host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)), :host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)), :host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)) { - transform: translateY(-25%); + transform: translateY(-14px); } @media (any-hover: hover) { diff --git a/core/src/components/textarea/test/autogrow/e2e.ts b/core/src/components/textarea/test/autogrow/e2e.ts new file mode 100644 index 0000000000..5cdfb79419 --- /dev/null +++ b/core/src/components/textarea/test/autogrow/e2e.ts @@ -0,0 +1,18 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('textarea: autogrow', async () => { + const page = await newE2EPage({ + url: '/src/components/textarea/test/autogrow?ionic:_testing=true' + }); + + const compares = []; + + compares.push(await page.compareScreenshot()); + + await page.waitForTimeout(250); + compares.push(await page.compareScreenshot('value changed')); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } +}); diff --git a/core/src/components/textarea/test/autogrow/index.html b/core/src/components/textarea/test/autogrow/index.html new file mode 100644 index 0000000000..f006f59231 --- /dev/null +++ b/core/src/components/textarea/test/autogrow/index.html @@ -0,0 +1,56 @@ + + + + + + Textarea - Autogrow + + + + + + + + + + + + + Textarea - Autogrow + + + + + + + + + Autogrow + + + + + Autogrow w/ stacked label + + + + + Autogrow w/ floating label + + + + + + + + + + + + +