fix(list): inset lists render correctly (#26586)

resolves #20819

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,

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
 // --------------------------------------------------
 

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
 // --------------------------------------------------
 

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(`
-        <ion-content color="primary">
-          <div class="wrapper" style="display: flex">
-            <ion-list inset="true" style="width: 100%">
-              <ion-item>Pokémon Yellow</ion-item>
-              <ion-item>Super Metroid</ion-item>
-              <ion-item>Mega Man X</ion-item>
-              <ion-item>The Legend of Zelda</ion-item>
-              <ion-item lines="full">Halo</ion-item>
-            </ion-list>
-          </div>
-        </ion-content>
-      `);
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should render full lines while allowing for overrides', async ({ page }) => {
+    await page.setContent(`
+      <ion-content color="primary">
+        <div class="wrapper" style="display: flex">
+          <ion-list inset="true" style="width: 100%" lines="full">
+            <ion-item>
+              <ion-input value="Input Text"></ion-input>
+            </ion-item>
+            <ion-item>Pokémon Yellow</ion-item>
+            <ion-item lines="inset">Super Metroid (with Inset Line)</ion-item>
+            <ion-item lines="none">Mega Man X (with No Line)</ion-item>
+            <ion-item>The Legend of Zelda</ion-item>
+            <ion-item lines="full">Halo</ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    `);
+
+    const listWrapper = page.locator('.wrapper');
+
+    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(`
+      <ion-content color="primary">
+        <div class="wrapper" style="display: flex">
+          <ion-list inset="true" style="width: 100%" lines="inset">
+            <ion-item>
+              <ion-input value="Input Text"></ion-input>
+            </ion-item>
+            <ion-item>Pokémon Yellow</ion-item>
+            <ion-item lines="full">Super Metroid (with Full Line)</ion-item>
+            <ion-item lines="none">Mega Man X (with No Line)</ion-item>
+            <ion-item>The Legend of Zelda</ion-item>
+            <ion-item lines="full">Halo</ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    `);
+
+    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(`
+      <ion-content color="primary">
+        <div class="wrapper" style="display: flex">
+          <ion-list inset="true" style="width: 100%" lines="none">
+            <ion-item>
+              <ion-input value="Input Text"></ion-input>
+            </ion-item>
+            <ion-item>Pokémon Yellow</ion-item>
+            <ion-item lines="full">Super Metroid (with Full Line)</ion-item>
+            <ion-item lines="inset">Mega Man X (with Inset Line)</ion-item>
+            <ion-item>The Legend of Zelda</ion-item>
+            <ion-item lines="full">Halo</ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    `);
 
-      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-no-lines-${page.getSnapshotSettings()}.png`);
   });
 });