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