Dark mode for kql bar (#29684) (#29850)

KQL bar now works in dark mode.

src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap

@@ -19,10 +19,10 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
       onOutsideClick={[Function]}
     >
       <div
-        aria-controls="typeahead-items"
+        aria-controls="kbnTypeahead__items"
         aria-expanded={false}
         aria-haspopup="true"
-        aria-owns="typeahead-items"
+        aria-owns="kbnTypeahead__items"
         role="combobox"
         style={
           Object {
@@ -44,7 +44,7 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
               <EuiFieldText
                 aria-activedescendant=""
                 aria-autocomplete="list"
-                aria-controls="typeahead-items"
+                aria-controls="kbnTypeahead__items"
                 aria-label="Search input"
                 autoComplete="off"
                 autoFocus={false}
@@ -121,10 +121,10 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
       onOutsideClick={[Function]}
     >
       <div
-        aria-controls="typeahead-items"
+        aria-controls="kbnTypeahead__items"
         aria-expanded={false}
         aria-haspopup="true"
-        aria-owns="typeahead-items"
+        aria-owns="kbnTypeahead__items"
         role="combobox"
         style={
           Object {
@@ -146,7 +146,7 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
               <EuiFieldText
                 aria-activedescendant=""
                 aria-autocomplete="list"
-                aria-controls="typeahead-items"
+                aria-controls="kbnTypeahead__items"
                 aria-label="Search input"
                 autoComplete="off"
                 autoFocus={true}
@@ -223,10 +223,10 @@ exports[`QueryBar Should render the given query 1`] = `
       onOutsideClick={[Function]}
     >
       <div
-        aria-controls="typeahead-items"
+        aria-controls="kbnTypeahead__items"
         aria-expanded={false}
         aria-haspopup="true"
-        aria-owns="typeahead-items"
+        aria-owns="kbnTypeahead__items"
         role="combobox"
         style={
           Object {
@@ -248,7 +248,7 @@ exports[`QueryBar Should render the given query 1`] = `
               <EuiFieldText
                 aria-activedescendant=""
                 aria-autocomplete="list"
-                aria-controls="typeahead-items"
+                aria-controls="kbnTypeahead__items"
                 aria-label="Search input"
                 autoComplete="off"
                 autoFocus={true}

src/ui/public/query_bar/components/query_bar.tsx

@@ -554,8 +554,8 @@ export class QueryBarUI extends Component<Props, State> {
               role="combobox"
               aria-haspopup="true"
               aria-expanded={this.state.isSuggestionsVisible}
-              aria-owns="typeahead-items"
+              aria-owns="kbnTypeahead__items"
-              aria-controls="typeahead-items"
+              aria-controls="kbnTypeahead__items"
             >
               <form role="form" name="queryBarForm">
                 <div className="kuiLocalSearch" role="search">
@@ -588,7 +588,7 @@ export class QueryBarUI extends Component<Props, State> {
                       type="text"
                       data-test-subj="queryInput"
                       aria-autocomplete="list"
-                      aria-controls="typeahead-items"
+                      aria-controls="kbnTypeahead__items"
                       aria-activedescendant={
                         this.state.isSuggestionsVisible ? 'suggestion-' + this.state.index : ''
                       }

src/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap

@@ -3,17 +3,17 @@
 exports[`SuggestionComponent Should display the suggestion and use the provided ariaId 1`] = `
 <div
   aria-selected={false}
-  className="typeahead-item"
+  className="kbnTypeahead__item"
   id="suggestion-1"
   onClick={[Function]}
   onMouseEnter={[Function]}
   role="option"
 >
   <div
-    className="suggestionItem suggestionItem--value"
+    className="kbnSuggestionItem kbnSuggestionItem--value"
   >
     <div
-      className="suggestionItem__type"
+      className="kbnSuggestionItem__type"
     >
       <EuiIcon
         size="m"
@@ -21,12 +21,12 @@ exports[`SuggestionComponent Should display the suggestion and use the provided
       />
     </div>
     <div
-      className="suggestionItem__text"
+      className="kbnSuggestionItem__text"
     >
       as promised, not helpful
     </div>
     <div
-      className="suggestionItem__description"
+      className="kbnSuggestionItem__description"
       dangerouslySetInnerHTML={
         Object {
           "__html": "This is not a helpful suggestion",
@@ -40,17 +40,17 @@ exports[`SuggestionComponent Should display the suggestion and use the provided
 exports[`SuggestionComponent Should make the element active if the selected prop is true 1`] = `
 <div
   aria-selected={true}
-  className="typeahead-item active"
+  className="kbnTypeahead__item active"
   id="suggestion-1"
   onClick={[Function]}
   onMouseEnter={[Function]}
   role="option"
 >
   <div
-    className="suggestionItem suggestionItem--value"
+    className="kbnSuggestionItem kbnSuggestionItem--value"
   >
     <div
-      className="suggestionItem__type"
+      className="kbnSuggestionItem__type"
     >
       <EuiIcon
         size="m"
@@ -58,12 +58,12 @@ exports[`SuggestionComponent Should make the element active if the selected prop
       />
     </div>
     <div
-      className="suggestionItem__text"
+      className="kbnSuggestionItem__text"
     >
       as promised, not helpful
     </div>
     <div
-      className="suggestionItem__description"
+      className="kbnSuggestionItem__description"
       dangerouslySetInnerHTML={
         Object {
           "__html": "This is not a helpful suggestion",

src/ui/public/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap

@@ -5,14 +5,14 @@ exports[`SuggestionsComponent Passing the index should control which suggestion
   className="reactSuggestionTypeahead"
 >
   <div
-    className="typeahead"
+    className="kbnTypeahead"
   >
     <div
-      className="typeahead-popover"
+      className="kbnTypeahead__popover"
     >
       <div
-        className="typeahead-items"
+        className="kbnTypeahead__items"
-        id="typeahead-items"
+        id="kbnTypeahead__items"
         onScroll={[Function]}
         role="listbox"
       >
@@ -61,14 +61,14 @@ exports[`SuggestionsComponent Should display given suggestions if the show prop
   className="reactSuggestionTypeahead"
 >
   <div
-    className="typeahead"
+    className="kbnTypeahead"
   >
     <div
-      className="typeahead-popover"
+      className="kbnTypeahead__popover"
     >
       <div
-        className="typeahead-items"
+        className="kbnTypeahead__items"
-        id="typeahead-items"
+        id="kbnTypeahead__items"
         onScroll={[Function]}
         role="listbox"
       >

src/ui/public/query_bar/components/typeahead/_suggestion.scss

@@ -1,7 +1,15 @@
-.typeahead {
+// These are the various types in the dropdown, they each get a color
+$kbnTypeaheadTypes: (
+  field: $euiColorWarning,
+  value: $euiColorSecondary,
+  operator: $euiColorPrimary,
+  conjunction: $typeaheadConjunctionColor,
+);
+
+.kbnTypeahead {
   position: relative;
 
-  .typeahead-popover {
+  .kbnTypeahead__popover {
     @include euiBottomShadow($adjustBorders: true);
     border: 1px solid;
     border-color: $euiBorderColor;
@@ -13,12 +21,14 @@
     width: 100%;
     border-radius: $euiBorderRadius;
 
-    .typeahead-items {
+    .kbnTypeahead__items {
+      @include euiScrollBar;
+
       max-height: 60vh;
       overflow-y: auto;
     }
 
-    .typeahead-item {
+    .kbnTypeahead__item {
       height: $euiSizeXL;
       white-space: nowrap;
       font-size: $euiFontSizeXS;
@@ -28,134 +38,84 @@
       line-height: normal;
     }
 
-    .typeahead-item:hover {
+    .kbnTypeahead__item:hover {
       cursor: pointer;
     }
 
-    .typeahead-item:last-child {
+    .kbnTypeahead__item:last-child {
       border-bottom: 0px;
       border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
     }
 
-    .typeahead-item:first-child {
+    .kbnTypeahead__item:first-child {
       border-bottom: 0px;
       border-radius: $euiBorderRadius $euiBorderRadius 0 0;
     }
 
-    .typeahead-item.active {
+    .kbnTypeahead__item.active {
       background-color: $euiColorLightestShade;
 
 
-      .suggestionItem__callout {
+      .kbnSuggestionItem__callout {
         background: $euiColorEmptyShade;
       }
 
-      .suggestionItem__text {
+      .kbnSuggestionItem__text {
         color: $euiColorFullShade;
       }
 
-      .suggestionItem__type {
+      .kbnSuggestionItem__type {
         color: $euiColorFullShade;
       }
 
-      .suggestionItem--field {
+      @each $name, $color in $kbnTypeaheadTypes {
-        .suggestionItem__type {
+        .kbnSuggestionItem--#{$name} {
-          background-color: tint($euiColorWarning, 80%);
+          .kbnSuggestionItem__type {
+            background-color: tintOrShade($color, 80%, 60%);
           }
         }
-
-      .suggestionItem--value {
-        .suggestionItem__type {
-          background-color: tint($euiColorSecondary, 80%);
       }
     }
-
-      .suggestionItem--operator {
-        .suggestionItem__type {
-          background-color: tint($euiColorPrimary, 80%);
-        }
-      }
-
-      .suggestionItem--conjunction {
-        .suggestionItem__type {
-          background-color: tint($typeaheadConjunctionColor, 80%);
-        }
-      }
-
-    }
   }
 }
 
-.inline-form .typeahead.visible .input-group {
+.kbnSuggestionItem {
-  > :first-child {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  > :last-child {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}
-
-.suggestionItem {
   display: flex;
   align-items: stretch;
   flex-grow: 1;
   align-items: center;
   font-size: $euiFontSizeXS;
   white-space: nowrap;
-  &.suggestionItem--field {
+
-    .suggestionItem__type {
+  @each $name, $color in $kbnTypeaheadTypes {
-      background-color: tint($euiColorWarning, 90%);
+    &.kbnSuggestionItem--#{$name} {
-      color: makeHighContrastColor($euiColorWarning, tint($euiColorWarning, 90%));
+      .kbnSuggestionItem__type {
+        background-color: tintOrShade($color, 90%, 50%);
+        color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
+      }
     }
   }
 
-  &.suggestionItem--value {
+  &.kbnSuggestionItem--recentSearch {
-    .suggestionItem__type {
+    .kbnSuggestionItem__type {
-      background-color: tint($euiColorSecondary, 90%);
-      color: makeHighContrastColor($euiColorSecondary, tint($euiColorSecondary, 90%));
-    }
-
-    .suggestionItem__text {
-      width: auto;
-    }
-  }
-
-  &.suggestionItem--operator {
-    .suggestionItem__type {
-      background-color: tint($euiColorPrimary, 90%);
-      color: makeHighContrastColor($euiColorPrimary, tint($euiColorSecondary, 90%));
-    }
-  }
-
-  &.suggestionItem--conjunction {
-    .suggestionItem__type {
-      background-color: tint($typeaheadConjunctionColor, 90%);
-      color: makeHighContrastColor($typeaheadConjunctionColor, tint($typeaheadConjunctionColor, 90%));
-    }
-  }
-
-  &.suggestionItem--recentSearch {
-    .suggestionItem__type {
       background-color: $euiColorLightShade;
       color: $euiColorMediumShade;
     }
 
-    .suggestionItem__text {
+    .kbnSuggestionItem__text {
       width: auto;
     }
   }
 }
 
-.suggestionItem__text, .suggestionItem__type, .suggestionItem__description {
+.kbnSuggestionItem__text, .kbnSuggestionItem__type, .kbnSuggestionItem__description {
   flex-grow: 1;
   flex-basis: 0%;
   display: flex;
   flex-direction: column;
 }
 
-.suggestionItem__type {
+.kbnSuggestionItem__type {
   flex-grow: 0;
   flex-basis: auto;
   width: $euiSizeXL;
@@ -168,7 +128,7 @@
 }
 
 
-.suggestionItem__text {
+.kbnSuggestionItem__text {
   flex-grow: 0; /* 2 */
   flex-basis: auto; /* 2 */
   font-family: $euiCodeFontFamily;
@@ -177,16 +137,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding: $euiSizeXS $euiSizeS;
-  color: #111;
+  color: $euiTextColor;
 }
 
-.suggestionItem__description {
+.kbnSuggestionItem__description {
   color: $euiColorDarkShade;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.suggestionItem__callout {
+.kbnSuggestionItem__callout {
   font-family: $euiCodeFontFamily;
   background: $euiColorLightestShade;
   color: $euiColorFullShade;

src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx

@@ -67,7 +67,7 @@ describe('SuggestionComponent', () => {
 
   it('Should call innerRef with a reference to the root div element', () => {
     const innerRefCallback = (ref: HTMLDivElement) => {
-      expect(ref.className).toBe('typeahead-item');
+      expect(ref.className).toBe('kbnTypeahead__item');
       expect(ref.id).toBe('suggestion-1');
     };
 

src/ui/public/query_bar/components/typeahead/suggestion_component.tsx

@@ -52,7 +52,7 @@ export const SuggestionComponent: SFC<Props> = props => {
   return (
     <div
       className={classNames({
-        'typeahead-item': true,
+        kbnTypeahead__item: true,
         active: props.selected,
       })}
       role="option"
@@ -62,13 +62,13 @@ export const SuggestionComponent: SFC<Props> = props => {
       id={props.ariaId}
       aria-selected={props.selected}
     >
-      <div className={'suggestionItem suggestionItem--' + props.suggestion.type}>
+      <div className={'kbnSuggestionItem kbnSuggestionItem--' + props.suggestion.type}>
-        <div className="suggestionItem__type">
+        <div className="kbnSuggestionItem__type">
           <EuiIcon type={getEuiIconType(props.suggestion.type)} />
         </div>
-        <div className="suggestionItem__text">{props.suggestion.text}</div>
+        <div className="kbnSuggestionItem__text">{props.suggestion.text}</div>
         <div
-          className="suggestionItem__description"
+          className="kbnSuggestionItem__description"
           // Description currently always comes from us and we escape any potential user input
           // at the time we're generating the description text
           // eslint-disable-next-line react/no-danger

src/ui/public/query_bar/components/typeahead/suggestions_component.tsx

@@ -56,11 +56,11 @@ export class SuggestionsComponent extends Component<Props> {
 
     return (
       <div className="reactSuggestionTypeahead">
-        <div className="typeahead">
+        <div className="kbnTypeahead">
-          <div className="typeahead-popover">
+          <div className="kbnTypeahead__popover">
             <div
-              id="typeahead-items"
+              id="kbnTypeahead__items"
-              className="typeahead-items"
+              className="kbnTypeahead__items"
               role="listbox"
               ref={node => (this.parentNode = node)}
               onScroll={this.handleScroll}

x-pack/plugins/kuery_autocomplete/public/autocomplete_providers/conjunction.js

@@ -21,7 +21,7 @@ const conjunctions = {
   and: '<p>' +
     i18n.translate('xpack.kueryAutocomplete.andOperatorDescription', {
       defaultMessage: 'Requires {bothArguments} to be true',
-      values: { bothArguments: `<span class="suggestionItem__callout">${bothArgumentsText}</span>` },
+      values: { bothArguments: `<span class="kbnSuggestionItem__callout">${bothArgumentsText}</span>` },
       description: 'Full text: "Requires both arguments to be true". See ' +
         'xpack.kueryAutocomplete.andOperatorDescription.bothArgumentsText for "both arguments" part.'
     }) +
@@ -29,7 +29,7 @@ const conjunctions = {
   or: '<p>' +
     i18n.translate('xpack.kueryAutocomplete.orOperatorDescription', {
       defaultMessage: 'Requires {oneOrMoreArguments} to be true',
-      values: { oneOrMoreArguments: `<span class="suggestionItem__callout">${oneOrMoreArgumentsText}</span>` },
+      values: { oneOrMoreArguments: `<span class="kbnSuggestionItem__callout">${oneOrMoreArgumentsText}</span>` },
       description: 'Full text: "Requires one or more arguments to be true". See ' +
       'xpack.kueryAutocomplete.orOperatorDescription.oneOrMoreArgumentsText for "one or more arguments" part.'
     }) +

x-pack/plugins/kuery_autocomplete/public/autocomplete_providers/field.js

@@ -17,7 +17,7 @@ function getDescription(fieldName) {
   return '<p>' +
     i18n.translate('xpack.kueryAutocomplete.filterResultsDescription', {
       defaultMessage: 'Filter results that contain {fieldName}',
-      values: { fieldName: `<span class="suggestionItem__callout">${escape(fieldName)}</span>` }
+      values: { fieldName: `<span class="kbnSuggestionItem__callout">${escape(fieldName)}</span>` }
     }) +
     '</p>';
 }

x-pack/plugins/kuery_autocomplete/public/autocomplete_providers/operator.js

@@ -38,7 +38,7 @@ const operators = {
   ':': {
     description: i18n.translate('xpack.kueryAutocomplete.equalOperatorDescription', {
       defaultMessage: '{equals} some value',
-      values: { equals: `<span class="suggestionItem__callout">${equalsText}</span>` },
+      values: { equals: `<span class="kbnSuggestionItem__callout">${equalsText}</span>` },
       description: 'Full text: "equals some value". See ' +
       'xpack.kueryAutocomplete.equalOperatorDescription.equalsText for "equals" part.'
     }),
@@ -47,7 +47,7 @@ const operators = {
   '<=': {
     description: i18n.translate('xpack.kueryAutocomplete.lessThanOrEqualOperatorDescription', {
       defaultMessage: 'is {lessThanOrEqualTo} some value',
-      values: { lessThanOrEqualTo: `<span class="suggestionItem__callout">${lessThanOrEqualToText}</span>` },
+      values: { lessThanOrEqualTo: `<span class="kbnSuggestionItem__callout">${lessThanOrEqualToText}</span>` },
       description: 'Full text: "is less than or equal to some value". See ' +
       'xpack.kueryAutocomplete.lessThanOrEqualOperatorDescription.lessThanOrEqualToText for "less than or equal to" part.'
     }),
@@ -56,7 +56,7 @@ const operators = {
   '>=': {
     description: i18n.translate('xpack.kueryAutocomplete.greaterThanOrEqualOperatorDescription', {
       defaultMessage: 'is {greaterThanOrEqualTo} some value',
-      values: { greaterThanOrEqualTo: `<span class="suggestionItem__callout">${greaterThanOrEqualToText}</span>` },
+      values: { greaterThanOrEqualTo: `<span class="kbnSuggestionItem__callout">${greaterThanOrEqualToText}</span>` },
       description: 'Full text: "is greater than or equal to some value". See ' +
       'xpack.kueryAutocomplete.greaterThanOrEqualOperatorDescription.greaterThanOrEqualToText for "greater than or equal to" part.'
     }),
@@ -65,7 +65,7 @@ const operators = {
   '<': {
     description: i18n.translate('xpack.kueryAutocomplete.lessThanOperatorDescription', {
       defaultMessage: 'is {lessThan} some value',
-      values: { lessThan: `<span class="suggestionItem__callout">${lessThanText}</span>` },
+      values: { lessThan: `<span class="kbnSuggestionItem__callout">${lessThanText}</span>` },
       description: 'Full text: "is less than some value". See ' +
       'xpack.kueryAutocomplete.lessThanOperatorDescription.lessThanText for "less than" part.'
     }),
@@ -74,7 +74,7 @@ const operators = {
   '>': {
     description: i18n.translate('xpack.kueryAutocomplete.greaterThanOperatorDescription', {
       defaultMessage: 'is {greaterThan} some value',
-      values: { greaterThan: `<span class="suggestionItem__callout">${greaterThanText}</span>` },
+      values: { greaterThan: `<span class="kbnSuggestionItem__callout">${greaterThanText}</span>` },
       description: 'Full text: "is greater than some value". See ' +
       'xpack.kueryAutocomplete.greaterThanOperatorDescription.greaterThanText for "greater than" part.'
     }),
@@ -83,7 +83,7 @@ const operators = {
   ':*': {
     description: i18n.translate('xpack.kueryAutocomplete.existOperatorDescription', {
       defaultMessage: '{exists} in any form',
-      values: { exists: `<span class="suggestionItem__callout">${existsText}</span>` },
+      values: { exists: `<span class="kbnSuggestionItem__callout">${existsText}</span>` },
       description: 'Full text: "exists in any form". See ' +
       'xpack.kueryAutocomplete.existOperatorDescription.existsText for "exists" part.'
     })