diff --git a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss index eae39f91450..84556365cd7 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss +++ b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss @@ -18,7 +18,7 @@ atomic-insight-result-action-bar { } } -.hovered { +.showActionBar { @apply visible; } 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 index cfa81e38c93..b9097c5865f 100644 --- 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 @@ -7,19 +7,19 @@ atomic-result-section-children { } :host(.resultHovered) { - position: relative; + @apply relative; .with-sections { background-color: #f2f2f2; } } -:host(.withActionBar) { +:host { .with-sections { - padding: 1.5rem; + @apply p-6; } } -:host(.withActionBar)::before { - margin: 0px 1.5rem !important; +:host::before { + @apply my-0 mx-6 !important; } 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 index 01bd0dc0c05..5b811719e0a 100644 --- 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,7 +24,6 @@ import {AtomicInsightStore} from '../atomic-insight-interface/store'; }) export class AtomicInsightResult { private layout!: ResultLayout; - private resultActionBarElement?: HTMLElement | null; @Element() host!: HTMLElement; /** @@ -125,14 +124,33 @@ export class AtomicInsightResult { } private handleMouseOver = () => { - this.resultActionBarElement?.classList.add('hovered'); + this.resultActionBar?.classList.add('showActionBar'); this.host.classList.add('resultHovered'); }; private handleMouseOut = () => { - this.resultActionBarElement?.classList.remove('hovered'); + this.resultActionBar?.classList.remove('showActionBar'); this.host.classList.remove('resultHovered'); }; + + private get resultActionBar() { + return this.host.shadowRoot?.querySelector( + 'atomic-insight-result-action-bar' + ); + } + + private get resultActions() { + return this.host.shadowRoot?.querySelectorAll( + 'atomic-insight-result-action' + ); + } + + private get firstChildActionBar() { + return this.host.parentElement + ?.querySelectorAll('atomic-insight-result')[0] + .shadowRoot?.querySelector('atomic-insight-result-action-bar'); + } + public render() { return ( @@ -149,23 +167,11 @@ export class AtomicInsightResult { } public componentDidLoad() { - this.resultActionBarElement = this.host.shadowRoot?.querySelector( - 'atomic-insight-result-action-bar' - ); - const resultActionElement = this.host.shadowRoot?.querySelectorAll( - 'atomic-insight-result-action' - ); if (this.loadingFlag && this.store) { this.store.unsetLoadingFlag(this.loadingFlag); } - 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'); + if (this.resultActionBar && this.resultActions?.length) { + this.firstChildActionBar?.classList.add('firstActionBarElement'); this.host.addEventListener('mouseover', this.handleMouseOver); this.host.addEventListener('mouseout', this.handleMouseOut); } @@ -173,7 +179,7 @@ export class AtomicInsightResult { } public disconnectedCallback() { - if (this.resultActionBarElement) { + if (this.resultActionBar) { this.host.removeEventListener('mouseover', this.handleMouseOver); this.host.removeEventListener('mouseout', this.handleMouseOut); } diff --git a/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss b/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss index 410391f8e91..324ac1d1bc8 100644 --- a/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss +++ b/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss @@ -2,5 +2,5 @@ @import '../styles/list-display.pcss'; .list-root { - padding: 1.5rem 1.5rem 0 1.5rem; + @apply p-0; }