Fixed regressions from Global Time Picker (#1044)

CHANGELOG.md

@@ -1,9 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.2.0`.
+**Bug fixes**
+
+- Removed IE flex column fix in favor of forcing the consumer to add a `grow` prop. ([#1044](https://github.com/elastic/eui/pull/1044))
+- Removed max-width to children of `EuiPopover`. ([#1044](https://github.com/elastic/eui/pull/1044))
 
 ## [`3.2.0`](https://github.com/elastic/eui/tree/v3.2.0)
 
+**Note: this release creates a minor regression to the display of `EuiFlexItem`s inside a `column` `EuiFlexGroup`. This is fixed in `master`.**
+**Note: this release creates a minor regression to the display of `EuiPopoverTitle`. This is fixed in `master`.**
+
 - Added typings for 'EuiBadge' ([#1034](https://github.com/elastic/eui/pull/1034))
 - Added a visual pattern for Kibana's Global Date Picker ([#1026](https://github.com/elastic/eui/pull/1026))
 - Added `responsive` prop to `EuiFlexGrid` ([#1026](https://github.com/elastic/eui/pull/1026))

src-docs/src/views/date_picker/global_date_picker.js

@@ -312,7 +312,7 @@ export default class extends Component {
       }
 
       return (
-        <EuiFlexItem key={date}><EuiLink onClick={this.closePopover}>{dateRange || date}</EuiLink></EuiFlexItem>
+        <EuiFlexItem grow={false} key={date}><EuiLink onClick={this.closePopover}>{dateRange || date}</EuiLink></EuiFlexItem>
       );
     });
 

src-docs/src/views/flex/direction.js

@@ -7,8 +7,8 @@ import {
 
 export default () => (
   <EuiFlexGroup direction="column">
-    <EuiFlexItem>Content grid item</EuiFlexItem>
-    <EuiFlexItem>Another content grid item</EuiFlexItem>
-    <EuiFlexItem>Using the column direction</EuiFlexItem>
+    <EuiFlexItem grow={false}>Content grid item</EuiFlexItem>
+    <EuiFlexItem grow={false}>Another content grid item</EuiFlexItem>
+    <EuiFlexItem grow={false}>Using the column direction</EuiFlexItem>
   </EuiFlexGroup>
 );

src-docs/src/views/flex/flex_example.js

@@ -249,9 +249,20 @@ export const FlexExample = {
       code: directionHtml,
     }],
     text: (
-      <p>
-        You can change direction using the <EuiCode>direction</EuiCode> prop.
-      </p>
+      <div>
+        <p>
+          You can change direction using the <EuiCode>direction</EuiCode> prop.
+        </p>
+        <EuiCallOut color="warning" title="IE11 Warning">
+          <p>
+            Depending on the nested structure of your flex groups, it is possible that
+            flex-items inside a column directed flex group will not show. To counter this,
+            add the <code>grow</code> prop and set to either <code>false</code> or a number.
+            Setting <code>grow</code> to <code>true</code> will not suffice. You may also need
+            to adjust the <code>flex-basis</code> value.
+          </p>
+        </EuiCallOut>
+      </div>
     ),
     demo: <div className="guideDemo__highlightGrid"><Direction /></div>,
   }, {

src/components/flex/_flex_item.scss

@@ -8,18 +8,15 @@
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
    * 2. FlexItem can be manually set to not grow if needed.
-   * 3. Fix for IE or else flex item never shows
    */
-  .euiFlexGroup--directionColumn &, /* 3 */
-  .euiFlexGroup--directionColumnReverse &, /* 3 */
   &.euiFlexItem--flexGrowZero { /* 1 */
     flex-grow: 0; /* 2 */
     flex-basis: auto; /* 2 */
   }
 
   @for $i from 1 through 10 {
     &.euiFlexItem--flexGrow#{$i} {
-      flex-grow: $i
+      flex-grow: $i;
     }
   }
 }

src/components/popover/_popover.scss

@@ -35,10 +35,6 @@
   visibility: hidden; /* 2 */
   transform: translateY(0) translateX(0) translateZ(0); /* 2 */
 
-  > * {
-    max-width: 100%; /* 3 */
-  }
-
   &.euiPopover__panel-isOpen {
     opacity: 1;
     visibility: visible;