bug: ion-list attribute "lines" not working when attribute "inset" is true

[DwieDima]

Bug Report

Ionic version:

[x] 5.0.5

Current behavior:

When you create an ion-list with ion-items and set the attribute inset="true" on ion-list, the attribute lines wont have any effect on ion-item. Instead you'll always see full lines.

Expected behavior:

attribute lines on ion-list should work when attribute inset="true" is set.

Steps to reproduce:

copy paste this snippet to any page:

 <ion-list inset="true" lines="full">
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
  </ion-list>

• change lines attribute to lines="none", lines="inset" --> no effect.
• removing lines attribute will remain in lines="full".
  • Isn't the default behaviour lines="inset" ?

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0-dev.202003171608.9d9a02f
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 9.0.5
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (1 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.16.0 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue? I am unable to reproduce the issue using the code snippet provided.

CodePen of ion-list: https://codepen.io/liamdebeasi/pen/LYVBVZb

[DwieDima]

@liamdebeasi i see your codepen is working.
I've just created a fresh project with "@ionic/angular": "^5.0.5" and was able to reproduce the bug.
Heres the repo.

--> when you serve the app, switch to iPad view using chrome browser:

• inspect
• toggle device toolbar
• select iPad
• refresh browser tab

[liamdebeasi]

Thanks for the follow up. I was able to reproduce the issue in my CodePen. It looks like this is related to #17425.

As a temporary workaround you can do the following to items in a list with lines="none" and "inset="true".

ion-list[inset=true][lines="none"] ion-item {
  --border-width: 0 !important;
}

[DwieDima]

This also won't work if you use a plain ion-item with lines="none"

    <ion-item class="ion-no-padding" lines="none">
      <ion-checkbox slot="start"></ion-checkbox>
      <ion-label class="ion-text-wrap>
        some label
      </ion-label>
    </ion-item>

workaround is:

ion-item {
  &[lines='none'] {
    --border-width: 0 !important;
  }
}

[ausminternet]

workaround for inset with lines="inset":

ion-list[inset='true'][lines='inset'] ion-item:not(:last-of-type) {
  --border-width: 0 !important;
  --inner-border-width: 0 0 0.55px 0;
}

[liamdebeasi]

Thanks for the issue. This has been resolved via #26586, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-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.