diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index f25ac50790..9d3b980fa0 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -405,6 +405,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
...createColorClasses(this.color, {
item: true,
[mode]: true,
+ 'item-lines-default': lines === undefined,
[`item-lines-${lines}`]: lines !== undefined,
[`item-fill-${fillValue}`]: true,
[`item-shape-${shape}`]: shape !== undefined,
diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss
index b3a88c8bee..c0863aa7f9 100644
--- a/core/src/components/list/list.ios.scss
+++ b/core/src/components/list/list.ios.scss
@@ -19,11 +19,6 @@
@include border-radius($list-inset-ios-border-radius);
}
-.list-ios.list-inset ion-item {
- --border-width: 0 0 1px 0;
- --inner-border-width: 0;
-}
-
.list-ios.list-inset ion-item:last-child {
--border-width: 0;
--inner-border-width: 0;
@@ -38,49 +33,27 @@
// iOS No Lines List
// --------------------------------------------------
-.list-ios-lines-none .item {
- --border-width: 0;
- --inner-border-width: 0;
+.list-ios-lines-none .item-lines-default {
+ --inner-border-width: 0px;
+ --border-width: 0px;
}
// iOS Full Lines List
// --------------------------------------------------
-.list-ios-lines-full .item,
-.list-ios .item-lines-full {
+.list-ios-lines-full .item-lines-default {
+ --inner-border-width: 0px;
--border-width: #{0 0 $list-ios-item-border-bottom-width 0};
}
-.list-ios-lines-full .item {
- --inner-border-width: 0;
-}
-
-
// iOS Inset Lines List
// --------------------------------------------------
-.list-ios-lines-inset .item,
-.list-ios .item-lines-inset {
+.list-ios-lines-inset .item-lines-default {
--inner-border-width: #{0 0 $list-ios-item-border-bottom-width 0};
+ --border-width: 0px;
}
-// Remove the border from items in lists
-// if they are explicitly styled by the item
-// to be different than the list
-.list-ios .item-lines-inset {
- --border-width: 0;
-}
-
-.list-ios .item-lines-full {
- --inner-border-width: 0;
-}
-
-.list-ios .item-lines-none {
- --border-width: 0;
- --inner-border-width: 0;
-}
-
-
// iOS List Inside A Card
// --------------------------------------------------
diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss
index ccb58490a7..2c5d896726 100644
--- a/core/src/components/list/list.md.scss
+++ b/core/src/components/list/list.md.scss
@@ -15,7 +15,6 @@
@include position-horizontal(0, null);
}
-
// Material Design Inset List
// --------------------------------------------------
@@ -34,11 +33,6 @@
--inner-border-width: 0;
}
-.list-md.list-inset .item-interactive {
- --padding-start: 0;
- --padding-end: 0;
-}
-
.list-md.list-inset + ion-list.list-inset {
@include margin(0, null, null, null);
}
@@ -47,49 +41,27 @@
// Material Design No Lines List
// --------------------------------------------------
-.list-md-lines-none .item {
- --border-width: 0;
- --inner-border-width: 0;
+.list-md-lines-none .item-lines-default {
+ --inner-border-width: 0px;
+ --border-width: 0px;
}
// Material Design Full Lines List
// --------------------------------------------------
-.list-md-lines-full .item,
-.list-md .item-lines-full {
+.list-md-lines-full .item-lines-default {
+ --inner-border-width: 0px;
--border-width: #{0 0 $list-md-item-border-bottom-width 0};
}
-.list-md-lines-full .item {
- --inner-border-width: 0;
-}
-
-
// Material Design Inset Lines List
// --------------------------------------------------
-.list-md-lines-inset .item,
-.list-md .item-lines-inset {
+.list-md-lines-inset .item-lines-default {
--inner-border-width: #{0 0 $list-md-item-border-bottom-width 0};
+ --border-width: 0px;
}
-// Remove the border from items in lists
-// if they are explicitly styled by the item
-// to be different than the list
-.list-md .item-lines-inset {
- --border-width: 0;
-}
-
-.list-md .item-lines-full {
- --inner-border-width: 0;
-}
-
-.list-md .item-lines-none {
- --border-width: 0;
- --inner-border-width: 0;
-}
-
-
// Material Design List Inside A Card
// --------------------------------------------------
diff --git a/core/src/components/list/test/inset/list.e2e.ts b/core/src/components/list/test/inset/list.e2e.ts
index 69ec0d9e91..7d3c0471c7 100644
--- a/core/src/components/list/test/inset/list.e2e.ts
+++ b/core/src/components/list/test/inset/list.e2e.ts
@@ -2,25 +2,73 @@ import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('list: inset', () => {
- test.describe('list: rendering', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.setContent(`
-
-
-
- Pokémon Yellow
- Super Metroid
- Mega Man X
- The Legend of Zelda
- Halo
-
-
-
- `);
+ test.beforeEach(({ skip }) => {
+ skip.rtl();
+ });
+ test('should render full lines while allowing for overrides', async ({ page }) => {
+ await page.setContent(`
+
+
+
+
+
+
+ Pokémon Yellow
+ Super Metroid (with Inset Line)
+ Mega Man X (with No Line)
+ The Legend of Zelda
+ Halo
+
+
+
+ `);
- const listWrapper = page.locator('.wrapper');
+ const listWrapper = page.locator('.wrapper');
- expect(await listWrapper.screenshot()).toMatchSnapshot(`list-inset-diff-${page.getSnapshotSettings()}.png`);
- });
+ expect(await listWrapper.screenshot()).toMatchSnapshot(`list-inset-full-lines-${page.getSnapshotSettings()}.png`);
+ });
+ test('should render inset lines while allowing for overrides', async ({ page }) => {
+ await page.setContent(`
+
+
+
+
+
+
+ Pokémon Yellow
+ Super Metroid (with Full Line)
+ Mega Man X (with No Line)
+ The Legend of Zelda
+ Halo
+
+
+
+ `);
+
+ const listWrapper = page.locator('.wrapper');
+
+ expect(await listWrapper.screenshot()).toMatchSnapshot(`list-inset-inset-lines-${page.getSnapshotSettings()}.png`);
+ });
+ test('should render no lines while allowing for overrides', async ({ page }) => {
+ await page.setContent(`
+
+
+
+
+
+
+ Pokémon Yellow
+ Super Metroid (with Full Line)
+ Mega Man X (with Inset Line)
+ The Legend of Zelda
+ Halo
+
+
+
+ `);
+
+ const listWrapper = page.locator('.wrapper');
+
+ expect(await listWrapper.screenshot()).toMatchSnapshot(`list-inset-no-lines-${page.getSnapshotSettings()}.png`);
});
});
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 5c6d9721bd..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index acb3c5a19c..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 35a5d5a8e9..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 487e22f7dc..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 4a8f3a556e..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index fd721e900e..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index e96cb4d099..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 393901b4a3..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index c3ebbee25c..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index a9012713ac..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 2fc724e293..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 016eb3a1d1..0000000000
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8b8aa8b472
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9d2e4b2dd1
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..15c2dfe38f
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6cf62ce20f
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b7e9a789c
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..49e10cb776
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-full-lines-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..45f9356f8f
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6758059fef
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..895b992a53
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2a7c812276
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..748758bafe
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5996d878ed
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-inset-lines-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..47c07d8595
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..405bf45040
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d0f7e3b67c
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ed9e17a80d
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..749a9203d3
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c66faa7795
Binary files /dev/null and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-no-lines-md-ltr-Mobile-Safari-linux.png differ