diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss index c0863aa7f9f..ffccb9345ff 100644 --- a/core/src/components/list/list.ios.scss +++ b/core/src/components/list/list.ios.scss @@ -19,12 +19,25 @@ @include border-radius($list-inset-ios-border-radius); } -.list-ios.list-inset ion-item:last-child { +/** + * These selectors ensure the last item in the list + * has the correct border. + * We need to consider the following scenarios: + 1. The only item in a list. + 2. The last item in a list as long as it is not the only item. + 3. The item in the last item-sliding in a list. + * Note that we do not select ion-item:last-of-type + * because that will cause the borders to disappear on + * items in an item-sliding when the item is the last + * element in the item-sliding container. + */ +.list-ios.list-inset ion-item:only-child, +.list-ios.list-inset ion-item:not(:only-of-type):last-of-type, +.list-ios.list-inset ion-item-sliding:last-of-type ion-item { --border-width: 0; --inner-border-width: 0; } - .list-ios.list-inset + ion-list.list-inset { @include margin(0, null, null, null); } diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss index 2c5d896726a..8b408f781d6 100644 --- a/core/src/components/list/list.md.scss +++ b/core/src/components/list/list.md.scss @@ -23,12 +23,50 @@ @include border-radius($list-inset-md-border-radius); } -.list-md.list-inset ion-item:first-child { +/** + * These selectors ensure the first item in the list + * has the correct radius. + * We need to consider the following scenarios: + 1. The first item in a list as long as it is not the only item. + 2. The item in the first item-sliding in a list. + * Note that we do not select "ion-item-sliding ion-item:first-of-type" + * because that will cause the borders to disappear on + * items in an item-sliding when the item is the first + * element in the item-sliding container. + */ +.list-md.list-inset ion-item:not(:only-of-type):first-of-type, +.list-md.list-inset ion-item-sliding:first-of-type ion-item { --border-radius: #{$list-inset-md-border-radius $list-inset-md-border-radius 0 0}; } -.list-md.list-inset ion-item:last-child { - --border-radius: #{0 0 $list-inset-md-border-radius, $list-inset-md-border-radius}; +/** + * These selectors ensure the last item in the list + * has the correct radius and border. + * We need to consider the following scenarios: + 1. The last item in a list as long as it is not the only item. + 2. The item in the last item-sliding in a list. + * Note that we do not select "ion-item-sliding ion-item:last-of-type" + * because that will cause the borders to disappear on + * items in an item-sliding when the item is the last + * element in the item-sliding container. + */ +.list-md.list-inset ion-item:not(:only-of-type):last-of-type, +.list-md.list-inset ion-item-sliding:last-of-type ion-item { + --border-radius: #{0 0 $list-inset-md-border-radius $list-inset-md-border-radius}; + --border-width: 0; + --inner-border-width: 0; +} + +/** + * The only item in a list should have a border radius + * on all corners. + * We target :only-child instead of :only-of-type + * otherwise borders will disappear on items inside of + * ion-item-sliding because the item will be the only + * one of its type inside of the ion-item-sliding group. + */ +.list-md.list-inset ion-item:only-child { + --border-radius: #{$list-inset-md-border-radius}; --border-width: 0; --inner-border-width: 0; } diff --git a/core/src/components/list/test/lines/list.e2e.ts b/core/src/components/list/test/lines/list.e2e.ts index c784fe5fe93..96265112c1d 100644 --- a/core/src/components/list/test/lines/list.e2e.ts +++ b/core/src/components/list/test/lines/list.e2e.ts @@ -26,3 +26,162 @@ configs().forEach(({ title, screenshot, config }) => { }); }); }); + +/** + * Padding and border color ensures the bottom border can be easily seen if it regresses. + * The background color ensures that any border radius values can be seen. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('list: lines with children'), () => { + test('only item in inset list should not have line', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28435', + }); + await page.setContent( + ` + +
+ + + Item 0 + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot('inset-list-only-item-no-lines')); + }); + test('last item in inset list with end options should not have line', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28435', + }); + await page.setContent( + ` + +
+ + + + Item 0 + + + + + + + + + + + Item 1 + + + + + + + + + + + Item 2 + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot('inset-list-end-options-no-lines')); + }); + test('last item in inset list with start options should not have line', async ({ page }) => { + await page.setContent( + ` + +
+ + + + + + + + + Item 0 + + + + + + + + + + + Item 1 + + + + + + + + + + + Item 2 + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot('inset-list-start-options-no-lines')); + }); + }); +}); diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c15b0df9bcd Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f0d78f76021 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1b9ffaf1af2 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d03693eb594 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e3f2ed87c13 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4c543d14cde Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-end-options-no-lines-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..61d0fd988c1 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5eb21ae6c42 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3ecc2e248bd Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..05ea5c18863 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fa2007c5c4b Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5b9a5ef9f2b Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-only-item-no-lines-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c15b0df9bcd Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f0d78f76021 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1b9ffaf1af2 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d03693eb594 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e3f2ed87c13 Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4c543d14cde Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/inset-list-start-options-no-lines-md-ltr-Mobile-Safari-linux.png differ