Add .wb-break-word class to existing .break-word (#1555)

primer · Aug 31, 2021 · 4ae2174 · 4ae2174
1 parent aaedef1
commit 4ae2174
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/healthy-ducks-wave.md b/.changeset/healthy-ducks-wave.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add `.wb-break-word` class to existing `.break-word`
diff --git a/deprecations.js b/deprecations.js
@@ -6,6 +6,14 @@ import fs from 'fs'
  * array and a "message" string.
  */
 const versionDeprecations = {
+  '17.6.1': [
+    {
+      selectors: [
+        '.break-word'
+      ],
+      message: 'The .break-word class has been deprecated, use .wb-break-word instead.'
+    }
+  ],
   '17.0.0': [
     {
       variables: ['$h000-size', '$h000-size-mobile'],

diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss
@@ -208,7 +208,8 @@
 .ws-normal { white-space: normal !important; }
 
 /* Force long "words" to wrap if they exceed the width of the container */
-.break-word {
+.break-word, // deprecated
+.wb-break-word {
   word-break: break-word !important;
   // this is for backwards compatibility with browsers that don't respect overflow-wrap
   word-wrap: break-word !important;