fix(list-item): adds border between grouped and ungrouped list-items (#…

…8134) **Related Issue:** #7546 Adds border to the `calcite-list-item` excluding the first `calcite-list-item` in the `calcite-list-item-group` or the `calcite-list`.
Esri · Nov 26, 2023 · d3aa1f4 · d3aa1f4
1 parent eb72810
commit d3aa1f4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 5 deletions.
diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -165,6 +165,7 @@ export default {
         "2-lg": "var(--calcite-box-shadow-md)",
         "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)",
         "border-bottom": "0 1px 0 var(--calcite-color-border-3)",
+        "border-top": "0 -1px 0 var(--calcite-color-border-3)",
         "outline-active": "0 0 0 1px var(--calcite-color-brand)",
         none: "none",
         xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",

diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -16,11 +16,14 @@
 }
 
 ::slotted(calcite-list-item) {
-  @apply shadow-border-bottom mb-px;
+  @apply shadow-border-top;
+  margin-block-start: 1px;
 }
 
-::slotted(calcite-list-item:last-child) {
+// removes shadow for the first item of the group for both filtered and unfiltered items.
+::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) {
   @apply shadow-none;
+  margin-block-start: 0px;
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
@@ -29,13 +29,20 @@
 }
 
 ::slotted(calcite-list-item) {
-  @apply shadow-border-bottom mb-px;
+  @apply shadow-border-top;
+  margin-block-start: 1px;
 }
 
-::slotted(calcite-list-item:last-child) {
+::slotted(calcite-list-item:first-of-type) {
   @apply shadow-none;
 }
 
+// removes shadow for the first item in filteredItems of the list.
+::slotted(calcite-list-item[data-filter]) {
+  @apply shadow-none;
+  margin-block-start: 0px;
+}
+
 .sticky-pos {
   @apply sticky
   top-0

diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -448,7 +448,7 @@ export const closableListItems_TestOnly = (): string => html`<calcite-list
   </calcite-list-item>
 </calcite-list>`;
 
-export const filteredChildListItems_TestOnly = (): string => html` <calcite-list
+export const filteredChildListItems_TestOnly = (): string => html`<calcite-list
     filter-enabled
     filter-text="est"
     filter-placeholder="Find content"
@@ -630,6 +630,10 @@ export const filteredChildListItems_TestOnly = (): string => html` <calcite-list
     </calcite-list-item-group>
   </calcite-list>`;
 
+filteredChildListItems_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};
+
 export const filterActions_TestOnly = (): string => html`<calcite-list
   selection-mode="single"
   label="test"

diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
@@ -360,6 +360,8 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
 
   sortable: Sortable;
 
+  private ancestorOfFirstFilteredItem: HTMLCalciteListItemElement;
+
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -579,6 +581,10 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
       this.filterElements({ el: listItem, filteredItems, visibleParents })
     );
 
+    if (filteredItems.length > 0) {
+      this.findAncestorOfFirstFilteredItem(filteredItems);
+    }
+
     this.filteredItems = filteredItems;
 
     if (emit) {
@@ -742,6 +748,35 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
     }
   };
 
+  private findAncestorOfFirstFilteredItem = (filteredItems: HTMLCalciteListItemElement[]): void => {
+    this.ancestorOfFirstFilteredItem?.removeAttribute("data-filter");
+    filteredItems.forEach((item) => {
+      item.removeAttribute("data-filter");
+    });
+
+    this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
+    filteredItems[0].setAttribute("data-filter", "0");
+    this.ancestorOfFirstFilteredItem?.setAttribute("data-filter", "0");
+  };
+
+  private getTopLevelAncestorItemElement = (
+    el: HTMLCalciteListItemElement
+  ): HTMLCalciteListItemElement | null => {
+    let closestParent = el.parentElement.closest<HTMLCalciteListItemElement>("calcite-list-item");
+
+    while (closestParent) {
+      const closestListItemAncestor =
+        closestParent.parentElement.closest<HTMLCalciteListItemElement>("calcite-list-item");
+
+      if (closestListItemAncestor) {
+        closestParent = closestListItemAncestor;
+      } else {
+        return closestParent;
+      }
+    }
+    return null;
+  };
+
   handleNudgeEvent(event: CustomEvent<HandleNudge>): void {
     const { direction } = event.detail;