Fix word-break in tables on most browsers

CHANGELOG.md

@@ -3,6 +3,11 @@
 - Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346))
 - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346))
 - Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347))
+- Added `.eui-textBreakWord` CSS utility class  ([#1349](https://github.com/elastic/eui/pull/1349))
+
+**Bug fixes**
+
+- Fixed word-breaks in table cells for Firefox ([#1349](https://github.com/elastic/eui/pull/1349))
 
 ## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0)
 

src-docs/src/views/tables/basic/basic.js

@@ -97,6 +97,7 @@ export const Table = () => {
     return {
       className: 'customCellClass',
       'data-test-subj': `cell-${id}-${field}`,
+      textOnly: true,
     };
   };
 

src-docs/src/views/tables/basic/basic_section.js

@@ -61,6 +61,10 @@ export const section = {
           returns the React node that should be displayed as the content of the cell. This can be as simple as
           formatting values (e.g. the "Date of Birth" column) to utilizing more complex React components
           (e.g. the "Online", "Github" and "Nationality" columns as seen below).
+          <br/>
+          <strong>Note:</strong> the basic table will treat any cells that use a <EuiCode>render</EuiCode> function
+          as being <EuiCode>textOnly: false</EuiCode>. This may cause unnecessary word breaks. Apply <EuiCode>textOnly: true</EuiCode> to
+          ensure it breaks properly.
         </li>
       </ul>
     </div>

src-docs/src/views/tables/custom/custom_section.js

@@ -44,7 +44,7 @@ export const section = {
         Important to note are how you need to set individual props like
         the <EuiCode>truncateText</EuiCode> prop to cells to enforce a single-line behavior
         and truncate their contents, or set the <EuiCode>textOnly</EuiCode> prop
-        to <EuiCode>false</EuiCode> if they contain overflowing content like popovers.
+        to <EuiCode>false</EuiCode> if you need the contents to be a direct descendent of the cell.
       </p>
       <h3>
         Responsive extras

src-docs/src/views/utility_classes/utility_classes.js

@@ -5,15 +5,22 @@ import {
   EuiCode,
   EuiSpacer,
   EuiIcon,
+  EuiTextColor,
 } from '../../../../src/components';
 
 export default () => (
   <EuiText>
-
     <h4>Text</h4>
 
     <EuiSpacer />
 
+    <EuiTextColor color="danger">
+      <EuiCode className="eui-textInheritColor">.eui-textInheritColor</EuiCode> will
+      force text to inherit it&apos;s color from it&apos;s parent.
+    </EuiTextColor>
+
+    <EuiSpacer />
+
     <div className="eui-textLeft">
       <EuiCode>.eui-textLeft</EuiCode>
     </div>
@@ -27,32 +34,79 @@ export default () => (
 
     <EuiSpacer />
 
-    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textNoWrap">
+    <div
+      style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }}
+      className="eui-textNoWrap"
+    >
       <EuiCode>.eui-textNoWrap</EuiCode> will force text not to wrap even in small containers.
     </div>
 
     <EuiSpacer />
 
-    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textBreakAll">
-      <EuiCode>.eui-textBreakAll</EuiCode> will break up anything. It is useful for long urls like http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+    <div
+      style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }}
+      className="eui-textTruncate"
+    >
+      <EuiCode>.eui-textTruncate</EuiCode> will ellipsis after a certain point.
     </div>
 
+    <EuiSpacer />
+    <h4>Word breaking</h4>
+    <p>
+      We recommend using <EuiCode>.eui-textOverflowWrap</EuiCode> to break on long words above all other options as it is supported
+      by all major browsers (except for IE11). The one caveat is that it does not work on <EuiCode>display: flex</EuiCode> elements.
+      To remedy, you can either add another wrapper with this class or use <EuiCode>.eui-textBreakWord</EuiCode> instead.
+    </p>
     <EuiSpacer />
 
-    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textBreakWord">
-      <EuiCode>.eui-textBreakWord</EuiCode> will only break up at the end of words. Long urls will still break http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+    <div
+      style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }}
+      className="eui-textOverflowWrap"
+    >
+      <EuiCode>.eui-textOverflowWrap</EuiCode> will only break up at the end of words. Long urls
+      will still break
+      http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '}.
+      <strong>Falls back to <EuiCode>break-all</EuiCode> on IE11.</strong>
     </div>
 
     <EuiSpacer />
 
-    <div style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }} className="eui-textTruncate">
-      <EuiCode>.eui-textTruncate</EuiCode> will ellipsis after a certain point.
+    <div
+      style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }}
+      className="eui-textBreakWord"
+    >
+      <EuiCode>.eui-textBreakWord</EuiCode> will only break up at the end of words. Long urls will
+      still break
+      http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '}.
+      <strong>Falls back to <EuiCode>break-all</EuiCode> on Firefox and IE11.</strong>
     </div>
 
