less disruptive hover effect for the omnibox result list (#397)

https://coveord.atlassian.net/browse/JSUI-1485
coveo · Mar 21, 2017 · 3ebf7b5 · 3ebf7b5
1 parent c06376f
commit 3ebf7b5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/sass/_OmniboxResultList.scss b/sass/_OmniboxResultList.scss
@@ -1,6 +1,13 @@
 .CoveoResult {
-	&.coveo-omnibox-selectable {
-	  padding: 10px 10px 10px 36px;
-	  margin: 0;
-	}
+  &.coveo-omnibox-selectable {
+    padding: 10px 10px 10px 36px;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  &.coveo-omnibox-result-list-element.coveo-omnibox-selectable.coveo-omnibox-selected {
+    padding: 7px 7px 8px 33px;
+    background-color: white;
+    border: $default-border;
+    border-width: 3px;
+  }
 }
diff --git a/src/ui/OmniboxResultList/OmniboxResultList.ts b/src/ui/OmniboxResultList/OmniboxResultList.ts
@@ -134,13 +134,13 @@ export class OmniboxResultList extends ResultList implements IComponentBindings
    */
   public buildResults(results: IQueryResults): HTMLElement[] {
     return _.map(results.results, (result: IQueryResult) => {
-      let resultElement = this.buildResult(result);
-      $$(resultElement).addClass('coveo-omnibox-selectable');
-      $$(resultElement).on('keyboardSelect', () => {
-        this.options.onSelect.call(this, result, resultElement, this.lastOmniboxRequest.omniboxObject);
+      let resultElement = $$(this.buildResult(result));
+      resultElement.addClass(['coveo-omnibox-selectable', 'coveo-omnibox-result-list-element']);
+      resultElement.on('keyboardSelect', () => {
+        this.options.onSelect.call(this, result, resultElement.el, this.lastOmniboxRequest.omniboxObject);
       });
-      this.autoCreateComponentsInsideResult(resultElement, result);
-      return resultElement;
+      this.autoCreateComponentsInsideResult(resultElement.el, result);
+      return resultElement.el;
     });
   }