[Code] adjust search bar suggestions style (#32726)

elastic · Mar 8, 2019 · 08d0766 · 08d0766
1 parent b7eb82a
commit 08d0766
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
@@ -134,7 +134,6 @@
 }
 
 .codeSearch__suggestion-item {
-  background: $euiColorLightestShade;
   height: 3rem;
   margin: 0 $euiSize;
   border-radius: $euiSizeXS;
@@ -146,7 +145,7 @@
   }
 }
 
-.codeSearch__suggestion--active {
+.codeSearch__suggestion-item--active {
   background: $euiColorLightShade;
 }
 
@@ -188,15 +187,24 @@
   overflow-x: hidden;
 }
 
+.codeSearch-suggestion__group {
+  border-top: $euiBorderThin;
+}
+
 .codeSearch-suggestion__group-header {
   padding: $euiSizeL;
-  border-top: $euiBorderThin;
 }
 .codeSearch-suggestion__group-title {
+  font-weight: bold;
   margin-left: $euiSizeS;
   display: inline-block;
 }
 
+.codeSearch-suggestion__group-result {
+  color: $euiColorDarkShade;
+  font-size: $euiFontSizeXS;
+}
+
 .codeSearch-suggestion__link {
   height: $euiSize;
   line-height: $euiSize;

diff --git a/...mponents/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap b/...mponents/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
@@ -132,7 +132,7 @@ exports[`render full suggestions component 1`] = `
             className="kbnTypeahead__popover"
           >
             <div
-              className="kbnTypeahead__items"
+              className="kbnTypeahead__items codeSearch-suggestion__group"
               data-test-subj="codeTypeaheadList-symbol"
               id="kbnTypeahead__items"
               key="symbol-suggestions"
@@ -214,7 +214,9 @@ exports[`render full suggestions component 1`] = `
                       </EuiText>
                     </div>
                   </EuiFlexGroup>
-                  <div>
+                  <div
+                    className="codeSearch-suggestion__group-result"
+                  >
                     1
                      Result
                   </div>
@@ -315,7 +317,7 @@ exports[`render full suggestions component 1`] = `
               </Component>
             </div>
             <div
-              className="kbnTypeahead__items"
+              className="kbnTypeahead__items codeSearch-suggestion__group"
               data-test-subj="codeTypeaheadList-file"
               id="kbnTypeahead__items"
               key="file-suggestions"
@@ -397,7 +399,9 @@ exports[`render full suggestions component 1`] = `
                       </EuiText>
                     </div>
                   </EuiFlexGroup>
-                  <div>
+                  <div
+                    className="codeSearch-suggestion__group-result"
+                  >
                     1
                      Result
                   </div>
@@ -451,7 +455,7 @@ exports[`render full suggestions component 1`] = `
               </Component>
             </div>
             <div
-              className="kbnTypeahead__items"
+              className="kbnTypeahead__items codeSearch-suggestion__group"
               data-test-subj="codeTypeaheadList-repository"
               id="kbnTypeahead__items"
               key="repository-suggestions"
@@ -534,7 +538,9 @@ exports[`render full suggestions component 1`] = `
                       </EuiText>
                     </div>
                   </EuiFlexGroup>
-                  <div>
+                  <div
+                    className="codeSearch-suggestion__group-result"
+                  >
                     2
                      Result
                     s

diff --git a/...k/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx b/...k/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
@@ -95,7 +95,7 @@ export class SuggestionsComponent extends Component<Props> {
                 {this.getGroupTitle(group.type)}
               </EuiText>
             </EuiFlexGroup>
-            <div>
+            <div className="codeSearch-suggestion__group-result">
               {total} Result
               {total === 1 ? '' : 's'}
             </div>
@@ -117,7 +117,7 @@ export class SuggestionsComponent extends Component<Props> {
         return (
           <div
             id="kbnTypeahead__items"
-            className="kbnTypeahead__items"
+            className="kbnTypeahead__items codeSearch-suggestion__group"
             role="listbox"
             data-test-subj={`codeTypeaheadList-${type}`}
             ref={node => (this.parentNode = node)}