@elastic/eui 65.0.0 → 66.0.0

package/optimize/lib/components/icon/icon.js

@@ -134,7 +134,7 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
     (0, _classCallCheck2.default)(this, EuiIconClass);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", true);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "loadIconComponent", function (iconType) {
       if (iconComponentCache.hasOwnProperty(iconType)) {
         // exists in cache
@@ -191,6 +191,7 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(EuiIconClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.isMounted = true;
       var type = this.props.type;
 
       if (isEuiIconType(type) && this.state.icon == null) {
@@ -266,14 +267,7 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
 
       var styles = (0, _icon.euiIconStyles)(theme);
       var cssStyles = [styles.euiIcon, styles[size], color && (0, _named_colors.isNamedColor)(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
-      var icon = this.state.icon || _empty.icon; // This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
-      // focusable="false".
-      //   - If there's no tabindex specified, we'll default the icon to not be focusable,
-      //     which is how SVGs behave in Chrome, Safari, and FF.
-      //   - If tabindex is -1, then the consumer wants the icon to be focusable by JavaScript only.
-      //   - If the tabindex is 0, the consumer wants the icon to be keyboard focusable.
-
-      var focusable = tabIndex == null || tabIndex === -1 ? 'false' : 'true';
+      var icon = this.state.icon || _empty.icon;
 
       if (typeof icon === 'string') {
         return (0, _react3.jsx)("img", (0, _extends2.default)({
@@ -305,7 +299,6 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           style: optionalCustomStyles,
           css: cssStyles,
           tabIndex: tabIndex,
-          focusable: focusable,
           role: "img",
           title: title,
           "data-icon-type": iconTitle,

package/optimize/lib/components/list_group/list_group_item.js

@@ -33,7 +33,7 @@ var _href_validator = require("../../services/security/href_validator");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText"],
     _excluded2 = ["iconType", "alwaysShow", "className", "isDisabled"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -81,6 +81,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       showToolTip = _ref$showToolTip === void 0 ? false : _ref$showToolTip,
       wrapText = _ref.wrapText,
       buttonRef = _ref.buttonRef,
+      toolTipText = _ref.toolTipText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
@@ -182,7 +183,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       className: classes
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       anchorClassName: "euiListGroupItem__tooltip",
-      content: label,
+      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
       delay: "long"
     }, itemContent));

package/optimize/lib/components/modal/modal.js

@@ -84,9 +84,7 @@ var EuiModal = function EuiModal(_ref) {
       color: "text",
       "aria-label": closeModal
     });
-  }), (0, _react2.jsx)("div", {
-    className: "euiModal__flex"
-  }, children))));
+  }), children)));
 };
 
 exports.EuiModal = EuiModal;

package/optimize/lib/components/observer/mutation_observer/mutation_observer.js

