diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss index 711005b2306..3b33c393e5b 100644 --- a/core/src/components/item/item.ionic.scss +++ b/core/src/components/item/item.ionic.scss @@ -91,9 +91,25 @@ } } -// Item: Activated +// Item: Disabled // -------------------------------------------------- +:host(.item-disabled) { + cursor: default; + pointer-events: none; + + &::after { + @include globals.position(0, 0, 0, 0); + + position: absolute; + background: #{globals.$ionic-state-disabled}; + + content: ""; + } +} + +// Item: Activated +// -------------------------------------------------- :host(.ion-activated) .item-native { background: var(--background-activated); } diff --git a/core/src/components/item/test/disabled/item.e2e.ts b/core/src/components/item/test/disabled/item.e2e.ts index 3e37ac267e1..22c64215f85 100644 --- a/core/src/components/item/test/disabled/item.e2e.ts +++ b/core/src/components/item/test/disabled/item.e2e.ts @@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright'; /** * This behavior does not vary across directions */ -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('item: disabled state'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/item/test/disabled`, config); diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..79523eadcab Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b19723a3e87 Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c97d7fdf915 Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/theme-ionic/index.html b/core/src/components/item/test/theme-ionic/index.html index e77375bcd37..a9f3b5c77a3 100644 --- a/core/src/components/item/test/theme-ionic/index.html +++ b/core/src/components/item/test/theme-ionic/index.html @@ -135,28 +135,30 @@
Normal paragraph
Normal paragraph
Normal paragraph