feat: ion-list on ios should have top and bottom borders

[DwieDima]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

In native IOS apps there are two full lines on top and bottom of a list. In Ionic the top line is completely missing and bottom line is inset.

Native IOS list

Ionic list

Expected behavior:

Without providing any attributes to ion-list and ion-item, the default list should look like in first screenshot:

• line on top and bottom of a list is full
• item lines are inset

Steps to reproduce:

Related code:

Just copy paste this snippet to latest Ionic version.

  <ion-list>
    <ion-item button="true" *ngFor="let i of [1,2,3,4]">
      <ion-icon slot="start" name="folder"></ion-icon>
      <ion-label>example@mail.net</ion-label>
      <div slot="end">25</div>
    </ion-item>
  </ion-list>

My current workaround

.html

  <div class="ios-list">
    <ion-list>
      <ion-item
        [lines]="last ? 'none' : 'inset'"
        button="true"
        *ngFor="let i of [1,1,1,1]; let last = last"
      >
        <ion-icon slot="start" name="folder"></ion-icon>
        <ion-label>example@mail.net</ion-label>
        <div slot="end">25</div>
      </ion-item>
    </ion-list>
  </div>

.css

.ios-list {
  border: solid;
  border-color: var(
    --ion-item-border-color,
    var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))
  );
  border-width: 0.55px 0px 0.55px 0px;
}

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res (update available: 0.15.1) : 0.14.0
   native-run                             : not installed

System:

   NodeJS : v12.16.0 (/usr/local/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. We should probably support this out of the box, possibly via a new feature.

Here is a CSS-only workaround if you prefer that: https://codepen.io/liamdebeasi/pen/rNxYrJP

[DwieDima]

Here is a CSS-only workaround if you prefer that: https://codepen.io/liamdebeasi/pen/rNxYrJP

Wow thanks for the snippet, that helps me a lot to apply it globally!