Fix truncation of long filter bar items (#43874) (#44179)

elastic · Aug 27, 2019 · d453a4a · d453a4a
1 parent 925f216
commit d453a4a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss
@@ -25,6 +25,15 @@
   transition: height $euiAnimSpeedNormal $euiAnimSlightResistance;
 }
 
+.globalFilterGroup__filterFlexItem {
+  overflow: hidden;
+  padding-bottom: 2px; // Allow the shadows of the pills to show
+}
+
+.globalFilterBar__flexItem {
+  max-width: calc(100% - #{$euiSizeXS}); // Width minus margin around each flex itm
+}
+
 @include euiBreakpoint('xs', 's') {
   .globalFilterGroup__wrapper-isVisible {
     // EUI Flexbox adds too much margin between responded items, this just moves it up

diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_item.scss b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_item.scss
@@ -40,9 +40,16 @@
     left: 0;
     width: $euiSizeXS;
     background-color: $euiColorVis0;
+    border-top-left-radius: $euiBorderRadius / 2;
+    border-bottom-left-radius: $euiBorderRadius / 2;
   }
 }
 
 .globalFilterItem__editorForm {
   padding: $euiSizeM;
 }
+
+.globalFilterItem__popover,
+.globalFilterItem__popoverAnchor {
+  display: block;
+}
diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
@@ -77,7 +77,7 @@ class FilterBarUI extends Component<Props, State> {
           />
         </EuiFlexItem>
 
-        <EuiFlexItem>
+        <EuiFlexItem className="globalFilterGroup__filterFlexItem">
           <EuiFlexGroup
             className={classes}
             wrap={true}
@@ -95,7 +95,7 @@ class FilterBarUI extends Component<Props, State> {
 
   private renderItems() {
     return this.props.filters.map((filter, i) => (
-      <EuiFlexItem key={i} grow={false}>
+      <EuiFlexItem key={i} grow={false} className="globalFilterBar__flexItem">
         <FilterItem
           id={`${i}`}
           filter={filter}

diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx
@@ -181,6 +181,8 @@ class FilterItemUI extends Component<Props, State> {
     return (
       <EuiPopover
         id={`popoverFor_filter${id}`}
+        className={`globalFilterItem__popover`}
+        anchorClassName={`globalFilterItem__popoverAnchor`}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
         button={badge}