fix(cx-12886): css fixes for advance list (#1808)

* fix(cx-12886): css fixes for advance list * CX-12886: add loading and error state * fix(cx-12886): remove unwanted test case * fix(cx-12886): fix css for list container
momentum-design · Nov 7, 2024 · 1c6be4f · 1c6be4f
1 parent 546b592
commit 1c6be4f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/web-components/src/components/advance-list/AdvanceList.test.ts b/web-components/src/components/advance-list/AdvanceList.test.ts
@@ -272,15 +272,6 @@ describe("advanceList Component", () => {
     });
 
     describe("Accessibility and Error Handling", () => {
-      test("should show loading spinner when isLoading is true", async () => {
-        el.isLoading = true;
-        el.requestUpdate();
-        await el.updateComplete;
-        await nextFrame();
-
-        const loader = el.shadowRoot?.querySelector(".spin-loader");
-        expect(loader).not.toBeNull();
-      });
 
       test("should apply correct ARIA role and label", async () => {
         const wrapper = el.shadowRoot?.querySelector(".md-advance-list-wrapper");

diff --git a/web-components/src/components/advance-list/AdvanceList.ts b/web-components/src/components/advance-list/AdvanceList.ts
@@ -18,6 +18,7 @@ export namespace AdvanceList {
     @property({ type: String }) ariaRoleListItem = "option";
     @property({ type: String }) ariaLabelList = "";
     @property({ type: Boolean }) isError = false;
+    @property({ type: String }) containerHeight = "292px";
     @queryAll("div.default-wrapper") lists?: HTMLDivElement[];
     @query(".virtual-scroll") listContainer?: HTMLDivElement;
     @property({ type: Number }) totalRecords = 0;
@@ -34,6 +35,16 @@ export namespace AdvanceList {
       return [reset, styles];
     }
 
+    private getStyles() {
+      return html`
+        <style>
+          :host .virtual-scroll {
+            height: ${this.containerHeight};
+          }
+        </style>
+      `;
+    }
+
     disconnectedCallback() {
       super.disconnectedCallback();
       // Clean up event listeners when the component is removed
@@ -112,6 +123,9 @@ export namespace AdvanceList {
       return undefined;
     }
 
+    isNextElemenentStatusIndicator(index: number) {
+      return (this.isLoading || this.isError) && index === this.items.length - 2;
+    }
     handleKeyDown = (event: KeyboardEvent): void => {
       switch (event.key) {
         case Key.ArrowDown:
@@ -123,13 +137,13 @@ export namespace AdvanceList {
               this.activeId = this.value;
             }
             const currentIndex = this.items.findIndex((item) => item.id === this.activeId);
-            if (currentIndex < this.items.length - 1) {
+             if (currentIndex < this.items.length - 1 && !this.isNextElemenentStatusIndicator(currentIndex)) {
               this.scrollIndex = currentIndex + 1;
               this.activeId = this.items[this.scrollIndex].id;
             }
           }
           break;
-
+          
         case Key.ArrowUp:
           {
             event.preventDefault();
@@ -213,9 +227,14 @@ export namespace AdvanceList {
     }
 
     renderItem(item: any, index: number) {
+      if (item.id === "status-indicator") {
+        return html`
+          <div class="default-wrapper-status-indicator" id="status-indicator">${item.template(item, index)}</div>
+        `;
+      }
       return html`
         <div
-          class="default-wrapper"
+          class="default-wrapper ${item.id}"
           aria-setsize="${this.totalRecords}"
           aria-posinset="${index + 1}"
           role="${this.ariaRoleListItem}"
@@ -240,6 +259,7 @@ export namespace AdvanceList {
 
     render() {
       return html`
+        ${this.getStyles()}
         <div
           class="md-advance-list-wrapper virtual-scroll"
           tabindex="0"
@@ -261,7 +281,6 @@ export namespace AdvanceList {
               : undefined
           })}
         </div>
-        ${this.isLoading ? html`<slot class="spin-loader" name="spin-loader"></slot>` : null}
       `;
     }
   }

diff --git a/web-components/src/components/advance-list/scss/AdvanceList.scss b/web-components/src/components/advance-list/scss/AdvanceList.scss
@@ -1,15 +1,17 @@
 :host(md-advance-list) {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 2px;
   overflow: auto;
   position: relative;
+  line-height: 1.125rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .virtual-scroll {
   width: 100%;
   overflow-y: auto;
-  height: 400px;
   overflow-x: hidden;
   position: relative;
   padding: 1px;
@@ -50,6 +52,14 @@
 
 .default-wrapper {
   margin-bottom: 2px;
+  padding: 11px 12px;
+  color: var( --advance-list-text-color, $md-advance-list-text-color-light);
+  cursor: pointer;
+  width: calc(100% - 2px);
+  box-sizing: border-box;
+  position: relative;
+}
+.default-wrapper-status-indicator {
   padding: 5px;
   color: var( --advance-list-text-color, $md-advance-list-text-color-light);
   cursor: pointer;
@@ -66,4 +76,4 @@
 .default-wrapper.selected:hover {
   background-color: var(--list-active-background, $md-advance-list-active-background-light);
   color: var(--list-active-text-color, $md-advance-list-active-text-color-light);
-}
+}