feat(atomic): add extra padding for first element

coveo · Jul 6, 2023 · d1b3213 · d1b3213
1 parent 6f6eb44
commit d1b3213
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.pcss b/packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.pcss
@@ -19,3 +19,9 @@ atomic-result-section-children {
     @apply p-6;
   }
 }
+
+:host(.firstInsightResultWithActionBar) {
+  .with-sections {
+    @apply pt-8;
+  }
+}
diff --git a/packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.tsx b/packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.tsx
@@ -146,9 +146,15 @@ export class AtomicInsightResult {
   }
 
   private get firstChildActionBar() {
-    return this.host.parentElement
-      ?.querySelectorAll('atomic-insight-result')?.[0]
-      .shadowRoot?.querySelector('atomic-insight-result-action-bar');
+    return this.firstInsightResult?.shadowRoot?.querySelector(
+      'atomic-insight-result-action-bar'
+    );
+  }
+
+  private get firstInsightResult() {
+    return this.host.parentElement?.querySelectorAll(
+      'atomic-insight-result'
+    )?.[0];
   }
 
   public render() {
@@ -172,6 +178,7 @@ export class AtomicInsightResult {
     }
     if (this.resultActionBar && this.resultActions?.length) {
       this.firstChildActionBar?.classList.add('firstActionBarElement');
+      this.firstInsightResult?.classList.add('firstInsightResultWithActionBar');
       this.host.addEventListener('mouseover', this.handleMouseOver);
       this.host.addEventListener('mouseout', this.handleMouseOut);
     }