fix(list): closed list-items no longer render extra space (#9031)

**Related Issue:** #9005 ## Summary - closed list-items should not leave behind extra space - Sets internal elements hidden instead of hiding on the host - updates slotted styles to not apply when closed or filtered out. - Add screenshot test
Esri · Apr 3, 2024 · 3985004 · 3985004
1 parent 720fba5
commit 3985004
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -4,10 +4,6 @@
   --calcite-list-item-spacing-indent: theme("spacing.4");
 }
 
-:host([filter-hidden]) {
-  @apply hidden;
-}
-
 @include disabled();
 
 .container {

diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -653,6 +653,7 @@ export class ListItem
       selectionMode,
       closed,
       visualLevel,
+      filterHidden,
     } = this;
 
     const showBorder = selectionMode !== "none" && selectionAppearance === "border";
@@ -676,7 +677,7 @@ export class ListItem
               [CSS.containerBorderSelected]: borderSelected,
               [CSS.containerBorderUnselected]: borderUnselected,
             }}
-            hidden={closed}
+            hidden={closed || filterHidden}
             onFocus={this.focusCellNull}
             onFocusin={this.emitInternalListItemActive}
             onKeyDown={this.handleItemKeyDown}

diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
@@ -28,7 +28,7 @@
   --calcite-stack-padding-block: 0;
 }
 
-::slotted(calcite-list-item) {
+::slotted(calcite-list-item:not([filter-hidden], [closed])) {
   @apply shadow-border-top;
   margin-block-start: 1px;
 }

diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -954,3 +954,67 @@ export const nestingLists_TestOnly = (): string => html`<h4>Nesting List Items</
       </calcite-list>
     </calcite-list-item>
   </calcite-list>`;
+
+export const closedItems_TestOnly = (): string =>
+  html` <calcite-list>
+    <calcite-list-item
+      closable
+      label="Hiking trails"
+      description="Designated routes for hikers to use."
+      value="hiking-trails"
+    >
+    </calcite-list-item>
+    <calcite-list-item closed closable label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
+    </calcite-list-item>
+    <calcite-list-item
+      closed
+      closable
+      label="Rivers"
+      description="Large naturally flowing watercourses."
+      value="rivers"
+    >
+    </calcite-list-item>
+    <calcite-list-item
+      closed
+      closable
+      label="Hiking trails"
+      description="Designated routes for hikers to use."
+      value="hiking-trails"
+    >
+    </calcite-list-item>
+    <calcite-list-item closed closable label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
+    </calcite-list-item>
+    <calcite-list-item
+      closed
+      closable
+      label="Rivers"
+      description="Large naturally flowing watercourses."
+      value="rivers"
+    >
+    </calcite-list-item>
+    <calcite-list-item
+      closed
+      closable
+      label="Hiking trails"
+      description="Designated routes for hikers to use."
+      value="hiking-trails"
+    >
+    </calcite-list-item>
+    <calcite-list-item closed closable label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
+    </calcite-list-item>
+    <calcite-list-item
+      closed
+      closable
+      label="Rivers"
+      description="Large naturally flowing watercourses."
+      value="rivers"
+    >
+    </calcite-list-item>
+    <calcite-list-item
+      closable
+      label="Hiking trails"
+      description="Designated routes for hikers to use."
+      value="hiking-trails"
+    >
+    </calcite-list-item>
+  </calcite-list>`;