From 70f0af57d1ec8dd7f07db74a3157d26f5f6ab0c7 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 6 Aug 2018 19:08:17 -0400
Subject: [PATCH] Fix width of filter group items (#1078)

---
 CHANGELOG.md                                         |  1 +
 src-docs/src/views/filter_group/filter_group.js      |  1 -
 src/components/filter_group/_filter_group.scss       |  4 +++-
 src/components/filter_group/_filter_select_item.scss |  1 +
 src/components/flex/_flex_group.scss                 |  3 +++
 src/components/flex/_flex_item.scss                  |  6 ++++++
 src/global_styling/mixins/_helpers.scss              | 10 ++++++++++
 7 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d19884bff4..9ff8150556d 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js
index ee1da0bb927..8901e84d607 100644
--- a/src-docs/src/views/filter_group/filter_group.js
+++ b/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 />
diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss
index a0b2f3b20b3..4986cf3dcae 100644
--- a/src/components/filter_group/_filter_group.scss
+++ b/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;
 }
diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss
index 2f9801983bc..e16e753bc79 100644
--- a/src/components/filter_group/_filter_select_item.scss
+++ b/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;
diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
index 4011c4ba70c..9ac6025af79 100644
--- a/src/components/flex/_flex_group.scss
+++ b/src/components/flex/_flex_group.scss
@@ -11,6 +11,9 @@
   .euiFlexItem {
     flex-grow: 1;
     flex-basis: 0%; /* 2 */
+    @include internetExplorerOnly {
+      min-width: 1px;
+    }
   }
 }
 
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 905cc9bb0af..184e8d5ac12 100644
--- a/src/components/flex/_flex_item.scss
+++ b/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.
diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss
index 16ec053e458..d69b1de2737 100644
--- a/src/global_styling/mixins/_helpers.scss
+++ b/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;
+  }
+}