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(item): show the highlight on iOS when --highlight-height is set (#25905)

Browse Source
This commit is contained in:
Brandy Carney
2022-09-16 12:33:38 -04:00
committed by GitHub
parent 6cb5827d06
commit d7db1333f1
29 changed files with 477 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
core/src/components/item/item.scss
View File

@@ -403,6 +403,45 @@ button, a {
--inset-highlight-height: #{calc(var(--highlight-height) * var(--show-inset-highlight))};
}
:host(.ion-focused) .item-highlight,
:host(.ion-focused) .item-inner-highlight,
:host(.item-has-focus) .item-highlight,
:host(.item-has-focus) .item-inner-highlight {
transform: scaleX(1);
border-style: var(--border-style);
border-color: var(--highlight-background);
}
:host(.ion-focused) .item-highlight,
:host(.item-has-focus) .item-highlight {
border-width: var(--full-highlight-height);
opacity: var(--show-full-highlight);
}
:host(.ion-focused) .item-inner-highlight,
:host(.item-has-focus) .item-inner-highlight {
border-bottom-width: var(--inset-highlight-height);
opacity: var(--show-inset-highlight);
}
:host(.ion-focused.item-fill-solid) .item-highlight,
:host(.item-has-focus.item-fill-solid) .item-highlight {
border-width: calc(var(--full-highlight-height) - 1px);
}
:host(.ion-focused) .item-inner-highlight,
:host(.ion-focused:not(.item-fill-outline)) .item-highlight,
:host(.item-has-focus) .item-inner-highlight,
:host(.item-has-focus:not(.item-fill-outline)) .item-highlight {
border-top: none;
border-right: none;
border-left: none;
}
// Item Input Focus
// --------------------------------------------------

206
core/src/components/item/test/fill/index.html
View File

@@ -56,6 +56,7 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -83,6 +84,33 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item fill="solid" class="item-has-focus">
<ion-label position="floating">Focused</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="solid" class="item-has-focus ion-invalid">
<ion-label position="floating">Focused: Invalid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="solid" class="item-has-focus ion-valid">
<ion-label position="floating">Focused: Valid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -96,6 +124,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -104,6 +133,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -112,6 +142,7 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -139,6 +170,33 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="item-has-focus" fill="solid" shape="round">
<ion-label position="floating">Focused</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus ion-invalid" fill="solid" shape="round">
<ion-label position="floating">Focused: Invalid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus ion-valid" fill="solid" shape="round">
<ion-label position="floating">Focused: Valid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -152,6 +210,7 @@
<ion-label position="floating">Standards</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -160,6 +219,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -168,6 +228,7 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -195,6 +256,33 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="item-has-focus" fill="outline">
<ion-label position="floating">Focused</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus ion-invalid" fill="outline">
<ion-label position="floating">Focused: Invalid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus ion-valid" fill="outline">
<ion-label position="floating">Focused: Valid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -208,6 +296,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -216,6 +305,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -224,6 +314,7 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -251,6 +342,33 @@
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="item-has-focus" fill="outline" shape="round">
<ion-label position="floating">Focused</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus ion-invalid" fill="outline" shape="round">
<ion-label position="floating">Focused: Invalid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus ion-valid" fill="outline" shape="round">
<ion-label position="floating">Focused: Valid</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -263,18 +381,44 @@
<ion-item fill="solid">
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline">
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round">
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item fill="solid" class="item-has-focus">
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" class="item-has-focus">
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round" class="item-has-focus">
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -287,18 +431,44 @@
<ion-item fill="solid" counter="true">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" counter="true">
<ion-input value="Has Initial Value" maxlength="20"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round" counter="true">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item fill="solid" counter="true" class="item-has-focus">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" counter="true" class="item-has-focus">
<ion-input value="Has Initial Value" maxlength="20"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round" counter="true" class="item-has-focus">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -312,6 +482,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -319,6 +490,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -326,6 +498,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -335,6 +508,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-textarea maxlength="100"></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -342,6 +516,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-textarea value="Has Initial Value" maxlength="100"></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
@@ -349,6 +524,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-textarea maxlength="100"></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -361,18 +537,21 @@
<ion-item fill="solid">
<ion-textarea></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline">
<ion-textarea value="Has Initial Value"></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round">
<ion-textarea></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -424,6 +603,7 @@
<ion-label position="floating">Standard</ion-label>
<ion-textarea maxlength="100"></ion-textarea>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
@@ -436,18 +616,44 @@
<ion-item fill="solid" counter="true">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" counter="true">
<ion-input value="Has Initial Value" maxlength="20"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round" counter="true">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item fill="solid" counter="true" class="item-has-focus">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" counter="true" class="item-has-focus">
<ion-input value="Has Initial Value" maxlength="20"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item fill="outline" shape="round" counter="true" class="item-has-focus">
<ion-input maxlength="10"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
</ion-row>

12
core/src/components/item/test/fill/item.e2e.ts Normal file
View File

@@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('item: fill', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/fill`);
await page.setIonViewport();
expect(await page.screenshot()).toMatchSnapshot(`item-fill-diff-${page.getSnapshotSettings()}.png`);
});
});

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 552 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 546 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 669 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 639 KiB

208
core/src/components/item/test/highlight/index.html Normal file
View File

@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Item - Highlight</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<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>
<style>
.custom ion-item {
--highlight-height: 4px;
}
</style>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Item - Highlight</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding">
<p>Default: focused</p>
<ion-grid>
<ion-row>
<ion-col>
<ion-item class="item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus">
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="ion-invalid item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="ion-invalid item-has-focus">
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="ion-valid item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<p>Custom: focused</p>
<ion-grid class="custom">
<ion-row>
<ion-col>
<ion-item class="item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus">
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item class="ion-invalid item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="ion-invalid item-has-focus">
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item class="ion-valid item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<p>Custom: full lines, focused</p>
<ion-grid class="custom">
<ion-row>
<ion-col>
<ion-item lines="full" class="item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item lines="full" class="item-has-focus">
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item lines="full" class="item-has-focus">
<ion-label position="floating">Standard</ion-label>
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item lines="full" class="item-has-focus ion-invalid">
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item lines="full" class="item-has-focus ion-invalid">
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
<ion-label position="floating">Standard</ion-label>
<ion-input value="Has Initial Value"></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
<ion-note slot="error">Error Text</ion-note>
</ion-item>
</ion-col>
<ion-col>
<ion-item lines="full" class="item-has-focus ion-valid">
<ion-label position="floating">Standard</ion-label>
<ion-icon slot="end" name="trash"></ion-icon>
<ion-input></ion-input>
<ion-note slot="helper">Helper Text</ion-note>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-app>
</body>
</html>

12
core/src/components/item/test/highlight/item.e2e.ts Normal file
View File

@@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('item: highlight', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/highlight`);
await page.setIonViewport();
expect(await page.screenshot()).toMatchSnapshot(`item-highlight-diff-${page.getSnapshotSettings()}.png`);
});
});

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB