Fix width of filter group items (#1078)

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Fixed large drop shadows so they work on darker backgrounds ([#1079](https://github.com/elastic/eui/pull/1079))
 - Added `resize-observer-polyfill` as a dependency (was previously a devDependency) ([#1085](https://github.com/elastic/eui/pull/1085))
 - Fixed `EuiBasicTable` to inform its parent about a selection change triggered by a different set of `items` ([#1086](https://github.com/elastic/eui/pull/1086))
+- Fixed width of `EuiFilterGroup`'s popover ([#1078](https://github.com/elastic/eui/pull/1078))
 
 ## [`3.3.0`](https://github.com/elastic/eui/tree/v3.3.0)
 

src-docs/src/views/filter_group/filter_group.js

@@ -115,7 +115,6 @@ export default class extends Component {
           closePopover={this.closePopover.bind(this)}
           panelPaddingSize="none"
           withTitle
-          panelClassName="euiFilterGroup__popoverPanel"
         >
           <EuiPopoverTitle>
             <EuiFieldSearch />

src/components/filter_group/_filter_group.scss

@@ -21,6 +21,8 @@
   }
 }
 
+// A fixed width is required in IE11 because of the shift in widths that can be caused
+// by the loading animation that precedes the results.
 .euiFilterGroup__popoverPanel {
-  max-width: $euiSize * 20;
+  width: $euiSize * 18;
 }

src/components/filter_group/_filter_select_item.scss

@@ -2,6 +2,7 @@
   @include euiFontSizeS;
 
   padding: $euiSizeXS $euiSizeM;
+  display: block; // Necessary to make sure it doesn't force the whole popover to be too wide
   width: 100%;
   text-align: left;
   color: $euiTextColor;

src/components/flex/_flex_group.scss

@@ -11,6 +11,9 @@
   .euiFlexItem {
     flex-grow: 1;
     flex-basis: 0%; /* 2 */
+    @include internetExplorerOnly {
+      min-width: 1px;
+    }
   }
 }
 

src/components/flex/_flex_item.scss

@@ -1,9 +1,15 @@
 /**
  * 1. Allow EuiPanels to expand to fill the item.
+ * 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and
+ *    not cause weird wrapping issues.
  */
 .euiFlexItem {
   display: flex; /* 1 */
   flex-direction: column; /* 1 */
+
+  @include internetExplorerOnly {
+    min-width: 1px; /* 2 */
+  }
 
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.

src/global_styling/mixins/_helpers.scss

@@ -49,3 +49,13 @@
     background-color: transparent;
   }
 }
+
+
+/**
+ * Specifically target IE11, but not Edge.
+ */
+@mixin internetExplorerOnly {
+  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    @content;
+  }
+}