Remove IE CSS utilities, mixins, and non-flex/sizing fallbacks

src/components/basic_table/basic_table.tsx

@@ -262,7 +262,10 @@ interface BasicTableProps<T> extends Omit<EuiTableProps, 'onChange'> {
    */
   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;
 }

src/components/basic_table/table_types.ts

@@ -58,6 +58,10 @@ export interface EuiTableFieldDataColumnType<T>
    */
   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

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;
         }

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;
 }
 

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)}

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 {

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;
 }
 

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 */
   }

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 */
 

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 {

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;

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;
 }
 

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;
   /**

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;
 "
 `;
 

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;

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) {

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,16 +137,13 @@
 //
 // 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
   max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
-  word-wrap: normal !important; // 2
 }
 
 @mixin euiNumberFormat {

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;
 `;
 
 /**

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;}

src/global_styling/utility/_index.scss

@@ -1,2 +1 @@
 @import 'animations';
-@import 'utility';

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