javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(textarea): floating label with autogrow textareas (#24202)

Browse Source 
* fix(textarea): floating label with autogrow textareas

* test(textarea): autogrow visual diff tests
This commit is contained in:
Sean Perkins
2021-11-16 12:05:11 -05:00
committed by GitHub
parent 9cf7c89704
commit 713f0f5526
3 changed files with 75 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/item/item.md.scss
View File

@ -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) {

18
core/src/components/textarea/test/autogrow/e2e.ts Normal file
View File

@ -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();
}
});

56
core/src/components/textarea/test/autogrow/index.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Textarea - Autogrow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textarea - Autogrow</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-item>
<ion-label color="primary">Autogrow</ion-label>
<ion-textarea auto-grow="true"></ion-textarea>
</ion-item>
<ion-item fill="outline">
<ion-label color="primary" position="stacked">Autogrow w/ stacked label</ion-label>
<ion-textarea auto-grow="true" value=""></ion-textarea>
</ion-item>
<ion-item fill="outline">
<ion-label color="primary" position="floating">Autogrow w/ floating label</ion-label>
<ion-textarea auto-grow="true" value=""></ion-textarea>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
<script>
const textareas = document.querySelectorAll('ion-textarea');
textareas.forEach(textarea => {
textarea.value = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at rhoncus diam. Suspendisse lobortis dolor sit amet euismod ultrices. Nam accumsan fringilla quam. Aliquam erat volutpat. Suspendisse vel nisl orci. Nunc placerat metus id elit viverra, vel ultricies felis accumsan. Nullam aliquet vel turpis et iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.`;
});
</script>
</body>
</html>