fix(list): inset lists render correctly

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: resolves #20819

iOS

During a design review, Ben noted that the border width on inset lists in iOS was too thick. The list component was overriding the item border width to be 1px (item sets the width to 0.55px on iOS)

Upon further investigation, it was noted that the lines property was never being respected when inset="true". As a result, it was impossible to get inset item lines using the inset list feature. Lines should be inset by default on iOS.

MD

During a design review, it was noticed that the padding on inset lists that contain interactive ion-items was incorrect. Fixing this issue revealed another bug where full lines were not being removed from items when lines="inset" was set on ion-list.

What is the new behavior?

Architecture Note:

I decided to change the architecture of how list applies these styles for a couple reasons:

1. It was buggy (as noted above)
2. It was hard to reason about. IMO .list-md-lines-inset .item, .list-md .item-lines-inset is not the most "readable" selector.
3. It reimplemented styles already found in ion-item. For example: https://github.com/ionic-team/ionic-framework/pull/26586/files#diff-7dc0bcee862e87a0457c625c8ac1487390b4d3d9a39c667e01485537255c1cb2L67-L83
   These lines made it so developers could set the lines property on ion-item and have that particular instance override whatever line ion-list was trying to set. However, it did this by duplicating styles that were already set in the ion-item stylesheets.

This is the new architecture:

1. A item-lines-default class is set on ion-item when no lines property is set.
2. ion-list targets ion-item with the item-lines-default class when setting the lines.
3. If a developers sets lines on ion-item, then the item-lines-default class is removed and the styles in 2 no longer apply. This allows developers to override the list behavior on a per-item basis.

iOS

• Inset lists no longer override the border on item

main	branch	native

Note: This was previously considered an Ionic 7.0 task. However, I would like to consider this a non-breaking change since the lines property on ion-list is not functional. Additionally, the lines should always have been 0.55px instead of 1px.

MD

• List no longer removes padding on items with interactives

Fixing the padding issue reveals the lines bug.

main	branch

In the "branch" screenshot, the first item in the list has both an inset and a full line. This is also happening in main, but the lack of padding causes this issue to not be visible.

• The full line is removed when lines="inset" is set on ion-list

pre-fix	branch

This likely has been an issue for several years, but we never caught it since we did not have test coverage for this use case. Tests have been added.

Does this introduce a breaking change?

• Yes
• No

This does not change the specificity of the selector. Prior to this change we were doing .list-ios-lines-full .item. Now we are doing .list-ios-lines-full .item-lines-default. As a result, any app-specific CSS overrides should still work.

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.