diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index f65719bb3b..4e1ab93adf 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -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 // -------------------------------------------------- diff --git a/core/src/components/item/test/fill/index.html b/core/src/components/item/test/fill/index.html index 678f577cc7..174fb20f94 100644 --- a/core/src/components/item/test/fill/index.html +++ b/core/src/components/item/test/fill/index.html @@ -56,6 +56,7 @@ Helper Text + Error Text @@ -83,6 +84,33 @@ Helper Text + Error Text + + + + + + + Focused + + Helper Text + Error Text + + + + + Focused: Invalid + + Helper Text + Error Text + + + + + Focused: Valid + + Helper Text + Error Text @@ -96,6 +124,7 @@ Standard Helper Text + Error Text @@ -104,6 +133,7 @@ Standard Helper Text + Error Text @@ -112,6 +142,7 @@ Helper Text + Error Text @@ -139,6 +170,33 @@ Helper Text + Error Text + + + + + + + Focused + + Helper Text + Error Text + + + + + Focused: Invalid + + Helper Text + Error Text + + + + + Focused: Valid + + Helper Text + Error Text @@ -152,6 +210,7 @@ Standards Helper Text + Error Text @@ -160,6 +219,7 @@ Standard Helper Text + Error Text @@ -168,6 +228,7 @@ Helper Text + Error Text @@ -195,6 +256,33 @@ Helper Text + Error Text + + + + + + + Focused + + Helper Text + Error Text + + + + + Focused: Invalid + + Helper Text + Error Text + + + + + Focused: Valid + + Helper Text + Error Text @@ -208,6 +296,7 @@ Standard Helper Text + Error Text @@ -216,6 +305,7 @@ Standard Helper Text + Error Text @@ -224,6 +314,7 @@ Helper Text + Error Text @@ -251,6 +342,33 @@ Helper Text + Error Text + + + + + + + Focused + + Helper Text + Error Text + + + + + Focused: Invalid + + Helper Text + Error Text + + + + + Focused: Valid + + Helper Text + Error Text @@ -263,18 +381,44 @@ Helper Text + Error Text Helper Text + Error Text Helper Text + Error Text + + + + + + + + Helper Text + Error Text + + + + + + Helper Text + Error Text + + + + + + Helper Text + Error Text @@ -287,18 +431,44 @@ Helper Text + Error Text Helper Text + Error Text Helper Text + Error Text + + + + + + + + Helper Text + Error Text + + + + + + Helper Text + Error Text + + + + + + Helper Text + Error Text @@ -312,6 +482,7 @@ Standard Helper Text + Error Text @@ -319,6 +490,7 @@ Standard Helper Text + Error Text @@ -326,6 +498,7 @@ Standard Helper Text + Error Text @@ -335,6 +508,7 @@ Standard Helper Text + Error Text @@ -342,6 +516,7 @@ Standard Helper Text + Error Text @@ -349,6 +524,7 @@ Standard Helper Text + Error Text @@ -361,18 +537,21 @@ Helper Text + Error Text Helper Text + Error Text Helper Text + Error Text @@ -424,6 +603,7 @@ Standard Helper Text + Error Text @@ -436,18 +616,44 @@ Helper Text + Error Text Helper Text + Error Text Helper Text + Error Text + + + + + + + + Helper Text + Error Text + + + + + + Helper Text + Error Text + + + + + + Helper Text + Error Text diff --git a/core/src/components/item/test/fill/item.e2e.ts b/core/src/components/item/test/fill/item.e2e.ts new file mode 100644 index 0000000000..76aa764e5e --- /dev/null +++ b/core/src/components/item/test/fill/item.e2e.ts @@ -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`); + }); +}); diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..013fe20ed2 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c64ffbf7a9 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..88370244e0 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..912b47ee36 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0c3cd72b89 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3df7e57416 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..71a2a3b2b1 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..44ec1bff0c Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e1d3bc41d5 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..986ac472e4 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4d5c4f7aa3 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d59a2f1b83 Binary files /dev/null and b/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/highlight/index.html b/core/src/components/item/test/highlight/index.html new file mode 100644 index 0000000000..4595827ad4 --- /dev/null +++ b/core/src/components/item/test/highlight/index.html @@ -0,0 +1,208 @@ + + + + + Item - Highlight + + + + + + + + + + + + + + + Item - Highlight + + + + +

Default: focused

+ + + + + Standard + + Helper Text + Error Text + + + + + + Standard + + Helper Text + Error Text + + + + + Standard + + + Helper Text + + + + + + + Standard + + Helper Text + Error Text + + + + + + Standard + + Helper Text + Error Text + + + + + Standard + + + Helper Text + + + + + +

Custom: focused

+ + + + + Standard + + Helper Text + Error Text + + + + + + Standard + + Helper Text + Error Text + + + + + Standard + + + Helper Text + + + + + + + Standard + + Helper Text + Error Text + + + + + + Standard + + Helper Text + Error Text + + + + + Standard + + + Helper Text + + + + + +

Custom: full lines, focused

+ + + + + Standard + + Helper Text + Error Text + + + + + + Standard + + Helper Text + Error Text + + + + + Standard + + + Helper Text + + + + + + + Standard + + Helper Text + Error Text + + + + + + Standard + + Helper Text + Error Text + + + + + Standard + + + Helper Text + + + + + + + + diff --git a/core/src/components/item/test/highlight/item.e2e.ts b/core/src/components/item/test/highlight/item.e2e.ts new file mode 100644 index 0000000000..29a64ab859 --- /dev/null +++ b/core/src/components/item/test/highlight/item.e2e.ts @@ -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`); + }); +}); diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c61f2eaf8a Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..75313de3ad Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c6d13eb9db Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9707c42c7f Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..116bd8105a Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c88439375b Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4f6fde2802 Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3e89b64e6b Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1a9ccced91 Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bfea9b945f Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..af073d4632 Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b52ad78ada Binary files /dev/null and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png differ