Ionic-framework: ion-item lines="none" in ion-list lines="full" not working as expected

[PRINIQ-Kelvin]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
ion-item line="none" has bottom border

Expected behavior:
ion-item line="none" doesn't have bottom border

Steps to reproduce:

Related code:

  <ion-list lines="full">
    <ion-item *ngFor="let p of menuPages" [routerDirection]="'forward'" [routerLink]="[pageDirectory[p].path]">
      <ion-label>{{ pageDirectory[p].title | translate }}</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label text-center text-small-95>
        version <strong>{{ version[0] }}</strong>
      </ion-label>
    </ion-item>
  </ion-list>

Other information:
Currently fix by manually with the code below.

.list-md-lines-full {
    .item {
        &.item-lines-none {
            --border-width: 0;
        }
    }
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (C:\_npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 18 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\_AndroidSDK)
   NodeJS            : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[paulstelzer]

Thanks for your issue! ion-list has higher priority. So by adding lines="full" to list, this will overwrite the item. Just add lines="full" to ion-item:

  <ion-list>
    <ion-item  lines="full" *ngFor="let p of menuPages" [routerDirection]="'forward'" [routerLink]="[pageDirectory[p].path]">
      <ion-label>{{ pageDirectory[p].title | translate }}</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label text-center text-small-95>
        version <strong>{{ version[0] }}</strong>
      </ion-label>
    </ion-item>
  </ion-list>

I cannot say if this is the correct behaviour, so I add @brandyscarney who can maybe help here :)

[PRINIQ-Kelvin]

I would suggest children will be the highest priority. Parent(ion-list) set the most behavior for the children and specify children(ion-item) can override over parent

[brandyscarney]

I would suggest children will be the highest priority. Parent(ion-list) set the most behavior for the children and specify children(ion-item) can override over parent

I agree with this. In fact, it does work like this for the other values of lines, but it seems that I missed this use case when creating our tests. Here's a codepen of some of the different use cases (with this one now added): https://codepen.io/brandyscarney/pen/xmYgyL?editors=1000#0

I'll add this as a bug to fix. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.