From 3ec5658430faf56da4c9d991ef037e9d3df5ec5d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 12:15:48 -0700 Subject: [PATCH 01/11] [EuiModal] Remove IE flex workaround/wrapper --- .../__snapshots__/confirm_modal.test.tsx.snap | 152 +++++++++--------- .../modal/__snapshots__/modal.test.tsx.snap | 6 +- src/components/modal/_modal.scss | 25 +-- src/components/modal/modal.tsx | 2 +- 4 files changed, 79 insertions(+), 106 deletions(-) diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap index df9a6ee8881..4d335924daf 100644 --- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap +++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap @@ -38,70 +38,66 @@ Array [ />
-
-

- A confirmation modal -

-
+

+ A confirmation modal +

+
+
-
-

- This is a confirmation modal example -

-
+

+ This is a confirmation modal example +

-
+
+ - + -
+ +
, @@ -153,54 +149,50 @@ Array [ />
-
-

- A confirmation modal -

-
+

+ A confirmation modal +

-
+
+ - + -
+ +
, diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap index 4395d02631a..e698a889510 100644 --- a/src/components/modal/__snapshots__/modal.test.tsx.snap +++ b/src/components/modal/__snapshots__/modal.test.tsx.snap @@ -37,11 +37,7 @@ Array [ data-euiicon-type="cross" /> -
- children -
+ children ,
= ({ /> )} -
{children}
+ {children}
From f6bc21947834b0d1aa61af4cac721f554a11da70 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 12:34:26 -0700 Subject: [PATCH 02/11] [EuiBadge] Remove unnecessary `flex` CSS - truncation and display still appears to all work as before without issue --- src/components/badge/_badge.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index d1020547fff..7ea0964e889 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -43,7 +43,6 @@ .euiBadge__childButton { @include euiTextTruncate; - flex: 1 1 auto; // Must be 1 and 1 for IE to properly truncate text-align: inherit; font-weight: inherit; line-height: inherit; @@ -62,7 +61,6 @@ } .euiBadge__iconButton { - flex: 0 0 auto; font-size: 0; // Makes the button only as large as the icon so it aligns vertically better margin-left: $euiSizeXS; @@ -84,13 +82,10 @@ .euiBadge__text { @include euiTextTruncate; - flex: 1 1 auto; cursor: default; } .euiBadge__icon { - flex: 0 0 auto; - &:not(:only-child) { margin-left: $euiSizeXS; } From d4e2b3f06d821a228f000bf4a404e16111df5b36 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 12:35:46 -0700 Subject: [PATCH 03/11] [EuiListGroup] Remove unnecessary flex shrink/basis CSS - flex-grow is still necessary for icons to be pushed to the right --- src/components/list_group/_list_group_item.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index 28746d871dd..6cb505fc296 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -66,7 +66,7 @@ padding: $euiSizeXS $euiSizeS; display: flex; align-items: center; - flex: 1 0 auto; // The flex-shrink and flex-basis values are needed for IE11 + flex-grow: 1; text-align: left; max-width: 100%; font-weight: inherit; From 6ad36295996e3888e5ddd37428f8c14efa4ac2d3 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 12:58:18 -0700 Subject: [PATCH 04/11] [EuiCard] Remove IE min-height workaround - looks to have been missed in the Emotion conversion --- src/components/card/card.styles.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index f0c798b5e09..375fce7377a 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -118,7 +118,6 @@ export const euiCardStyles = ( flex-grow: 0; /* 1 */ font-size: 0; position: relative; - ${logicalCSS('min-height', '1px')}; /* 2 */ ${logicalCSS('margin-bottom', spacing)}; `, @@ -150,11 +149,13 @@ export const euiCardStyles = ( // ensure the parent is only as tall as the image ${logicalCSS('margin-bottom', `-${paddingAmount}`)}; - // match border radius, minus 1px because it's inside a border - ${logicals['border-top-left-radius']}: calc(${euiTheme.border.radius - .medium} - 1px); + // match border radius, minus border width + ${logicalCSS( + 'border-top-left-radius', + `calc(${euiTheme.border.radius.medium} - ${euiTheme.border.width.thin})` + )} ${logicals['border-top-right-radius']}: calc(${euiTheme.border.radius - .medium} - 1px); + .medium} - ${euiTheme.border.width.thin}); ${color === 'transparent' ? `border-radius: ${euiTheme.border.radius.medium};` From 470d4d5410e1db230284a72220f6513cdd4019ff Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 13:53:11 -0700 Subject: [PATCH 05/11] [EuiForm*] Remove IE CSS --- .../form_control_layout/_form_control_layout_delimited.scss | 3 --- src/components/form/form_row/_form_row.scss | 1 - 2 files changed, 4 deletions(-) diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index 0275f1de326..71e92e1f362 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -22,8 +22,6 @@ .euiFormControlLayoutDelimited__input { height: 100%; - padding-top: 0; // Fixes IE - padding-bottom: 0; // Fixes IE padding-left: $euiFormControlCompressedPadding; padding-right: $euiFormControlCompressedPadding; } @@ -66,7 +64,6 @@ position: static; // Overrider absolute padding-left: $euiFormControlPadding; padding-right: $euiFormControlPadding; - flex-shrink: 0; // Fixes IE &:not(.euiFormControlLayoutIcons--right) { order: -1; diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 8fd4448b173..4cc048ba3be 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -39,7 +39,6 @@ .euiFormRow__label { hyphens: auto; - max-width: 100%; // Fixes IE } .euiFormRow__labelWrapper { From ea457399dfe3751664bb63e2a0a48bf2896282c7 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 14:17:16 -0700 Subject: [PATCH 06/11] [Eui*Table] Remove IE mobile workaround --- src/components/table/_responsive.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss index d79a2a85b8a..56dcb7d0ff9 100644 --- a/src/components/table/_responsive.scss +++ b/src/components/table/_responsive.scss @@ -152,7 +152,6 @@ } .euiTableRowCell { - display: block; /* IE requires block to grow and wrap. */ min-width: 50%; border: none; } From a8ee424dada17104491e0bcc4e0001261ac5489a Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 14:17:43 -0700 Subject: [PATCH 07/11] [EuiPageContent] Remove IE fix - likely not necessary to test as EuiPageContent is deprecated --- src/components/page/page_content/_page_content.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/page/page_content/_page_content.scss b/src/components/page/page_content/_page_content.scss index e9302bf3f4e..7062f6d5eda 100644 --- a/src/components/page/page_content/_page_content.scss +++ b/src/components/page/page_content/_page_content.scss @@ -18,7 +18,6 @@ &.euiPageContent--horizontalCenter { width: auto; - max-width: 100%; // Fixes IE margin-left: auto; margin-right: auto; flex-grow: 0; // Offsets the properties of .euiPanel within flexboxes From 7086c9a77354549f282354927a0a016b52ab9611 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 14:18:23 -0700 Subject: [PATCH 08/11] [EuiFlexItem] [SAFE] Remove unit from flex basis --- src/components/flex/_flex_group.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss index 9daacfe1c68..9f4797ba03a 100644 --- a/src/components/flex/_flex_group.scss +++ b/src/components/flex/_flex_group.scss @@ -1,6 +1,5 @@ /** * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements. - * 2. IE requires a unit to grow. */ .euiFlexGroup { @@ -14,7 +13,7 @@ } flex-grow: 1; - flex-basis: 0%; /* 2 */ + flex-basis: 0; } } From dadedf122afd4e98e5ed1e3f1788cb39d0a31604 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 22 Aug 2022 14:19:08 -0700 Subject: [PATCH 09/11] [EuiFlexGroup] [UNSAFE?] Remove flex-grow: 1?? - not sure if this causes unexpected issues :/ --- src/components/flex/_flex_group.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss index 9f4797ba03a..66aaff6bd9c 100644 --- a/src/components/flex/_flex_group.scss +++ b/src/components/flex/_flex_group.scss @@ -1,11 +1,6 @@ -/** - * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements. - */ - .euiFlexGroup { display: flex; align-items: stretch; - flex-grow: 1; /* 1 */ .euiFlexItem { @include internetExplorerOnly { From d504711ec50202773f3877063ae9423781fceb73 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 23 Aug 2022 11:00:06 -0700 Subject: [PATCH 10/11] Changelog --- upcoming_changelogs/6161.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6161.md diff --git a/upcoming_changelogs/6161.md b/upcoming_changelogs/6161.md new file mode 100644 index 00000000000..98b886a958f --- /dev/null +++ b/upcoming_changelogs/6161.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed all IE fixes/fallbacks in EUI CSS From d491db4ed5cca871cc1360b3f418283f3d7d9932 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 24 Aug 2022 10:21:57 -0700 Subject: [PATCH 11/11] [PR feedback] Restore flex-grow 1 --- src/components/flex/_flex_group.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss index 66aaff6bd9c..515ef924506 100644 --- a/src/components/flex/_flex_group.scss +++ b/src/components/flex/_flex_group.scss @@ -1,6 +1,7 @@ .euiFlexGroup { display: flex; align-items: stretch; + flex-grow: 1; // Grow nested flex-groups by default .euiFlexItem { @include internetExplorerOnly {