feat(atomic): change to tailwind classes and small refacto

coveo · Jun 28, 2023 · f5961b4 · f5961b4
1 parent 64e93d1
commit f5961b4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/...components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss b/...components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss
@@ -1,29 +1,27 @@
 @import '../../../global/global.pcss';
 
 atomic-insight-result-action-bar {
-  display: flex;
-  position: absolute;
-  visibility: hidden;
-  right: 1.5rem;
+  @apply flex absolute invisible right-6 top-[-1rem];
 
   > atomic-insight-result-action:not(:last-child) {
     button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0px;
+      @apply rounded-r-none border-r-0;
       &:hover {
-        border-right: 1px solid;
+        @apply border-r;
       }
     }
   }
   > atomic-insight-result-action:not(:first-child) {
     button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      @apply rounded-tl-none rounded-bl-none;
     }
   }
 }
 
 .hovered {
-  visibility: visible;
+  @apply visible;
+}
+
+.firstActionBarElement {
+  @apply top-0;
 }
diff --git a/...mic/src/components/insight/atomic-insight-result-action/atomic-insight-result-action.pcss b/...mic/src/components/insight/atomic-insight-result-action/atomic-insight-result-action.pcss
@@ -2,10 +2,7 @@
 
 :host {
   &::part(result-action-button) {
-    height: 32px;
-    width: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @apply flex items-center justify-center;
+    @apply h-8 w-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
@@ -24,6 +24,7 @@ import {AtomicInsightStore} from '../atomic-insight-interface/store';
 })
 export class AtomicInsightResult {
   private layout!: ResultLayout;
+  private resultActionBarElement?: HTMLElement | null;
   @Element() host!: HTMLElement;
 
   /**
@@ -124,18 +125,12 @@ export class AtomicInsightResult {
   }
 
   private handleMouseOver = () => {
-    const resultActionBarElement = this.host.shadowRoot?.querySelector(
-      'atomic-insight-result-action-bar'
-    );
-    resultActionBarElement?.classList.add('hovered');
+    this.resultActionBarElement?.classList.add('hovered');
     this.host.classList.add('resultHovered');
   };
 
   private handleMouseOut = () => {
-    const resultActionBarElement = this.host.shadowRoot?.querySelector(
-      'atomic-insight-result-action-bar'
-    );
-    resultActionBarElement?.classList.remove('hovered');
+    this.resultActionBarElement?.classList.remove('hovered');
     this.host.classList.remove('resultHovered');
   };
   public render() {
@@ -154,7 +149,7 @@ export class AtomicInsightResult {
   }
 
   public componentDidLoad() {
-    const resultActionBarElement = this.host.shadowRoot?.querySelector(
+    this.resultActionBarElement = this.host.shadowRoot?.querySelector(
       'atomic-insight-result-action-bar'
     );
     const resultActionElement = this.host.shadowRoot?.querySelectorAll(
@@ -163,12 +158,24 @@ export class AtomicInsightResult {
     if (this.loadingFlag && this.store) {
       this.store.unsetLoadingFlag(this.loadingFlag);
     }
-    if (resultActionBarElement && resultActionElement?.length) {
+    if (this.resultActionBarElement && resultActionElement?.length) {
       this.host.parentElement!.style.padding = '0px';
+      this.host.parentElement
+        ?.querySelectorAll('atomic-insight-result')[0]
+        .shadowRoot?.querySelector('atomic-insight-result-action-bar')
+        ?.classList.add('firstActionBarElement');
+
       this.host.classList.add('withActionBar');
       this.host.addEventListener('mouseover', this.handleMouseOver);
       this.host.addEventListener('mouseout', this.handleMouseOut);
     }
     applyFocusVisiblePolyfill(this.host);
   }
+
+  public disconnectedCallback() {
+    if (this.resultActionBarElement) {
+      this.host.removeEventListener('mouseover', this.handleMouseOver);
+      this.host.removeEventListener('mouseout', this.handleMouseOut);
+    }
+  }
 }