diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 655569c0957..9454a779b75 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -262,7 +262,10 @@ interface BasicTableProps extends Omit { */ tableLayout?: 'fixed' | 'auto'; /** - * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly + * Applied to table cells. Any cell using a render function will set this to be false. + * + * Creates a text wrapper around cell content that helps word break or truncate + * long text correctly. */ textOnly?: boolean; } diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts index 29b7e85b823..587515bbf58 100644 --- a/src/components/basic_table/table_types.ts +++ b/src/components/basic_table/table_types.ts @@ -58,6 +58,10 @@ export interface EuiTableFieldDataColumnType */ sortable?: boolean | ((item: T) => Primitive); isExpander?: boolean; + /** + * Creates a text wrapper around cell content that helps word break or truncate + * long text correctly. + */ textOnly?: boolean; /** * Defines the horizontal alignment of the column diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index 16e626765e5..d8d183f46d6 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -42,8 +42,7 @@ export const euiCardStyles = ( euiCard: css` display: flex; - // Progressive enhancement where we apply the outline to the whole card - // when the internal text button has focus + // Apply the outline to the whole card when the internal text button has focus &:has([class*='euiCard__text'][class*='-interactive']:focus:focus-visible) { outline: ${euiTheme.focus.width} solid currentColor; } diff --git a/src/components/datagrid/body/header/_data_grid_header_row.scss b/src/components/datagrid/body/header/_data_grid_header_row.scss index d8a843ff43b..8bea9ac7a64 100644 --- a/src/components/datagrid/body/header/_data_grid_header_row.scss +++ b/src/components/datagrid/body/header/_data_grid_header_row.scss @@ -2,7 +2,7 @@ display: flex; z-index: 3; // Needs to sit above the content and focused cells background: $euiColorEmptyShade; - position: sticky; // In IE11 this does not work, but doesn't cause a break. + position: sticky; top: 0; } diff --git a/src/components/description_list/description_list_description.styles.ts b/src/components/description_list/description_list_description.styles.ts index 46d2aa013c0..1eafff3ba5c 100644 --- a/src/components/description_list/description_list_description.styles.ts +++ b/src/components/description_list/description_list_description.styles.ts @@ -22,7 +22,7 @@ export const euiDescriptionListDescriptionStyles = ( const { euiTheme } = euiThemeContext; const columnDisplay = ` - ${logicalCSS('width', '50%')} // Flex-basis doesn't work in IE with padding + ${logicalCSS('width', '50%')} ${logicalCSS('padding-left', euiTheme.size.s)} &:not(:first-of-type) { ${logicalCSS('margin-top', euiTheme.size.base)} diff --git a/src/components/description_list/description_list_title.styles.ts b/src/components/description_list/description_list_title.styles.ts index b6c186b8e6f..fe6b78733a6 100644 --- a/src/components/description_list/description_list_title.styles.ts +++ b/src/components/description_list/description_list_title.styles.ts @@ -21,7 +21,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; const columnDisplay = ` - ${logicalCSS('width', '50%')} // Flex-basis doesn't work in IE with padding + ${logicalCSS('width', '50%')} ${logicalCSS('padding-right', euiTheme.size.s)} `; return { diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss index 765a79b2ada..00993464ca4 100644 --- a/src/components/filter_group/_filter_group.scss +++ b/src/components/filter_group/_filter_group.scss @@ -36,9 +36,11 @@ display: flex; } -// A fixed width is required in IE11 because of the shift in widths that can be caused +// A fixed width is required because of the shift in widths that can be caused // by the loading animation that precedes the results. .euiFilterGroup__popoverPanel { + // Note for Emotion conversion: there are unfortunately 5+ direct + // usages of this className in Kibana that will need to be refactored width: $euiSize * 18; } diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss index 9daacfe1c68..b9d6b1a7acd 100644 --- a/src/components/flex/_flex_group.scss +++ b/src/components/flex/_flex_group.scss @@ -9,10 +9,6 @@ flex-grow: 1; /* 1 */ .euiFlexItem { - @include internetExplorerOnly { - min-width: 1px; - } - flex-grow: 1; flex-basis: 0%; /* 2 */ } diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss index fa76e51ffad..c2b6ffdf6dc 100644 --- a/src/components/flex/_flex_item.scss +++ b/src/components/flex/_flex_item.scss @@ -1,13 +1,7 @@ /** * 1. Allow EuiPanels to expand to fill the item. - * 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and - * not cause weird wrapping issues. */ .euiFlexItem { - @include internetExplorerOnly { - min-width: 1px; /* 2 */ - } - display: flex; /* 1 */ flex-direction: column; /* 1 */ diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss index d2d49fb9bbd..44905e6fbe2 100644 --- a/src/components/form/field_search/_field_search.scss +++ b/src/components/form/field_search/_field_search.scss @@ -1,7 +1,6 @@ /* * 1. Fix for Safari to ensure that it renders like a normal text input * and doesn't add extra spacing around text - * 2. Remove the X clear button from input type search in Chrome and IE */ .euiFieldSearch { @@ -16,10 +15,6 @@ &::-webkit-search-cancel-button { -webkit-appearance: none; /* 1, 2 */ } - - &::-ms-clear { - display: none; /* 2 */ - } } .euiFieldSearch--compressed { diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index 28746d871dd..5f5471f5b62 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -7,21 +7,13 @@ position: relative; &.euiListGroupItem-isActive, - &.euiListGroupItem-isClickable:hover { - background-color: $euiListGroupItemHoverBackground; - } - - // Can't be grouped with above or else IE will ignore the whole group + &.euiListGroupItem-isClickable:hover, &.euiListGroupItem-isClickable:focus-within { background-color: $euiListGroupItemHoverBackground; } &.euiListGroupItem--ghost { - &.euiListGroupItem-isClickable:hover { - background-color: $euiListGroupItemHoverBackgroundGhost; - } - - // Can't be grouped with above or else IE will ignore the whole group + &.euiListGroupItem-isClickable:hover, &.euiListGroupItem-isClickable:focus-within { background-color: $euiListGroupItemHoverBackgroundGhost; } @@ -46,20 +38,6 @@ } } -// IE doesn't support :focus-within -@include internetExplorerOnly { - .euiListGroupItem__button:hover, - .euiListGroupItem__button:focus { - background-color: $euiListGroupItemHoverBackground; - border-radius: $euiBorderRadius; - - .euiListGroupItem--ghost .euiListGroupItem__button:hover, - .euiListGroupItem--ghost .euiListGroupItem__button:focus { - background-color: $euiListGroupItemHoverBackgroundGhost; - } - } -} - .euiListGroupItem__text, .euiListGroupItem__button { line-height: $euiSizeL; diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index eedafe98458..2926b854f7d 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -1,7 +1,3 @@ -/** - * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from - * specifying a column width, e.g. the checkbox column. - */ .euiTable { @include euiFontSizeS; @include euiNumberFormat; @@ -194,7 +190,6 @@ overflow: visible; white-space: normal; //* 4 */ overflow-wrap is not supported on flex parents - word-break: break-all; // Fallback for FF and IE word-break: break-word; } diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx index c85a92da77d..748efd9c1e0 100644 --- a/src/components/table/table_row_cell.tsx +++ b/src/components/table/table_row_cell.tsx @@ -37,9 +37,8 @@ interface EuiTableRowCellSharedPropsShape { */ showOnHover?: boolean; /** - * Setting `textOnly` to `false` will break words unnecessarily on FF and - * IE. To combat this problem on FF, wrap contents with the css utility - * `.eui-textBreakWord`. + * Creates a text wrapper around cell content that helps word break or truncate + * long text correctly. */ textOnly?: boolean; /** diff --git a/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap b/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap index 5d3de5e0af1..3e5c73b8246 100644 --- a/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap +++ b/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap @@ -198,8 +198,7 @@ exports[`euiNumberFormat returns a string of CSS text 1`] = ` exports[`euiTextBreakWord returns a string of CSS text 1`] = ` " overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container - word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other - word-break: break-word; // IE doesn't understand but that's ok + word-break: break-word; " `; diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 4cede2b498e..44d772d8451 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -78,10 +78,6 @@ font-size: $euiFontSizeS; color: $euiTextColor; - @include internetExplorerOnly { - line-height: 1em; // fixes text alignment in IE - } - // sass-lint:disable-block mixins-before-declarations @include euiPlaceholderPerBrowser { color: $euiFormControlPlaceholderText; diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss index db1c6fbd935..efe2cf6f9b3 100644 --- a/src/global_styling/mixins/_helpers.scss +++ b/src/global_styling/mixins/_helpers.scss @@ -112,14 +112,6 @@ margin: -1px; } -// Specifically target IE11, but not Edge. -@mixin internetExplorerOnly { - // sass-lint:disable-block no-vendor-prefixes - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - @content; - } -} - // Doesn't have reduced motion turned on @mixin euiCanAnimate { @media screen and (prefers-reduced-motion: no-preference) { diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index b6c7e875728..7ebd1ef2e05 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -127,8 +127,7 @@ @mixin euiTextBreakWord { // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container - word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other - word-break: break-word; // IE doesn't understand but that's ok + word-break: break-word; } // Text truncation @@ -138,8 +137,6 @@ // // 1. Ensure that the node has a maximum width after which truncation can // occur. -// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor -// nodes. @mixin euiTextTruncate { // sass-lint:disable-block no-important @@ -147,7 +144,6 @@ overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; - word-wrap: normal !important; // 2 } @mixin euiNumberFormat { diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts index db62a90a287..668f3593ff4 100644 --- a/src/global_styling/mixins/_typography.ts +++ b/src/global_styling/mixins/_typography.ts @@ -48,8 +48,7 @@ export const useEuiFontSize = ( */ export const euiTextBreakWord = () => ` overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container - word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other - word-break: break-word; // IE doesn't understand but that's ok + word-break: break-word; `; /** diff --git a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap index a233f829e4e..31695bcb4b9 100644 --- a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap +++ b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap @@ -39,8 +39,7 @@ exports[`global utility styles generates static global styles 1`] = ` .eui-textInheritColor{color:inherit!important;} .eui-textBreakWord{ overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container - word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other - word-break: break-word; // IE doesn't understand but that's ok + word-break: break-word; ;} .eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;} .eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;} diff --git a/src/global_styling/utility/_index.scss b/src/global_styling/utility/_index.scss index 657a6bbcdf1..5c978807848 100644 --- a/src/global_styling/utility/_index.scss +++ b/src/global_styling/utility/_index.scss @@ -1,2 +1 @@ @import 'animations'; -@import 'utility'; diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss deleted file mode 100644 index b7cae579552..00000000000 --- a/src/global_styling/utility/_utility.scss +++ /dev/null @@ -1,15 +0,0 @@ -// This file utilizes !importants on purpose -// sass-lint:disable no-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 { - @include internetExplorerOnly { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0%; - } -} diff --git a/upcoming_changelogs/6154.md b/upcoming_changelogs/6154.md new file mode 100644 index 00000000000..a298e785b38 --- /dev/null +++ b/upcoming_changelogs/6154.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed `.euiIEFlexWrapFix` global className and `internetExplorerOnly()` Sass mixin, as IE is no longer a supported browser