fix(item): no lines on item should take precedence over list lines (#17049)

fixes #16900

core/src/components/item/test/lines/index.html

@@ -21,9 +21,13 @@
     </ion-header>
 
     <ion-content id="content">
+      <ion-list-header>
+        <ion-label>Header</ion-label>
+      </ion-list-header>
+
       <!-- Default -->
       <ion-item>
-        <ion-label>Item</ion-label>
+        <ion-label>Default Item Lines</ion-label>
       </ion-item>
 
       <!-- Lines Inset -->
@@ -39,7 +43,7 @@
       <!-- Default -->
       <ion-item>
         <ion-icon name="star" slot="start"></ion-icon>
-        <ion-label>Item</ion-label>
+        <ion-label>Default Item Lines</ion-label>
         <ion-icon name="information-circle" slot="end"></ion-icon>
       </ion-item>
 
@@ -70,12 +74,12 @@
         <ion-item>
           <ion-label>Item</ion-label>
         </ion-item>
-        <ion-item>
-          <ion-label>Item</ion-label>
-        </ion-item>
         <ion-item lines="inset">
           <ion-label>Item Inset</ion-label>
         </ion-item>
+        <ion-item lines="none">
+          <ion-label>Item None</ion-label>
+        </ion-item>
       </ion-list>
 
       <ion-list lines="inset">
@@ -88,8 +92,8 @@
         <ion-item lines="full">
           <ion-label>Item Full</ion-label>
         </ion-item>
-        <ion-item>
-          <ion-label>Item</ion-label>
+        <ion-item lines="none">
+          <ion-label>Item None</ion-label>
         </ion-item>
       </ion-list>
 
@@ -209,9 +213,7 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
   </ion-app>
-
   <script>
     function testClick(ev) {
       console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());

core/src/components/list/list.ios.scss

@@ -64,7 +64,6 @@
   --inner-border-width: #{0 0 $list-ios-item-border-bottom-width 0};
 }
 
-
 // Remove the border from items in lists
 // if they are explicitly styled by the item
 // to be different than the list
@@ -75,3 +74,8 @@
 .list-ios .item-lines-full {
   --inner-border-width: 0;
 }
+
+.list-ios .item-lines-none {
+  --border-width: 0;
+  --inner-border-width: 0;
+}

core/src/components/list/list.md.scss

@@ -73,7 +73,6 @@
   --inner-border-width: #{0 0 $list-md-item-border-bottom-width 0};
 }
 
-
 // Remove the border from items in lists
 // if they are explicitly styled by the item
 // to be different than the list
@@ -83,4 +82,9 @@
 
 .list-md .item-lines-full {
   --inner-border-width: 0;
+}
+
+.list-md .item-lines-none {
+  --border-width: 0;
+  --inner-border-width: 0;
 }