From ef3d9f185572280a2123c97493795537e28e7ace Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 6 Jul 2018 15:10:20 -0400 Subject: [PATCH 1/3] 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 #971) - Fixed home card layout that was still using ``. 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) --- src-docs/src/components/guide_components.scss | 2 +- src-docs/src/views/flex/flex_example.js | 41 +++++-- src-docs/src/views/home/home_view.js | 106 ++++++++---------- src-docs/src/views/image/image_zoom.js | 4 +- src/components/card/_card.scss | 2 + src/components/card/card.js | 12 ++ src/components/flex/_flex_group.scss | 2 +- src/components/image/_image.scss | 6 + .../__snapshots__/confirm_modal.test.js.snap | 80 ++++++------- .../modal/__snapshots__/modal.test.js.snap | 6 +- src/components/modal/_modal.scss | 21 +++- src/components/modal/modal.js | 4 +- src/global_styling/utility/_utility.scss | 11 ++ 13 files changed, 181 insertions(+), 116 deletions(-) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index e01fc8ab0dc..4443aa1366f 100644 --- 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 index b8159471920..ad03f210a84 100644 --- 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: ( -

- You can set wrap on FlexGroup if it - contains FlexItems with minimum widths, which you want to wrap as - the container becomes narrower. -

+ +

+ You can set wrap on FlexGroup if it + contains FlexItems with minimum widths, which you want to wrap as + the container becomes narrower. +

+ +

+ IE11 does not properly wrap flex items if the group is also within a flex item. + To fix this rendering issue, you need to add a class of .euiIEFlexWrapFix to the flex-item + that contains the wrapping group. +

+ + + ), demo:
, }, { @@ -286,11 +297,21 @@ export const FlexExample = { code: flexNestHtml, }], text: ( -

- FlexGroup and FlexGrid can nest - within themselves indefinitely. For example, here we turn off the growth on a - FlexGroup, then nest a grid inside of it. -

+ +

+ FlexGroup and FlexGrid can nest + within themselves indefinitely. For example, here we turn off the growth on a + FlexGroup, then nest a grid inside of it. +

+ +

+ 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 Flexbugs if + you see rendering issues in IE. +

+ + ), demo:
, }, { diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index 76ddaa7117c..2ce5d5e3b71 100644 --- 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 = () => ( - - - + - - - + - - - + - - - + - - - + - - - + diff --git a/src-docs/src/views/image/image_zoom.js b/src-docs/src/views/image/image_zoom.js index 38f791edfb2..22c43a673ce 100644 --- 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/" /> @@ -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" /> diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index b728943833f..ab9dd0d659c 100644 --- 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 index 5c0dd5e1bcf..eb907e2856f 100644 --- 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 index 5c18dba489e..4011c4ba70c 100644 --- 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 index 7435246c697..e679ab48502 100644 --- 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
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 index 351fd9a985d..53a6a67e81d 100644 --- 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`] = `
- A confirmation modal +
+ A confirmation modal +
-
-
-

- This is a confirmation modal example -

+
+

+ This is a confirmation modal example +

+
-
-
- - + +
diff --git a/src/components/modal/__snapshots__/modal.test.js.snap b/src/components/modal/__snapshots__/modal.test.js.snap index bc2ecd706ba..fb8405d6953 100644 --- a/src/components/modal/__snapshots__/modal.test.js.snap +++ b/src/components/modal/__snapshots__/modal.test.js.snap @@ -35,7 +35,11 @@ exports[`renders EuiModal 1`] = ` /> - children +
+ children +
`; diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 5d408714aa8..7c82bb9dae8 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -1,11 +1,14 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // match shadow +/** + * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the + * flex display. https://github.com/philipwalton/flexbugs#flexbug-3 + */ + .euiModal { @include euiBottomShadowLarge; + display: flex; /* 1 */ - display: flex; - flex-direction: column; - max-height: 75vh; // We overflow the modal body based off this position: relative; background-color: $euiColorEmptyShade; border: 1px solid $euiModalBorderColor; @@ -14,6 +17,13 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma z-index: $euiZModal; min-width: 50%; animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce; + + .euiModal__flex { /* 1 */ + flex: 1; + display: flex; + flex-direction: column; + max-height: 75vh; // We overflow the modal body based off this + } } .euiModal--confirmation { @@ -88,7 +98,6 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma .euiModal { position: fixed; width: calc(100vw + 2px); - max-height: 100vh; left: 0; right: 0; bottom: 0; @@ -96,6 +105,10 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma border-radius: 0; box-shadow: none; border: none; + + .euiModal__flex { /* 1 */ + max-height: 100vh; + } } .euiModalHeader { diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js index 2613dbe7242..9a76fab37fa 100644 --- a/src/components/modal/modal.js +++ b/src/components/modal/modal.js @@ -52,7 +52,9 @@ export class EuiModal extends Component { color="text" aria-label="Closes this modal window" /> - {children} +
+ {children} +
); diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index 10ab91659b8..f47696b3863 100644 --- a/src/global_styling/utility/_utility.scss +++ b/src/global_styling/utility/_utility.scss @@ -61,3 +61,14 @@ @include euiBreakpoint($size) { display: initial !important; } } } + +/** + * IE doesn't properly wrap groups if it is within a flex-item of a flex-group. + * Adding the following styles to the flex-item that contains the wrapping group, will fix IE. + * https://github.com/philipwalton/flexbugs/issues/104 + */ +.euiIEFlexWrapFix { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0%; +} From d5119618ea07cc9b6f14118b3b5e60911baa5721 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 6 Jul 2018 15:16:58 -0400 Subject: [PATCH 2/3] Fixed declaration that caused duplicate declarations --- src/components/flex/_flex_grid.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss index f4c6f36bba5..f88460925df 100644 --- a/src/components/flex/_flex_grid.scss +++ b/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}); } } } From 20e368803356d6222e38b0d92128d29b17415ff7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 6 Jul 2018 15:43:51 -0400 Subject: [PATCH 3/3] changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 198275fc7e2..c9abc72155d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `1.1.0`. +**Bug fixes** + +- Fixed some IE11 flex box bugs and documented others (modal overflowing, image shrinking, and flex group wrapping) ([#973](https://github.com/elastic/eui/pull/973)) ## [`1.1.0`](https://github.com/elastic/eui/tree/v1.1.0)