fix(list-item): Fix slotted list border styling. (#8712)

**Related Issue:** #8684 ## Summary - Updates slotted styling for list elements. - Adds screenshot test
Esri · Feb 9, 2024 · 855f98d · 855f98d
1 parent cd0b532
commit 855f98d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 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
@@ -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
@@ -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>`;