@@ -63,7 +63,7 @@ var EuiMutationObserver = /*#__PURE__*/function (_EuiObserver) {
 exports.EuiMutationObserver = EuiMutationObserver;
 
 var makeMutationObserver = function makeMutationObserver(node, _observerOptions, callback) {
-  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // The MutationObserver polyfill used in Kibana (for Jest) implements
   // an older spec in which specifying `attributeOldValue` or `attributeFilter`
   // without specifying `attributes` results in a `SyntaxError`.
   // The following logic patches the newer spec in which `attributes: true` can be

package/optimize/lib/components/page/page_sidebar/page_sidebar.js

@@ -63,13 +63,17 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   (0, _react.useEffect)(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = (0, _typeof2.default)(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth)), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: className,

package/optimize/lib/components/tabs/tabbed_content/tabbed_content.js

@@ -133,24 +133,6 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(EuiTabbedContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.addEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.removeEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -178,7 +160,8 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
         ref: this.tabsRef,
         expand: expand,
         size: size,
-        onFocus: this.initializeFocus
+        onFocus: this.initializeFocus,
+        onBlur: this.removeFocus
       }, tabs.map(function (tab) {
         var id = tab.id,
             name = tab.name,

package/optimize/lib/global_styling/functions/logicals.json

@@ -0,0 +1,56 @@
+{
+  "height": "block-size",
+  "width": "inline-size",
+  "max-height": "max-block-size",
+  "max-width": "max-inline-size",
+  "min-height": "min-block-size",
+  "min-width": "min-inline-size",
+  "top": "inset-block-start",
+  "right": "inset-inline-end",
+  "bottom": "inset-block-end",
+  "left": "inset-inline-start",
+  "horizontal": "inset-block",
+  "vertical": "inset-inline",
+  "margin-left": "margin-inline-start",
+  "margin-right": "margin-inline-end",
+  "margin-top": "margin-block-start",
+  "margin-bottom": "margin-block-end",
+  "margin-horizontal": "margin-inline",
+  "margin-vertical": "margin-block",
+  "padding-left": "padding-inline-start",
+  "padding-right": "padding-inline-end",
+  "padding-top": "padding-block-start",
+  "padding-bottom": "padding-block-end",
+  "padding-horizontal": "padding-inline",
+  "padding-vertical": "padding-block",
+  "overflow-x": "overflow-inline",
+  "overflow-y": "overflow-block",
+  "border-horizontal": "border-inline",
+  "border-horizontal-color": "border-inline-color",
+  "border-horizontal-width": "border-inline-width",
+  "border-horizontal-style": "border-inline-style",
+  "border-vertical": "border-block",
+  "border-vertical-color": "border-block-color",
+  "border-vertical-width": "border-block-width",
+  "border-vertical-style": "border-block-style",
+  "border-bottom": "border-block-end",
+  "border-bottom-color": "border-block-end-color",
+  "border-bottom-style": "border-block-end-style",
+  "border-bottom-width": "border-block-end-width",
+  "border-top": "border-block-start",
+  "border-top-color": "border-block-start-color",
+  "border-top-style": "border-block-start-style",
+  "border-top-width": "border-block-start-width",
+  "border-right": "border-inline-end",
+  "border-right-color": "border-inline-end-color",
+  "border-right-style": "border-inline-end-style",
+  "border-right-width": "border-inline-end-width",
+  "border-left": "border-inline-start",
+  "border-left-color": "border-inline-start-color",
+  "border-left-style": "border-inline-start-style",
+  "border-left-width": "border-inline-start-width",
+  "border-top-left-radius": "border-start-start-radius",
+  "border-top-right-radius": "border-start-end-radius",
+  "border-bottom-left-radius": "border-end-start-radius",
+  "border-bottom-right-radius": "border-end-end-radius"
+}

package/optimize/lib/global_styling/mixins/_typography.js

@@ -45,7 +45,7 @@ var useEuiFontSize = function useEuiFontSize(scale, options) {
 exports.useEuiFontSize = useEuiFontSize;
 
 var euiTextBreakWord = function euiTextBreakWord() {
-  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  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\n  word-break: break-word; // IE doesn't understand but that's ok\n";
+  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
 /**
  * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.

package/optimize/lib/services/theme/hooks.js

@@ -32,11 +32,14 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = (0, _react.useMemo)(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 
 exports.useEuiTheme = useEuiTheme;
@@ -47,17 +50,9 @@ var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return (0, _react2.jsx)(Component, (0, _extends2.default)({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "65.0.0",
+  "version": "66.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

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

package/src/components/datagrid/_data_grid_data_row.scss

@@ -104,6 +104,13 @@
   max-width: 400px !important;
   max-height: 400px !important;
   z-index: $euiZDataGridCellPopover !important;
+  // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
+  // (see https://github.com/elastic/eui/issues/6151)
+  // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
+  // since we don't use the popover arrow in any case for cell popovers
+  filter: none;
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
 }
 
 .euiDataGridRowCell__expandFlex {

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

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

package/src/components/flex/_flex_group.scss

@@ -1,20 +1,11 @@
-/**
- * 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 {
   display: flex;
   align-items: stretch;
-  flex-grow: 1; /* 1 */
+  flex-grow: 1; // Grow nested flex-groups by default
 
   .euiFlexItem {
-    @include internetExplorerOnly {
-      min-width: 1px;
-    }
-
     flex-grow: 1;
-    flex-basis: 0%; /* 2 */
+    flex-basis: 0%;
   }
 }
 

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

package/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 {

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

package/src/components/form/form_row/_form_row.scss

@@ -39,7 +39,6 @@
 
   .euiFormRow__label {
     hyphens: auto;
-    max-width: 100%; // Fixes IE
   }
 
   .euiFormRow__labelWrapper {

package/src/components/header/header_section/_header_section_item.scss

@@ -41,4 +41,4 @@
       display: none;
     }
   }
-}
+}

package/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,27 +38,13 @@
   }
 }
 
-// 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;
   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;

package/src/components/modal/_modal.scss

@@ -1,15 +1,11 @@
-/**
- * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
- *    flex display. https://github.com/philipwalton/flexbugs#flexbug-3
- * 2. IE has trouble with min-widths on flex elements. Use the pixel value
- *    from our forms since that's usually the smallest we want them.
- */
-
 .euiModal {
   border: $euiBorderThin;
   // This mixin overwrites some of the border above
   @include euiBottomShadowLarge; // sass-lint:disable-line mixins-before-declarations
-  display: flex; /* 1 */
+  display: flex;
+  flex-direction: column;
+  max-height: 75vh; // We overflow the modal body based off this
+  overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
 
   position: relative;
   background-color: $euiColorEmptyShade;
@@ -23,14 +19,6 @@
   &:focus {
     outline: none;
   }
-
-  .euiModal__flex { /* 1 */
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    max-height: 75vh; // We overflow the modal body based off this
-    overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
-  }
 }
 
 .euiModal--maxWidth-default {
@@ -123,6 +111,7 @@
     width: 100vw !important;
     max-width: none !important;
     min-width: 0 !important;
+    max-height: 100vh;
     left: 0;
     right: 0;
     bottom: 0;
@@ -134,10 +123,6 @@
       @include euiBottomShadowLarge($reverse: true);
       top: auto;
     }
-
-    .euiModal__flex { /* 1 */
-      max-height: 100vh;
-    }
   }
 
   .euiModalHeader {

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

package/src/components/table/_responsive.scss

@@ -152,7 +152,6 @@
     }
 
     .euiTableRowCell {
-      display: block; /* IE requires block to grow and wrap. */
       min-width: 50%;
       border: none;
     }

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

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

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

package/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 {

package/src/global_styling/utility/_index.scss

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

package/test-env/components/basic_table/basic_table.js

@@ -1218,6 +1218,11 @@ EuiBasicTable.propTypes = {
        */
     sortable: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.func.isRequired]),
     isExpander: _propTypes.default.bool,
+
+    /**
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
+       */
     textOnly: _propTypes.default.bool,
 
     /**
@@ -1564,11 +1569,17 @@ EuiBasicTable.propTypes = {
   tableLayout: _propTypes.default.oneOf(["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.
      */
 
   /**
-     * 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: _propTypes.default.bool
 };