Fix word-break in tables on most browsers (#1349)

elastic · Dec 7, 2018 · a5dbb39 · a5dbb39
1 parent 29eb67b
commit a5dbb39
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 27 deletions.
diff --git a/CHANGELOG.md b/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))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/tables/basic/basic.js b/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,
     };
   };
 

diff --git a/src-docs/src/views/tables/basic/basic_section.js b/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 &quot;Date of Birth&quot; column) to utilizing more complex React components
           (e.g. the &quot;Online&quot;, &quot;Github&quot; and &quot;Nationality&quot; 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>

diff --git a/src-docs/src/views/tables/custom/custom_section.js b/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

diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/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>
 );
diff --git a/src/components/table/_table.scss b/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 {

diff --git a/src/components/table/table_row_cell.js b/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,
   /**

diff --git a/src/global_styling/mixins/_typography.scss b/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

diff --git a/src/global_styling/utility/_utility.scss b/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;
 }