-    <h4>Vertical alignment</h4>
+    <EuiSpacer />
+
+    <div
+      style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }}
+      className="eui-textBreakAll"
+    >
+      <EuiCode>.eui-textBreakAll</EuiCode> will break up anything. It is useful for long urls like
+      http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+    </div>
 
     <EuiSpacer />
 
+    <div
+      style={{ width: 300, padding: 16, background: 'rgba(254, 228, 181, 0.5)' }}
+      className="eui-textBreakWord eui-textBreakNormal"
+    >
+      <EuiCode>.eui-textBreakNormal</EuiCode> revert back to not forcing word breaks. It is <strong>not</strong> useful for long urls like
+      http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+    </div>
+
+    <EuiSpacer />
+
+    <EuiSpacer />
+    <h4>Vertical alignment</h4>
+    <EuiSpacer />
+
     <div>
       <EuiIcon type="logoElasticStack" size="xxl" className="eui-alignTop" />
       <EuiCode>.eui-alignTop</EuiCode>
@@ -68,7 +122,7 @@ export default () => (
     <EuiSpacer />
 
     <div>
-      <EuiIcon type="logoElasticStack" size="xxl"  className="eui-alignBottom" />
+      <EuiIcon type="logoElasticStack" size="xxl" className="eui-alignBottom" />
       <EuiCode>.eui-alignBottom</EuiCode>
     </div>
 
@@ -116,7 +170,5 @@ export default () => (
     <EuiCode className="eui-showFor--l">.eui-showFor--l</EuiCode>
     <EuiSpacer />
     <EuiCode className="eui-showFor--xl">.eui-showFor--xl</EuiCode>
-
-
   </EuiText>
 );

src/components/table/_table.scss

@@ -127,22 +127,20 @@
  * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
  *    the padding was on the cell, the ellipsis would be cropped.
  * 3. Support wrapping.
+ * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
+ *    the cell.
  */
 .euiTableCellContent {
+  overflow: hidden; /* 4 */
   display: flex;
   align-items: center; /* 1 */
   padding: $euiTableCellContentPadding; /* 2 */
 }
 
-/**
-  * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing
-  *    the cell.
-  */
 .euiTableCellContent__text {
+  @include euiTextOverflowWrap; /* 4 */
   min-width: 0;
   text-overflow: ellipsis;
-  word-break: break-all; /* 1 */ // Fallback for FF and IE
-  word-break: break-word; /* 1 */
 }
 
 .euiTableCellContent--alignRight {
@@ -168,15 +166,9 @@
 .euiTableCellContent--overflowingContent {
   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;
-
-  /**
-   * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing
-   *    the cell.
-   */
-  .euiTableCellContent__text {
-    overflow: visible; /* 1 */
-  }
 }
 
 .euiTableCellContent--showOnHover {

src/components/table/table_row_cell.js

@@ -82,6 +82,10 @@ EuiTableRowCell.propTypes = {
   truncateText: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * 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`.
+   */
   textOnly: PropTypes.bool,
   colSpan: PropTypes.number,
   /**

src/global_styling/mixins/_typography.scss

@@ -85,6 +85,15 @@
   font-weight: $euiFontWeightLight; // always apply light weight to x-large type
 }
 
+// Overflow-wrap for breaking on word
+// Does not work on `display: flex` items
+@mixin euiTextOverflowWrap  {
+  @include internetExplorerOnly {
+    word-break: break-all;
+  }
+  overflow-wrap: break-word;
+}
+
 // Text truncation
 //
 // Prevent text from wrapping onto multiple lines, and truncate with an

src/global_styling/utility/_utility.scss

@@ -26,6 +26,13 @@
 .eui-textBreakAll {word-break: break-all !important;}
 .eui-textBreakNormal {word-break: normal !important;}
 
+.eui-textOverflowWrap {
+  @include internetExplorerOnly {
+    word-break: break-all !important;
+  }
+  overflow-wrap: break-word !important;
+}
+
 .eui-textTruncate {
   @include euiTextTruncate;
 }