Fix text wrapping utilities (elastic#2157)

… for better browser support * Set `.eui-textOverflowWrap` to be deprecated * Fix up guidelines and change `. euiYScrollWithShadows` to `.eui-yScrollWithShadows`
thompsongl · Sep 10, 2019 · 460642d · 460642d
1 parent 77a57c4
commit 460642d
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 131 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Fixed invalid `aria-desribedby` values set by `EuiToolTip` ([#2156](https://github.com/elastic/eui/pull/2156))
 - Added `"center"` as an acceptable value to `EuiBasicTable`'s `align` proptype ([#2158](https://github.com/elastic/eui/pull/2158))
+- Fixed `.eui-textBreakWord` utility class to be cross-browser compatible ([#2157](https://github.com/elastic/eui/pull/2157))
 
 ## [`13.0.0`](https://github.com/elastic/eui/tree/v13.0.0)
 

diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
@@ -762,7 +762,7 @@ export const SassGuidelines = ({ selectedTheme }) => {
                 <Link to="/utilities/css-utility-classes">
                   CSS utility class
                 </Link>{' '}
-                <EuiCode>.euiYScrollWithShadows</EuiCode>.
+                <EuiCode>.eui-yScrollWithShadows</EuiCode>.
               </p>
               <p>
                 <b>Example:</b>

diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js
@@ -12,8 +12,36 @@ import {
 const longLink =
   'http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool';
 
+const wrappingExampleStyle = {
+  width: 290,
+  padding: 16,
+  background: 'rgba(254, 228, 181, 0.5)',
+};
+
 export default () => (
   <EuiText>
+    <h4>Display</h4>
+
+    <EuiCode className="eui-displayBlock">.eui-displayBlock</EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="eui-displayInline">.eui-displayInline</EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="eui-displayInlineBlock">
+      .eui-displayInlineBlock
+    </EuiCode>
+
+    <EuiSpacer />
+
+    <EuiCode className="eui-fullWidth">
+      .eui-fullWidth (similar to eui-displayBlock but adds 100% width)
+    </EuiCode>
+
+    <EuiSpacer />
+
     <h4>Text</h4>
 
     <EuiSpacer />
@@ -38,103 +66,77 @@ export default () => (
 
     <EuiSpacer />
 
-    <div
-      style={{
-        width: 300,
-        padding: 16,
-        background: 'rgba(254, 228, 181, 0.5)',
-      }}
-      className="eui-textNoWrap">
+    <EuiSpacer />
+
+    <div style={wrappingExampleStyle} 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-textTruncate">
+    <div style={wrappingExampleStyle} 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-textOverflowWrap">
-      <EuiCode>.eui-textOverflowWrap</EuiCode> will only break up at the end of
-      words. Long urls will still break
-      {longLink}.
-      <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-textBreakWord">
+    <div style={wrappingExampleStyle} className="eui-textBreakWord">
       <EuiCode>.eui-textBreakWord</EuiCode> will only break up at the end of
-      words. Long urls will still break
-      {longLink}.
-      <strong>
-        Falls back to <EuiCode>break-all</EuiCode> on Firefox and IE11.
-      </strong>
+      words. Long urls will still break {longLink}.
     </div>
 
     <EuiSpacer />
 
-    <div
-      style={{
-        width: 300,
-        padding: 16,
-        background: 'rgba(254, 228, 181, 0.5)',
-      }}
-      className="eui-textBreakAll">
+    <div style={wrappingExampleStyle} className="eui-textBreakAll">
       <EuiCode>.eui-textBreakAll</EuiCode> will break up anything. It is useful
-      for long urls like
-      {longLink}.
+      for long urls like {longLink}.
     </div>
 
     <EuiSpacer />
 
     <div
-      style={{
-        width: 300,
-        padding: 16,
-        background: 'rgba(254, 228, 181, 0.5)',
-      }}
+      style={wrappingExampleStyle}
       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
-      {longLink}.
+      breaks. It is <strong>not</strong> useful for long urls like {longLink}.
     </div>
 
     <EuiSpacer />
 
+    <h4>Overflows</h4>
+
+    <div className="guideSass__overflowShadows">
+      <EuiText className="guideSass__overflowShadowText" size="s">
+        <p>
+          It requires a wrapping element to control the height with{' '}
+          <EuiCode>overflow-y: hidden;</EuiCode> and the content to use the CSS
+          utility class <EuiCode>.eui-yScrollWithShadows</EuiCode>.
+        </p>
+        <p>
+          <b>Example:</b>
+        </p>
+        <EuiCodeBlock language="html" isCopyable paddingSize="s">
+          {`<BodyContent style={{ height: 200, overflowY: 'hidden' }}>
+  <BodyScroll className="eui-yScrollWithShadows" />
+</BodyContent>`}
+        </EuiCodeBlock>
+        <p>
+          Consequuntur atque nulla atque nemo tenetur numquam. Assumenda
+          aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor
+          qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut
+          similique ut. Sed repellendus commodi iure officiis exercitationem
+          praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam
+          id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
+          voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
+          tempore sit placeat maxime laudantium. Mollitia tempore minus qui
+          autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit.
+          Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti
+          voluptates qui exercitationem dolores.
+        </p>
+      </EuiText>
+    </div>
+
     <EuiSpacer />
     <h4>Vertical alignment</h4>
     <EuiSpacer />
@@ -171,63 +173,6 @@ export default () => (
 
     <EuiSpacer />
 
-    <h4>Display</h4>
-
-    <EuiCode className="eui-displayBlock">.eui-displayBlock</EuiCode>
-
-    <EuiSpacer />
-
-    <EuiCode className="eui-displayInline">.eui-displayInline</EuiCode>
-
-    <EuiSpacer />
-
-    <EuiCode className="eui-displayInlineBlock">
-      .eui-displayInlineBlock
-    </EuiCode>
-
-    <EuiSpacer />
-
-    <EuiCode className="eui-fullWidth">
-      .eui-fullWidth (similar to eui-displayBlock but adds 100% width)
-    </EuiCode>
-
-    <EuiSpacer />
-
-    <h4>Overflows</h4>
-
-    <div className="guideSass__overflowShadows">
-      <EuiText className="guideSass__overflowShadowText" size="s">
-        <p>
-          It requires a wrapping element to control the height with{' '}
-          <EuiCode>overflow-y: hidden;</EuiCode> and the content to use the CSS
-          utility class <EuiCode>.euiYScrollWithShadows</EuiCode>.
-        </p>
-        <p>
-          <b>Example:</b>
-        </p>
-        <EuiCodeBlock language="html" isCopyable paddingSize="s">
-          {`<BodyContent style={{ height: 200, overflowY: 'hidden' }}>
-  <BodyScroll className="euiYScrollWithShadows" />
-</BodyContent>`}
-        </EuiCodeBlock>
-        <p>
-          Consequuntur atque nulla atque nemo tenetur numquam. Assumenda
-          aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor
-          qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut
-          similique ut. Sed repellendus commodi iure officiis exercitationem
-          praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam
-          id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
-          voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
-          tempore sit placeat maxime laudantium. Mollitia tempore minus qui
-          autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit.
-          Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti
-          voluptates qui exercitationem dolores.
-        </p>
-      </EuiText>
-    </div>
-
-    <EuiSpacer />
-
     <h4>Responsive</h4>
 
     <EuiCode className="eui-hideFor--xs">.eui-hideFor--xs</EuiCode>

diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
@@ -25,12 +25,23 @@
 .eui-textInheritColor {color: inherit !important;}
 
 .eui-textBreakWord {
-  word-break: break-all !important; // Fallback for FF and IE
-  word-break: break-word !important;
+  // 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
 }
-.eui-textBreakAll {word-break: break-all !important;}
-.eui-textBreakNormal {word-break: normal !important;}
 
+.eui-textBreakAll {
+  word-break: break-all !important;
+}
+
+.eui-textBreakNormal {
+  overflow-wrap: normal !important;
+  word-wrap: normal !important;
+  word-break: normal !important;
+}
+
+// TODO: 7/23 DEPRECATE in favor of .eui-textBreakWord now that it's working as intended
 .eui-textOverflowWrap {
   @include internetExplorerOnly {
     word-break: break-all !important;