Add .break-word (#803)

Author: aaronshekey

docs/_data/typography.json

@@ -234,9 +234,9 @@
       "define": "Unsets any inherited behavior. Does not work in IE."
     },
     {
-      "class": "ww-break-word",
-      "output": "word-wrap: break-word;",
-      "define": "Deprecated, please use the equivalent ow-break-word instead. Specifies if a browser should insert line breaks within words to prevent text from overflowing its content box."
+      "class": "break-word",
+      "output": "word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;",
+      "define": "A utility class combining all word-break strategies when you absolutely must break a word."
     },
     {
       "class": "wb-normal",

docs/product/base/typography.html

@@ -113,7 +113,7 @@
 <p class="ws-pre-line">White-space: Pre-line</p>
 <p class="ws-unset">White-space: Unset</p>
 
-<p class="ow-break-word">Break word</p>
+<p class="break-word">Break word</p>
 
 <p class="truncate">Truncate: …</p>
 {% endhighlight %}
@@ -129,7 +129,7 @@
             <p class="flex--item ws-pre-wrap"><strong>White-space:</strong> Pre-wrap</p>
             <p class="flex--item ws-pre-line"><strong>White-space:</strong> Pre-line</p>
             <p class="flex--item ws-unset mb32"><strong>White-space:</strong> Unset</p>
-            <p class="flex--item ow-break-word mb32"><strong>Word Wrap:</strong> Break word</p>
+            <p class="flex--item break-word mb32"><strong>Break word:</strong> MethionylglutaminylarginylhionylglutaminylargintyrosylglutamylmethionylglutaminylarginyltyrlarginyltyrosylglutamylMethionylglutaminylarginyltyrosylglutamylnyltyrosylserinemethionylglutaminylargiglutamylmethionyosylglutamylmethionylglutaminylglutaminylarginyltyrosylglutamylmethionylglutaminylarginyltyrosylglutamylmetyltyrosylglutamylserine</p>
         </div>
     </div>
 </section>

lib/css/atomic/_stacks-typography.less

@@ -194,11 +194,6 @@ p {
 .wb-unset { word-break: unset !important; }
 
 //  --  Overflow Wrap
-//      This property will create a line break only if an entire word cannot be
-//      placed on its own line without overflowing. This was formerly called
-//      word-wrap, which was an unprefixed Microsoft vendor property implemented
-//      by most browsers. Word-wrap is still a supported alias, but can be removed
-//      once we no longer support IE11.
 .ow-normal {
     overflow-wrap: normal !important;
     word-wrap: normal !important;
@@ -224,8 +219,6 @@ p {
     word-wrap: unset !important;
 }
 
-.ww-break-word { word-wrap: break-word !important; }
-
 //  --  Hyphenation
 .hyphens-none { hyphens: none !important; }
 .hyphens-auto {
@@ -235,6 +228,17 @@ p {
 }
 .hyphens-unset { hyphens: unset !important; }
 
+//  --  Break word
+.break-word {
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    -webkit-hyphens: auto !important;
+    -moz-hyphens: auto !important;
+    -ms-hyphens: auto !important;
+    hyphens: auto !important;
+}
+
 //  ============================================================================
 //  $   LISTS
 //  ----------------------------------------------------------------------------