Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
f436588
feat(textarea): fill and outline support
sean-perkins Jan 12, 2023
367c566
chore(): add updated snapshots
Ionitron Jan 17, 2023
05d15d8
refactor(textarea): align with input styles
liamdebeasi Jan 20, 2023
9944cca
fix(textarea): label position stays fixed to top of textarea
liamdebeasi Jan 20, 2023
04b64f0
fix(textarea): add correct spacing between label
liamdebeasi Jan 20, 2023
312c40c
fix(textarea): inline labels align with text, remove radius
liamdebeasi Jan 20, 2023
b5eaf9c
fix(textarea): add correct spacing in field and relative to label
liamdebeasi Jan 20, 2023
a1959f9
chore(): remove temp 100px
liamdebeasi Jan 20, 2023
f05cc61
chore(): add updated snapshots
Ionitron Jan 20, 2023
87814b1
fix(textarea): remove stretch styles, align to top
liamdebeasi Jan 23, 2023
6430997
chore(): remove 18px padding
liamdebeasi Jan 23, 2023
fde375d
fix(textarea): label and textarea are aligned
liamdebeasi Jan 23, 2023
90261ac
fix padding/height
liamdebeasi Jan 23, 2023
ece3f43
chore(): add updated snapshots
Ionitron Jan 23, 2023
f93bd82
Revert "chore(): add updated snapshots"
liamdebeasi Jan 23, 2023
2c2a742
revert height change
liamdebeasi Jan 23, 2023
09eb8de
chore(): add updated snapshots
Ionitron Jan 23, 2023
b0206f6
remove old height change
liamdebeasi Jan 23, 2023
4d8b0c4
revert datetime diff
liamdebeasi Jan 23, 2023
deacd6b
fix compat issues, apply padding to label and textarea
liamdebeasi Jan 23, 2023
87eb7d5
fix(textarea): label color and focus highlight
sean-perkins Jan 23, 2023
166b7a2
chore(): add updated snapshots
Ionitron Jan 23, 2023
ef4ee31
chore(): add updated snapshots
Ionitron Jan 23, 2023
0d8de9c
Merge remote-tracking branch 'origin/FW-2764-fill' into FW-2764-color
sean-perkins Jan 23, 2023
a842a78
test: skip flaky test
sean-perkins Jan 23, 2023
2379a87
chore: remove color inherit
sean-perkins Jan 24, 2023
b3b14f8
fix(textarea): caret color
sean-perkins Jan 24, 2023
e86838c
Merge remote-tracking branch 'origin/FW-2764' into FW-2764-color
sean-perkins Jan 24, 2023
20df24d
chore(): add updated snapshots
Ionitron Jan 24, 2023
edad3b9
chore(): add updated snapshots
Ionitron Jan 24, 2023
2ea0409
Revert "chore(): add updated snapshots"
liamdebeasi Jan 24, 2023
22d4400
revert flaky datetime screenshot
liamdebeasi Jan 24, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion core/src/components/select/test/async/select.e2e.ts
Original file line number Diff line number Diff line change
@@ -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');

Expand Down
172 changes: 172 additions & 0 deletions core/src/components/textarea/test/color/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Textarea - Color</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(5, 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 - Color</ion-title>
</ion-toolbar>
</ion-header>

<ion-content id="content" class="ion-padding">
<h1>No Fill</h1>
<div class="grid">
<div class="grid-item">
<h2>Start</h2>
<ion-textarea value="hi@ionic.io" label="Email" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>End</h2>
<ion-textarea value="hi@ionic.io" label="Email" label-placement="end" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>Fixed</h2>
<ion-textarea value="hi@ionic.io" label="Email" label-placement="fixed" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>Floating</h2>
<ion-textarea label="Email" label-placement="floating" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>Stacked</h2>
<ion-textarea value="hi@ionic.io" label="Email" label-placement="stacked" color="danger"></ion-textarea>
</div>
</div>

<h1>Solid</h1>
<div class="grid">
<div class="grid-item">
<h2>Start</h2>
<ion-textarea fill="solid" value="hi@ionic.io" label="Email" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>End</h2>
<ion-textarea
fill="solid"
value="hi@ionic.io"
label="Email"
label-placement="end"
color="danger"
></ion-textarea>
</div>

<div class="grid-item">
<h2>Fixed</h2>
<ion-textarea
fill="solid"
value="hi@ionic.io"
label="Email"
label-placement="fixed"
color="danger"
></ion-textarea>
</div>

<div class="grid-item">
<h2>Floating</h2>
<ion-textarea fill="solid" label="Email" label-placement="floating" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>Stacked</h2>
<ion-textarea
fill="solid"
value="hi@ionic.io"
label="Email"
label-placement="stacked"
color="danger"
></ion-textarea>
</div>
</div>

<h1>Outline</h1>
<div class="grid">
<div class="grid-item">
<h2>Start</h2>
<ion-textarea fill="outline" value="hi@ionic.io" label="Email" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>End</h2>
<ion-textarea
fill="outline"
value="hi@ionic.io"
label="Email"
label-placement="end"
color="danger"
></ion-textarea>
</div>

<div class="grid-item">
<h2>Fixed</h2>
<ion-textarea
fill="outline"
value="hi@ionic.io"
label="Email"
label-placement="fixed"
color="danger"
></ion-textarea>
</div>

<div class="grid-item">
<h2>Floating</h2>
<ion-textarea fill="outline" label="Email" label-placement="floating" color="danger"></ion-textarea>
</div>

<div class="grid-item">
<h2>Stacked</h2>
<ion-textarea
fill="outline"
value="hi@ionic.io"
label="Email"
label-placement="stacked"
color="danger"
></ion-textarea>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>
173 changes: 173 additions & 0 deletions core/src/components/textarea/test/color/textarea.e2e.ts
Original file line number Diff line number Diff line change
@@ -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(`
<ion-textarea class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
`);

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(`
<ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
`);

const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot(
`textarea-outline-color-stacked-${page.getSnapshotSettings()}.png`
);
});
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading