From 855f98d897e2158e58bb56d6e694d9bd08e4dbac Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 9 Feb 2024 09:14:35 -0800
Subject: [PATCH] fix(list-item): Fix slotted list border styling. (#8712)

**Related Issue:** #8684

## Summary

- Updates slotted styling for list elements.
- Adds screenshot test
---
 .../src/components/list-item/list-item.scss   |  3 ++-
 .../src/components/list/list.stories.ts       | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index aee5b7569e0..0bcca595fed 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -201,7 +201,8 @@ td:focus {
   }
 }
 
-::slotted(calcite-list-item) {
+::slotted(calcite-list-item),
+::slotted(calcite-list) {
   @apply border-solid border-0 border-t border-color-3;
 }
 
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index 5e4458ea756..2682ab042b8 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -934,3 +934,23 @@ export const filteredListItemsNoResults_TestOnly = (): string =>
       <div slot="message">Try a different fruit?</div>
     </calcite-notice>
   </calcite-list>`;
+
+export const nestingLists_TestOnly = (): string => html`<h4>Nesting List Items</h4>
+  <calcite-list>
+    <calcite-list-item label="List Item" open>
+      <calcite-list-item label="List Item"></calcite-list-item>
+      <calcite-list-item label="List Item"></calcite-list-item>
+      <calcite-list-item label="List Item"></calcite-list-item>
+    </calcite-list-item>
+  </calcite-list>
+  </br>
+  <h4>Nesting Lists</h4>
+  <calcite-list>
+    <calcite-list-item label="List Item" open>
+      <calcite-list>
+        <calcite-list-item label="List Item"></calcite-list-item>
+        <calcite-list-item label="List Item"></calcite-list-item>
+        <calcite-list-item label="List Item"></calcite-list-item>
+      </calcite-list>
+    </calcite-list-item>
+  </calcite-list>`;