IE Fixes (mostly flex box)

src-docs/src/components/guide_components.scss

@@ -66,7 +66,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 }
 
 .guidePageContent {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   padding: $euiSize $euiSizeXL;
   min-height: 100vh;
   background-color: $euiColorEmptyShade;

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

@@ -15,6 +15,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlexGrid,
+  EuiLink,
 } from '../../../../src/components';
 
 import FlexGroup from './flex_group';
@@ -121,11 +122,21 @@ export const FlexExample = {
       code: flexGroupWrapHtml,
     }],
     text: (
-      <p>
-        You can set <EuiCode>wrap</EuiCode> on <EuiCode>FlexGroup</EuiCode> if it
-        contains <EuiCode>FlexItem</EuiCode>s with minimum widths, which you want to wrap as
-        the container becomes narrower.
-      </p>
+      <Fragment>
+        <p>
+          You can set <EuiCode>wrap</EuiCode> on <EuiCode>FlexGroup</EuiCode> if it
+          contains <EuiCode>FlexItem</EuiCode>s with minimum widths, which you want to wrap as
+          the container becomes narrower.
+        </p>
+        <EuiCallOut color="warning" title="IE Warning">
+          <p>
+            IE11 does not properly wrap flex items if the <strong>group</strong> is also within a flex item.
+            To fix this rendering issue, you need to add a class of <EuiCode>.euiIEFlexWrapFix</EuiCode> to the flex-item
+            that <strong>contains</strong> the wrapping group.
+          </p>
+        </EuiCallOut>
+      </Fragment>
+
     ),
     demo: <div className="guideDemo__highlightGrid"><FlexGroupWrap /></div>,
   }, {
@@ -286,11 +297,21 @@ export const FlexExample = {
       code: flexNestHtml,
     }],
     text: (
-      <p>
-        <EuiCode>FlexGroup</EuiCode> and <EuiCode>FlexGrid</EuiCode> can nest
-        within themselves indefinitely. For example, here we turn off the growth on a
-        <EuiCode>FlexGroup</EuiCode>, then nest a grid inside of it.
-      </p>
+      <Fragment>
+        <p>
+          <EuiCode>FlexGroup</EuiCode> and <EuiCode>FlexGrid</EuiCode> can nest
+      within themselves indefinitely. For example, here we turn off the growth on a
+          <EuiCode>FlexGroup</EuiCode>, then nest a grid inside of it.
+        </p>
+        <EuiCallOut color="warning" title="IE11 Warning">
+          <p>
+            Nesting can cause some nasty bugs in IE11. There is no generalized way to fix IE
+            without knowing the exact intention of the layout. Please refer
+            to <EuiLink href="https://github.com/philipwalton/flexbugs">Flexbugs</EuiLink> if
+            you see rendering issues in IE.
+          </p>
+        </EuiCallOut>
+      </Fragment>
     ),
     demo: <div className="guideDemo__highlightGrid"><FlexNest /></div>,
   }, {

src-docs/src/views/home/home_view.js

@@ -7,10 +7,6 @@ import imageForms from '../../images/forms.svg';
 import imageFlexgrid from '../../images/flexgrid.svg';
 import imageCards from '../../images/cards.svg';
 
-import {
-  Link,
-} from 'react-router';
-
 import {
   EuiCard,
   EuiFlexGrid,
@@ -92,70 +88,64 @@ export const HomeView = () => (
     <EuiSpacer />
     <EuiFlexGrid gutterSize="l" columns={3}>
       <EuiFlexItem>
-        <Link to="/display/icons">
-          <EuiCard
-            textAlign="left"
-            image={imageIcons}
-            isClickable
-            title="Icons"
-            description="Our SVG icon library gives you full control over size and color"
-          />
-        </Link>
+        <EuiCard
+          href="#/display/icons"
+          textAlign="left"
+          image={imageIcons}
+          isClickable
+          title="Icons"
+          description="Our SVG icon library gives you full control over size and color"
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/navigation/button">
-          <EuiCard
-            textAlign="left"
-            image={imageButtons}
-            title="Buttons"
-            isClickable
-            description="Buttons for every usage you might need."
-          />
-        </Link>
+        <EuiCard
+          href="#/navigation/button"
+          textAlign="left"
+          image={imageButtons}
+          title="Buttons"
+          isClickable
+          description="Buttons for every usage you might need."
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/layout/flex">
-          <EuiCard
-            textAlign="left"
-            image={imageFlexgrid}
-            title="Flexible layouts"
-            description="Create layouts by using flex groups, grids and items"
-            isClickable
-          />
-        </Link>
+        <EuiCard
+          href="#/layout/flex"
+          textAlign="left"
+          image={imageFlexgrid}
+          title="Flexible layouts"
+          description="Create layouts by using flex groups, grids and items"
+          isClickable
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/display/tables">
-          <EuiCard
-            textAlign="left"
-            image={imageTables}
-            title="Tables"
-            isClickable
-            description="Build tables from individual components or high level wrappers"
-          />
-        </Link>
+        <EuiCard
+          href="#/display/tables"
+          textAlign="left"
+          image={imageTables}
+          title="Tables"
+          isClickable
+          description="Build tables from individual components or high level wrappers"
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/display/card">
-          <EuiCard
-            textAlign="left"
-            image={imageCards}
-            title="Cards"
-            description="Cards like these help you make repeatable content more presentable"
-            isClickable
-          />
-        </Link>
+        <EuiCard
+          href="#/display/card"
+          textAlign="left"
+          image={imageCards}
+          title="Cards"
+          description="Cards like these help you make repeatable content more presentable"
+          isClickable
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/forms/form-layouts">
-          <EuiCard
-            textAlign="left"
-            image={imageForms}
-            title="Forms"
-            isClickable
-            description="Input tags, layouts and validation for your forms"
-          />
-        </Link>
+        <EuiCard
+          href="#/forms/form-layouts"
+          textAlign="left"
+          image={imageForms}
+          title="Forms"
+          isClickable
+          description="Input tags, layouts and validation for your forms"
+        />
       </EuiFlexItem>
     </EuiFlexGrid>
     <EuiSpacer />

src-docs/src/views/image/image_zoom.js

@@ -15,7 +15,7 @@ export default () => (
         allowFullScreen
         caption="Click me"
         alt="Accessible image alt goes here"
-        url="https://source.unsplash.com/2000x1000/?darkbackground"
+        url="https://source.unsplash.com/iYPIx7VIh5g/2000x1000/"
       />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
@@ -26,7 +26,7 @@ export default () => (
         caption="Click me"
         alt="Accessible image alt goes here"
         fullScreenIconColor="dark"
-        url="https://source.unsplash.com/1000x2000/?lightbackground"
+        url="https://source.unsplash.com/5D2af8aFE5k/1000x2000"
       />
     </EuiFlexItem>
   </EuiFlexGroup>

src/components/card/_card.scss

@@ -22,6 +22,8 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
   flex-direction: column;
   padding: $euiCardSpacing;
   overflow: visible; /* 2 */
+  min-height: 1px; /* 3 */
+
 
   @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing);
 

src/components/card/card.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { getSecureRelForTarget } from '../../services';
 
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
@@ -44,6 +45,8 @@ export const EuiCard = ({
   footer,
   onClick,
   href,
+  rel,
+  target,
   textAlign,
   isClickable,
   betaBadgeLabel,
@@ -64,6 +67,11 @@ export const EuiCard = ({
     className,
   );
 
+  let secureRel;
+  if (href) {
+    secureRel = getSecureRelForTarget(target, rel);
+  }
+
   let imageNode;
   if (image && layout === 'vertical') {
     imageNode = (
@@ -115,6 +123,8 @@ export const EuiCard = ({
       onClick={onClick}
       className={classes}
       href={href}
+      target={target}
+      rel={secureRel}
       {...rest}
     >
       {optionalBetaBadge}
@@ -165,6 +175,8 @@ EuiCard.propTypes = {
    */
   onClick: PropTypes.func,
   href: PropTypes.string,
+  target: PropTypes.string,
+  rel: PropTypes.string,
   textAlign: PropTypes.oneOf(ALIGNMENTS),
 
   /**

src/components/flex/_flex_grid.scss

@@ -34,20 +34,18 @@ $fractions: (
    * without columns.
    */
   .euiFlexGrid--#{$gutterName} {
+    margin: -$halfGutterSize;
+    align-items: stretch;
+
     > .euiFlexItem {
       margin: $halfGutterSize;
     }
   }
 
   @each $fraction, $percentage in $fractions {
-    .euiFlexGrid--#{$gutterName} {
-      margin: -$halfGutterSize;
-      align-items: stretch;
-
-      &.euiFlexGrid--#{$fraction} {
-        > .euiFlexItem {
-          flex-basis: calc(#{$percentage} - #{$gutterSize});
-        }
+    .euiFlexGrid--#{$gutterName}.euiFlexGrid--#{$fraction} {
+      > .euiFlexItem {
+        flex-basis: calc(#{$percentage} - #{$gutterSize});
       }
     }
   }

src/components/flex/_flex_group.scss

@@ -10,7 +10,7 @@
 
   .euiFlexItem {
     flex-grow: 1;
-    flex-basis: 0%; /* 1 */
+    flex-basis: 0%; /* 2 */
   }
 }
 

src/components/image/_image.scss

@@ -1,8 +1,14 @@
+/**
+ * 1. Fix for IE where the image correctly resizes in width but doesn't collapse it's height
+      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
+ */
+
 // Main <figure> that wraps images.
 .euiImage {
   display: inline-block;
   max-width: 100%;
   position: relative;
+  min-height: 1px; /* 1 */
 
   &.euiImage--hasShadow {
     .euiImage__img {