Add .text-capitalize utility class (#2072)

* Add .text-capitalize * Add to doc * Create four-dancers-dress.md Co-authored-by: Jon Rohan <[email protected]>
primer · May 4, 2022 · ab6f084 · ab6f084
1 parent 13dd110
commit ab6f084
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/four-dancers-dress.md b/.changeset/four-dancers-dress.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add `.text-capitalize` utility class
diff --git a/docs/content/utilities/typography.md b/docs/content/utilities/typography.md
@@ -105,6 +105,7 @@ Change the font weight, styles, and alignment with these utilities.
 <p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
 <p class="text-mono">Monospace</p>
 <p class="user-select-none">User Select None</p>
+<p class="text-capitalize">capitalize</p>
 ```
 
 ## Word-break

diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss
@@ -243,3 +243,8 @@
 .user-select-none {
   user-select: none !important;
 }
+
+/* Make text capitalized (transforms first character to uppercase) */
+.text-capitalize {
+  text-transform: capitalize !important;
+}