IE Fixes (mostly flex box)

- Fixed modal overflow issue - Fixed flex wrapping elements in docs and added utility class (`.euiIEFlexWrapFix`) for consumers - Fixed image shrink issues (fixes elastic#971) - Fixed home card layout that was still using `<Link>`. I added the `secureRel` stuff to `EuiCard` to support app linking. - Added some callouts to mention where IE flex bugs may occur (especially for when a generalized fix cannot be implemented)
cchaos · Jul 6, 2018 · ef3d9f1 · ef3d9f1
1 parent b0a07e2
commit ef3d9f1
Show file tree

Hide file tree

Showing 13 changed files with 181 additions and 116 deletions.
diff --git a/src-docs/src/components/guide_components.scss b/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;

diff --git a/src-docs/src/views/flex/flex_example.js b/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>,
   }, {

diff --git a/src-docs/src/views/home/home_view.js b/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 />

diff --git a/src-docs/src/views/image/image_zoom.js b/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>

diff --git a/src/components/card/_card.scss b/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);
 

diff --git a/src/components/card/card.js b/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),
 
   /**

diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
@@ -10,7 +10,7 @@
 
   .euiFlexItem {
     flex-grow: 1;
-    flex-basis: 0%; /* 1 */
+    flex-basis: 0%; /* 2 */
   }
 }
 

diff --git a/src/components/image/_image.scss b/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 {

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -36,58 +36,62 @@ exports[`renders EuiConfirmModal 1`] = `
       </svg>
     </button>
     <div
-      class="euiModalHeader"
+      class="euiModal__flex"
     >
       <div
-        class="euiModalHeader__title"
-        data-test-subj="confirmModalTitleText"
+        class="euiModalHeader"
       >
-        A confirmation modal
+        <div
+          class="euiModalHeader__title"
+          data-test-subj="confirmModalTitleText"
+        >
+          A confirmation modal
+        </div>
       </div>
-    </div>
-    <div
-      class="euiModalBody"
-    >
       <div
-        class="euiText"
-        data-test-subj="confirmModalBodyText"
+        class="euiModalBody"
       >
-        <p>
-          This is a confirmation modal example
-        </p>
+        <div
+          class="euiText"
+          data-test-subj="confirmModalBodyText"
+        >
+          <p>
+            This is a confirmation modal example
+          </p>
+        </div>
       </div>
-    </div>
-    <div
-      class="euiModalFooter"
-    >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
-        data-test-subj="confirmModalCancelButton"
-        type="button"
+      <div
+        class="euiModalFooter"
       >
-        <span
-          class="euiButtonEmpty__content"
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary"
+          data-test-subj="confirmModalCancelButton"
+          type="button"
         >
-          <span>
-            Cancel Button Text
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span>
+              Cancel Button Text
+            </span>
           </span>
-        </span>
-      </button>
-      <button
-        class="euiButton euiButton--primary euiButton--fill"
-        data-test-subj="confirmModalConfirmButton"
-        type="button"
-      >
-        <span
-          class="euiButton__content"
+        </button>
+        <button
+          class="euiButton euiButton--primary euiButton--fill"
+          data-test-subj="confirmModalConfirmButton"
+          type="button"
         >
           <span
-            class="euiButton__text"
+            class="euiButton__content"
           >
-            Confirm Button Text
+            <span
+              class="euiButton__text"
+            >
+              Confirm Button Text
+            </span>
           </span>
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
   </div>
 </div>