Faux button group

elastic · Apr 18, 2022 · 9c92ae4 · 9c92ae4
1 parent f15c7fe
commit 9c92ae4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/src/plugins/unified_search/public/query_string_input/_query_bar.scss b/src/plugins/unified_search/public/query_string_input/_query_bar.scss
@@ -73,3 +73,18 @@
     }
   }
 }
+
+.kbnQueryBar__buttonGroup {
+  height: $euiFormControlHeight;
+  background-color: $euiFormInputGroupLabelBackground;
+  border-radius: $euiFormControlBorderRadius;
+  box-shadow: 0 0 1px inset rgba($euiFormBorderOpaqueColor, .4);
+
+  &--small {
+    height: $euiFormControlCompressedHeight;
+  }
+
+  > *:not(:last-of-type) {
+    border-right: 1px solid $euiFormBorderColor;
+  }
+}
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx
@@ -101,7 +101,7 @@ export function QueryBarMenu({
     <EuiToolTip delay="long" content={buttonLabel}>
       <EuiButtonIcon
         size="m"
-        display="base"
+        display="empty"
         onClick={onButtonClick}
         {...buttonProps}
         iconType="filter"

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx
@@ -385,17 +385,36 @@ export const QueryBarTopRow = React.memo(
               filters={props.filters}
               timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
               onFiltersUpdated={props.onFiltersUpdated}
-              buttonProps={{ size: shouldShowDatePickerAsBadge() ? 's' : 'm' }}
+              buttonProps={{ size: shouldShowDatePickerAsBadge() ? 's' : 'm', display: 'empty' }}
             />
           </EuiFlexItem>
         )
       );
     }
 
+    function renderFilterButtonGroup() {
+      return (
+        (Boolean(props.showAddFilter) || Boolean(props.prepend)) && (
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup
+              className={classNames('kbnQueryBar__buttonGroup', {
+                'kbnQueryBar__buttonGroup--small': shouldShowDatePickerAsBadge(),
+              })}
+              gutterSize="none"
+              responsive={false}
+            >
+              <EuiFlexItem grow={false}>{props.prepend}</EuiFlexItem>
+              {renderAddButton()}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        )
+      );
+    }
+
     function renderQueryInput() {
       return (
         <EuiFlexGroup gutterSize="s" responsive={false}>
-          <EuiFlexItem grow={false}>{props.prepend}</EuiFlexItem>
+          {renderFilterButtonGroup()}
           {shouldRenderQueryInput() && (
             <EuiFlexItem>
               <QueryStringInput
@@ -417,7 +436,6 @@ export const QueryBarTopRow = React.memo(
               />
             </EuiFlexItem>
           )}
-          {renderAddButton()}
         </EuiFlexGroup>
       );
     }