[KQL] Fixed styles of KQL textarea for the K8 theme (#96190)

* Fixed style of KQL textarea for K8 theme and some general heights and borders * Fix popover paddings
elastic · Apr 5, 2021 · 76acef0 · 76acef0
1 parent b670ef2
commit 76acef0
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
@@ -85,7 +85,7 @@ class FilterEditorUI extends Component<Props, State> {
   public render() {
     return (
       <div>
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="m">
           <EuiFlexGroup alignItems="baseline" responsive={false}>
             <EuiFlexItem>
               <FormattedMessage

diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -161,7 +161,7 @@ class FilterOptionsUI extends Component<Props, State> {
         panelPaddingSize="none"
         repositionOnScroll
       >
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="m">
           <FormattedMessage
             id="data.filter.searchBar.changeAllFiltersTitle"
             defaultMessage="Change all filters"

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -6,26 +6,39 @@
 // Uses the append style, but no bordering
 .kqlQueryBar__languageSwitcherButton {
   border-right: none !important;
+  border-left: $euiFormInputGroupBorder;
 }
 
 .kbnQueryBar__textareaWrap {
   overflow: visible !important; // Override EUI form control
   display: flex;
   flex: 1 1 100%;
   position: relative;
+
+  @include kbnThemeStyle('v8') {
+    background-color: $euiFormBackgroundColor;
+  }
 }
 
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
-  height: $euiFormControlHeight;
+  height: $euiFormControlHeight - 2px;
   // Unlike most inputs within layout control groups, the text area still needs a border
   // for multi-line content. These adjusts help it sit above the control groups
   // shadow to line up correctly.
   padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
   box-shadow: 0 0 0 1px $euiFormBorderColor;
 
+  @include kbnThemeStyle('v7') {
+    padding-top: $euiSizeS + 2px;
+  }
+
+  @include kbnThemeStyle('v8') {
+    border-radius: 0;
+    padding-bottom: $euiSizeS + 1px;
+  }
+
   &:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
     @include euiYScrollWithShadows;
   }

diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
@@ -96,7 +96,7 @@ export function QueryLanguageSwitcher({
         />
       </EuiPopoverTitle>
       <div style={{ width: '350px' }}>
-        <EuiText>
+        <EuiText size="s">
           <p>
             <FormattedMessage
               id="data.query.queryBar.syntaxOptionsDescription"

diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -202,7 +202,7 @@ export function SavedQueryManagementComponent({
           className="kbnSavedQueryManagement__popover"
           data-test-subj="saved-query-management-popover"
         >
-          <EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}>
+          <EuiPopoverTitle paddingSize="m" id={'savedQueryManagementPopoverTitle'}>
             {savedQueryPopoverTitleText}
           </EuiPopoverTitle>
           {savedQueries.length > 0 ? (
@@ -234,7 +234,7 @@ export function SavedQueryManagementComponent({
               <EuiSpacer size="s" />
             </Fragment>
           )}
-          <EuiPopoverFooter>
+          <EuiPopoverFooter paddingSize="m">
             <EuiFlexGroup
               direction="rowReverse"
               gutterSize="s"