javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(textarea): add correct state styles (#26676)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-24 21:56:34 -05:00
committed by GitHub
parent 8d3edd049d
commit 1e1d3fbddc
105 changed files with 832 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

455
core/src/components/textarea/test/highlight/index.html Normal file
View File

@@ -0,0 +1,455 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Textarea - Highlight</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>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}
@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textarea - Highlight</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding">
<h1>No Fill, Default</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
label-placement="start"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
label-placement="start"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
label-placement="start"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>No Fill, Floating</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
label-placement="floating"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
label-placement="floating"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
label-placement="floating"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>No Fill, Stacked</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
label-placement="stacked"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
label-placement="stacked"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
label-placement="stacked"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>Solid, Default</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
fill="solid"
label-placement="start"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
fill="solid"
label-placement="start"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
fill="solid"
label-placement="start"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>Solid, Floating</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
fill="solid"
label-placement="floating"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
fill="solid"
label-placement="floating"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
fill="solid"
label-placement="floating"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>Solid, Stacked</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
fill="solid"
label-placement="stacked"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
fill="solid"
label-placement="stacked"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
fill="solid"
label-placement="stacked"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>Outline, Default</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
fill="outline"
label-placement="start"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
fill="outline"
label-placement="start"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
fill="outline"
label-placement="start"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>Outline, Floating</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
fill="outline"
label-placement="floating"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
fill="outline"
label-placement="floating"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
fill="outline"
label-placement="floating"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
<h1>Outline, Stacked</h1>
<div class="grid">
<div class="grid-item">
<h2>Focus</h2>
<ion-textarea
fill="outline"
label-placement="stacked"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Valid</h2>
<ion-textarea
fill="outline"
label-placement="stacked"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Invalid</h2>
<ion-textarea
fill="outline"
label-placement="stacked"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>

164
core/src/components/textarea/test/highlight/textarea.e2e.ts Normal file
View File

@@ -0,0 +1,164 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('textarea: highlights', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
});
test.describe('textarea: no fill', () => {
test('should render valid state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
value="hi@ionic.io"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-no-fill-valid-${page.getSnapshotSettings()}.png`);
});
test('should render invalid state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
value="hi@ionic.io"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-no-fill-invalid-${page.getSnapshotSettings()}.png`);
});
test('should render focused state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-no-fill-focus-${page.getSnapshotSettings()}.png`);
});
});
test.describe('textarea: solid', () => {
test('should render valid state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
fill="solid"
value="hi@ionic.io"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-solid-valid-${page.getSnapshotSettings()}.png`);
});
test('should render invalid state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
fill="solid"
value="hi@ionic.io"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-solid-invalid-${page.getSnapshotSettings()}.png`);
});
test('should render focused state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
fill="solid"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-solid-focus-${page.getSnapshotSettings()}.png`);
});
});
test.describe('textarea: outline', () => {
test('should render valid state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
fill="outline"
value="hi@ionic.io"
class="ion-touched ion-valid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-outline-valid-${page.getSnapshotSettings()}.png`);
});
test('should render invalid state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
fill="outline"
value="hi@ionic.io"
class="ion-touched ion-invalid"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-outline-invalid-${page.getSnapshotSettings()}.png`);
});
test('should render focused state correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea
fill="outline"
value="hi@ionic.io"
class="has-focus"
label="Email"
error-text="Please enter a valid email"
helper-text="Enter an email"
counter="true"
maxlength="20"
></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-outline-focus-${page.getSnapshotSettings()}.png`);
});
});
});

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-focus-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-focus-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-focus-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-focus-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-focus-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-focus-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-invalid-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-no-fill-valid-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-focus-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-focus-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-focus-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-focus-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-focus-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-focus-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-invalid-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-invalid-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-invalid-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-invalid-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-invalid-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-invalid-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-outline-valid-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-focus-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-focus-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-focus-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-focus-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-focus-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-focus-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-invalid-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-invalid-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-invalid-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-invalid-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-invalid-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-invalid-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
core/src/components/textarea/test/highlight/textarea.e2e.ts-snapshots/textarea-solid-valid-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

73
core/src/components/textarea/test/item/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Textarea - Item</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>
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(250px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}
@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textarea - Item</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding" color="light">
<div class="grid">
<div class="grid-item">
<h2>Regular List</h2>
<ion-list>
<ion-item>
<ion-textarea label="Email"></ion-textarea>
</ion-item>
</ion-list>
</div>
<div class="grid-item">
<h2>Inset List</h2>
<ion-list inset="true">
<ion-item>
<ion-textarea label="Email"></ion-textarea>
</ion-item>
<ion-item>
<ion-textarea label="Email"></ion-textarea>
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>

39
core/src/components/textarea/test/item/textarea.e2e.ts Normal file
View File

@@ -0,0 +1,39 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('textarea: item', () => {
test('should render correctly in list with no fill', async ({ page }) => {
await page.setContent(`
<ion-list>
<ion-item>
<ion-textarea
label="Email"
value="hi@ionic.io"
helper-text="Enter your email"
maxlength="20"
counter="true"
></ion-textarea>
</ion-item>
</ion-list>
`);
const list = page.locator('ion-list');
expect(await list.screenshot()).toMatchSnapshot(`textarea-list-no-fill-${page.getSnapshotSettings()}.png`);
});
test('should render correctly in inset list with no fill', async ({ page }) => {
await page.setContent(`
<ion-list inset="true">
<ion-item>
<ion-textarea
label="Email"
value="hi@ionic.io"
helper-text="Enter your email"
maxlength="20"
counter="true"
></ion-textarea>
</ion-item>
</ion-list>
`);
const list = page.locator('ion-list');
expect(await list.screenshot()).toMatchSnapshot(`textarea-inset-list-no-fill-${page.getSnapshotSettings()}.png`);
});
});

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
core/src/components/textarea/test/item/textarea.e2e.ts-snapshots/textarea-list-no-fill-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-ios-ltr-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-ios-ltr-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-ios-rtl-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-ios-rtl-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-md-ltr-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 97 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-md-ltr-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-md-rtl-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 97 KiB

BIN
core/src/components/textarea/test/legacy/basic/textarea.e2e.ts-snapshots/textarea-diff-md-rtl-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

64
core/src/components/textarea/test/states/index.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Textarea - Disabled</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>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}
@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textarea - Disabled</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Readonly</h2>
<ion-textarea label="Email" value="hi@ionic.io" readonly="true"></ion-textarea>
</div>
<div class="grid-item">
<h2>Disabled</h2>
<ion-textarea label="Email" value="hi@ionic.io" disabled="true"></ion-textarea>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>

26
core/src/components/textarea/test/states/textarea.e2e.ts Normal file
View File

@@ -0,0 +1,26 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('textarea: states', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
});
test('should render readonly textarea correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea label="Email" value="hi@ionic.io" readonly="true"></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-readonly-${page.getSnapshotSettings()}.png`);
});
test('should render disabled textarea correctly', async ({ page }) => {
await page.setContent(`
<ion-textarea label="Email" value="hi@ionic.io" disabled="true"></ion-textarea>
`);
const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(`textarea-disabled-${page.getSnapshotSettings()}.png`);
});
});

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

Some files were not shown because too many files have changed in this diff Show More