Change deprecated html tags to text decoration classes

twbs · Nov 26, 2019 · 90e4b97 · 90e4b97
1 parent 1977a66
commit 90e4b97
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -426,7 +426,7 @@ $utilities: map-merge(
     ),
     "text-decoration": (
       property: text-decoration,
-      values: none
+      values: none underline line-through
     ),
     "font-style": (
       property: font-style,

diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md
@@ -135,9 +135,7 @@ Styling for common inline HTML5 elements.
 {{< example >}}
 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
 <p><del>This line of text is meant to be treated as deleted text.</del></p>
-<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
 <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
-<p><u>This line of text will render as underlined</u></p>
 <p><small>This line of text is meant to be treated as fine print.</small></p>
 <p><strong>This line rendered as bold text.</strong></p>
 <p><em>This line rendered as italicized text.</em></p>
@@ -149,7 +147,7 @@ While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant
 
 ## Text utilities
 
-Change text alignment, transform, style, weight, line-height and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
+Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
 
 ## Abbreviations
 

diff --git a/site/content/docs/4.3/utilities/text.md b/site/content/docs/4.3/utilities/text.md
@@ -109,8 +109,10 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
 
 ## Text decoration
 
-Remove a text decoration with a `.text-decoration-none` class.
+Decorate text in components with text decoration classes.
 
 {{< example >}}
-<a href="#" class="text-decoration-none">Non-underlined link</a>
+<p class="text-decoration-underline">This text has a line underneath it.</p>
+<p class="text-decoration-line-through">This text has a line going through it.</p>
+<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
 {{< /example >}}