feat(atomic): add result action bar on hover (#3002)

* feat(atomic): add result action bar on hover * feat(atomic): change action bar css * feat(atomic): change result background color * feat(atomic): change action bar marging * feat(atomic): change to tailwind classes and small refacto * feat(atomic): update css to not change parent element css * feat(atomic): change prop name and update typo * feat(atomic): add css color variable * feat(atomic): remove important from css * feat(atomic): add extra padding for first element * embrace CSS (#3019) * use CSS for hover * handle first with CSS * always relative --------- Co-authored-by: Louis Bompart <[email protected]>
coveo · Jul 10, 2023 · d2ed389 · d2ed389
1 parent 04f6b72
commit d2ed389
Show file tree

Hide file tree

Showing 12 changed files with 188 additions and 1 deletion.
diff --git a/packages/atomic/cypress/integration-insight-panel/insight-panel-selectors.ts b/packages/atomic/cypress/integration-insight-panel/insight-panel-selectors.ts
@@ -67,4 +67,8 @@ export const InsightPanelsSelectors = {
     InsightPanelsSelectors.interface().find(
       'atomic-insight-smart-snippet-feedback-modal'
     ),
+  resultActionBar: () =>
+    InsightPanelsSelectors.results()
+      .shadow()
+      .find('atomic-insight-result-action-bar'),
 };
diff --git a/packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts b/packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts
@@ -67,6 +67,15 @@ describe('Insight Panel test suites', () => {
         .should('have.attr', 'href');
     });
 
+    it('should display result action bar', () => {
+      InsightPanelsSelectors.resultActionBar()
+        .should('exist')
+        .should('have.length.at.least', 1)
+        .find('button')
+        .find('atomic-icon')
+        .should('exist');
+    });
+
     it('should display pagination', () => {
       InsightPanelsSelectors.pager()
         .should('exist')

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -615,6 +615,18 @@ export namespace Components {
          */
         "store"?: AtomicInsightStore;
     }
+    interface AtomicInsightResultAction {
+        /**
+          * Specify the result action icon to display.
+         */
+        "icon": string;
+        /**
+          * The text tooltip to show on the result action icon
+         */
+        "tooltip": string;
+    }
+    interface AtomicInsightResultActionBar {
+    }
     interface AtomicInsightResultChildren {
         /**
           * The expected size of the image displayed in the children results.
@@ -2234,6 +2246,18 @@ declare global {
         prototype: HTMLAtomicInsightResultElement;
         new (): HTMLAtomicInsightResultElement;
     };
+    interface HTMLAtomicInsightResultActionElement extends Components.AtomicInsightResultAction, HTMLStencilElement {
+    }
+    var HTMLAtomicInsightResultActionElement: {
+        prototype: HTMLAtomicInsightResultActionElement;
+        new (): HTMLAtomicInsightResultActionElement;
+    };
+    interface HTMLAtomicInsightResultActionBarElement extends Components.AtomicInsightResultActionBar, HTMLStencilElement {
+    }
+    var HTMLAtomicInsightResultActionBarElement: {
+        prototype: HTMLAtomicInsightResultActionBarElement;
+        new (): HTMLAtomicInsightResultActionBarElement;
+    };
     interface HTMLAtomicInsightResultChildrenElement extends Components.AtomicInsightResultChildren, HTMLStencilElement {
     }
     var HTMLAtomicInsightResultChildrenElement: {
@@ -2848,6 +2872,8 @@ declare global {
         "atomic-insight-refine-modal": HTMLAtomicInsightRefineModalElement;
         "atomic-insight-refine-toggle": HTMLAtomicInsightRefineToggleElement;
         "atomic-insight-result": HTMLAtomicInsightResultElement;
+        "atomic-insight-result-action": HTMLAtomicInsightResultActionElement;
+        "atomic-insight-result-action-bar": HTMLAtomicInsightResultActionBarElement;
         "atomic-insight-result-children": HTMLAtomicInsightResultChildrenElement;
         "atomic-insight-result-children-template": HTMLAtomicInsightResultChildrenTemplateElement;
         "atomic-insight-result-list": HTMLAtomicInsightResultListElement;
@@ -3510,6 +3536,18 @@ declare namespace LocalJSX {
          */
         "store"?: AtomicInsightStore;
     }
+    interface AtomicInsightResultAction {
+        /**
+          * Specify the result action icon to display.
+         */
+        "icon"?: string;
+        /**
+          * The text tooltip to show on the result action icon
+         */
+        "tooltip"?: string;
+    }
+    interface AtomicInsightResultActionBar {
+    }
     interface AtomicInsightResultChildren {
         /**
           * The expected size of the image displayed in the children results.
@@ -4808,6 +4846,8 @@ declare namespace LocalJSX {
         "atomic-insight-refine-modal": AtomicInsightRefineModal;
         "atomic-insight-refine-toggle": AtomicInsightRefineToggle;
         "atomic-insight-result": AtomicInsightResult;
+        "atomic-insight-result-action": AtomicInsightResultAction;
+        "atomic-insight-result-action-bar": AtomicInsightResultActionBar;
         "atomic-insight-result-children": AtomicInsightResultChildren;
         "atomic-insight-result-children-template": AtomicInsightResultChildrenTemplate;
         "atomic-insight-result-list": AtomicInsightResultList;
@@ -4947,6 +4987,8 @@ declare module "@stencil/core" {
             "atomic-insight-refine-modal": LocalJSX.AtomicInsightRefineModal & JSXBase.HTMLAttributes<HTMLAtomicInsightRefineModalElement>;
             "atomic-insight-refine-toggle": LocalJSX.AtomicInsightRefineToggle & JSXBase.HTMLAttributes<HTMLAtomicInsightRefineToggleElement>;
             "atomic-insight-result": LocalJSX.AtomicInsightResult & JSXBase.HTMLAttributes<HTMLAtomicInsightResultElement>;
+            "atomic-insight-result-action": LocalJSX.AtomicInsightResultAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultActionElement>;
+            "atomic-insight-result-action-bar": LocalJSX.AtomicInsightResultActionBar & JSXBase.HTMLAttributes<HTMLAtomicInsightResultActionBarElement>;
             "atomic-insight-result-children": LocalJSX.AtomicInsightResultChildren & JSXBase.HTMLAttributes<HTMLAtomicInsightResultChildrenElement>;
             "atomic-insight-result-children-template": LocalJSX.AtomicInsightResultChildrenTemplate & JSXBase.HTMLAttributes<HTMLAtomicInsightResultChildrenTemplateElement>;
             "atomic-insight-result-list": LocalJSX.AtomicInsightResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightResultListElement>;

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
@@ -0,0 +1,19 @@
+@import '../../../global/global.pcss';
+
+atomic-insight-result-action-bar {
+  @apply flex absolute invisible right-6 top-[-1rem];
+
+  > atomic-insight-result-action:not(:last-child) {
+    button {
+      @apply rounded-r-none border-r-0;
+      &:hover {
+        @apply border-r;
+      }
+    }
+  }
+  > atomic-insight-result-action:not(:first-child) {
+    button {
+      @apply rounded-tl-none rounded-bl-none;
+    }
+  }
+}
diff --git a/.../components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.tsx b/.../components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.tsx
@@ -0,0 +1,17 @@
+import {Component, Element} from '@stencil/core';
+import {hideEmptySection} from '../../../utils/result-section-utils';
+
+/**
+ * @internal
+ */
+@Component({
+  tag: 'atomic-insight-result-action-bar',
+  styleUrl: 'atomic-insight-result-action-bar.pcss',
+})
+export class AtomicInsightResultActionBar {
+  @Element() private host!: HTMLElement;
+
+  public componentDidRender() {
+    hideEmptySection(this.host);
+  }
+}
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
@@ -0,0 +1,8 @@
+@import '../../../global/global.pcss';
+
+:host {
+  &::part(result-action-button) {
+    @apply flex items-center justify-center;
+    @apply h-8 w-8;
+  }
+}
diff --git a/...omic/src/components/insight/atomic-insight-result-action/atomic-insight-result-action.tsx b/...omic/src/components/insight/atomic-insight-result-action/atomic-insight-result-action.tsx
@@ -0,0 +1,41 @@
+import {Component, Prop, State, h} from '@stencil/core';
+import Quickview from '../../../images/quickview.svg';
+import {
+  InitializableComponent,
+  InitializeBindings,
+} from '../../../utils/initialization-utils';
+import {IconButton} from '../../common/iconButton';
+import {Bindings} from '../../search/atomic-search-interface/atomic-search-interface';
+
+/**
+ * @internal
+ */
+@Component({
+  tag: 'atomic-insight-result-action',
+  styleUrl: 'atomic-insight-result-action.pcss',
+})
+export class AtomicInsightResultAction implements InitializableComponent {
+  @InitializeBindings() public bindings!: Bindings;
+  @State() public error!: Error;
+
+  /**
+   * Specify the result action icon to display.
+   */
+  @Prop({mutable: true}) public icon = Quickview;
+
+  /**
+   * The text tooltip to show on the result action icon
+   */
+  @Prop({mutable: true}) public tooltip = '';
+
+  public render() {
+    return (
+      <IconButton
+        partPrefix="result-action"
+        style="outline-neutral"
+        icon={this.icon}
+        title={this.tooltip}
+      />
+    );
+  }
+}
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
@@ -5,3 +5,30 @@ atomic-result-section-children {
   border-left: 1px solid var(--atomic-neutral);
   padding-left: 1rem;
 }
+
+:host(:hover) {
+  .with-sections {
+    background-color: var(--atomic-neutral-lighter);
+  }
+
+  atomic-insight-result-action-bar {
+    @apply visible;
+  }
+}
+
+:host {
+  @apply relative;
+  .with-sections {
+    @apply p-6;
+  }
+}
+
+:host(:first-of-type) {
+  .with-sections {
+    @apply pt-8;
+  }
+
+  atomic-insight-result-action-bar {
+    @apply top-0;
+  }
+}
diff --git a/...ght/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss b/...ght/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;
 }
diff --git a/packages/atomic/src/components/insight/result-lists/styles/list-display.pcss b/packages/atomic/src/components/insight/result-lists/styles/list-display.pcss
@@ -18,4 +18,8 @@
   }
 
   @mixin atomic-list-with-dividers;
+
+  .result-component[part~='outline']::before {
+    @apply my-0 mx-6;
+  }
 }
diff --git a/packages/atomic/src/pages/examples/insights.html b/packages/atomic/src/pages/examples/insights.html
@@ -115,6 +115,11 @@
                     margin-right: 0.25rem;
                   }
                 </style>
+                <atomic-insight-result-action-bar>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                </atomic-insight-result-action-bar>
                 <atomic-result-section-badges>
                   <atomic-field-condition must-match-sourcetype="Salesforce">
                     <atomic-result-badge label="Salesforce" class="salesforce-badge"></atomic-result-badge>
@@ -177,6 +182,11 @@
                     border-radius: var(--atomic-border-radius-xl);
                   }
                 </style>
+                <atomic-insight-result-action-bar>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                </atomic-insight-result-action-bar>
                 <atomic-result-section-badges>
                   <atomic-field-condition must-match-sourcetype="Salesforce">
                     <atomic-result-badge label="Salesforce" class="salesforce-badge"></atomic-result-badge>
@@ -306,6 +316,11 @@
                     border-radius: var(--atomic-border-radius-xl);
                   }
                 </style>
+                <atomic-insight-result-action-bar>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                  <atomic-insight-result-action tooltip="test"></atomic-insight-result-action>
+                </atomic-insight-result-action-bar>
                 <atomic-result-section-badges>
                   <atomic-field-condition must-match-sourcetype="Salesforce">
                     <atomic-result-badge label="Salesforce" class="salesforce-badge"></atomic-result-badge>

diff --git a/packages/atomic/src/themes/coveo.css b/packages/atomic/src/themes/coveo.css
@@ -10,6 +10,7 @@
   --atomic-neutral-dark: #626971;
   --atomic-neutral: #e5e8e8;
   --atomic-neutral-light: #f6f7f9;
+  --atomic-neutral-lighter: #f2f2f2;
 
   /* Semantic colors */
   --atomic-background: #ffffff;