From 1a4dde621725f6bb71b1492bd29b53c1ab058c6b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 23 Jul 2018 16:36:18 -0400 Subject: [PATCH 1/3] Removed IE flex column fix In favor of forcing the consumer to add a `grow` prop. Added a IE message to docs. --- .../src/views/date_picker/global_date_picker.js | 2 +- src-docs/src/views/flex/direction.js | 6 +++--- src-docs/src/views/flex/flex_example.js | 17 ++++++++++++++--- src/components/flex/_flex_item.scss | 5 +---- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/date_picker/global_date_picker.js b/src-docs/src/views/date_picker/global_date_picker.js index dc08aeb0e92..e45e76e2404 100644 --- a/src-docs/src/views/date_picker/global_date_picker.js +++ b/src-docs/src/views/date_picker/global_date_picker.js @@ -312,7 +312,7 @@ export default class extends Component { } return ( - {dateRange || date} + {dateRange || date} ); }); diff --git a/src-docs/src/views/flex/direction.js b/src-docs/src/views/flex/direction.js index c40fca43cc7..0e3b7e13cc3 100644 --- a/src-docs/src/views/flex/direction.js +++ b/src-docs/src/views/flex/direction.js @@ -7,8 +7,8 @@ import { export default () => ( - Content grid item - Another content grid item - Using the column direction + Content grid item + Another content grid item + Using the column direction ); diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js index ad03f210a84..4ea7b44a29e 100644 --- a/src-docs/src/views/flex/flex_example.js +++ b/src-docs/src/views/flex/flex_example.js @@ -249,9 +249,20 @@ export const FlexExample = { code: directionHtml, }], text: ( -

- You can change direction using the direction prop. -

+
+

+ You can change direction using the direction prop. +

+ +

+ 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 grow prop and set to either false or a number. + Setting grow to true will not suffice. You may also need + to adjust the flex-basis value. +

+ +
), demo:
, }, { diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss index db06f55c316..905cc9bb0af 100644 --- a/src/components/flex/_flex_item.scss +++ b/src/components/flex/_flex_item.scss @@ -8,10 +8,7 @@ /* * 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 */ @@ -19,7 +16,7 @@ @for $i from 1 through 10 { &.euiFlexItem--flexGrow#{$i} { - flex-grow: $i + flex-grow: $i; } } } From 71dfbedafa1ed87dbf14bad201ea78035c5c2f7b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 23 Jul 2018 16:39:39 -0400 Subject: [PATCH 2/3] changelog --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95b61a4e5b7..26e61af4782 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,13 @@ ## [`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)) ## [`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`.** + - 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)) From 588ef2941c347bc4153e43f61c1d2e5a7ab66ad4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 23 Jul 2018 16:46:48 -0400 Subject: [PATCH 3/3] Remove universal selector from popover --- CHANGELOG.md | 2 ++ src/components/popover/_popover.scss | 4 ---- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26e61af4782..67acd0c881a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,10 +3,12 @@ **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)) diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 23ddd9a9744..803063ad5c6 100644 --- a/src/components/popover/_popover.scss +++ b/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;