fix(typography): streamline text overflow and text truncate styles

telerik · Feb 15, 2023 · 8058111 · 8058111
1 parent 8a257f7
commit 8058111
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
@@ -628,7 +628,10 @@ $kendo-utils: (
         capitalize: capitalize,
         normal-case: none
     ),
-    "text-overflow": (),
+    "text-overflow": (
+        clip: clip,
+        ellipsis: ellipsis
+    ),
     "text-indent": (),
     "vertical-align": (),
     "white-space": (

diff --git a/packages/utils/scss/typography/_text-overflow.scss b/packages/utils/scss/typography/_text-overflow.scss
@@ -0,0 +1,24 @@
+@mixin kendo-utils--typography--text-overflow() {
+
+    // Text overflow utility classes
+    $kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
+    @include generate-utils( text, text-overflow, $kendo-utils-text-overflow );
+
+
+    // Text truncate utility classes
+    .#{$kendo-prefix}text-truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .\!#{$kendo-prefix}text-truncate {
+        white-space: nowrap !important; // sass-lint:disable-line no-important
+        overflow: hidden !important; // sass-lint:disable-line no-important
+        text-overflow: ellipsis !important; // sass-lint:disable-line no-important
+    }
+
+    // Legacy aliases
+    .#{$kendo-prefix}text-ellipsis { @extend .#{$kendo-prefix}text-truncate !optional; }
+    .\!#{$kendo-prefix}text-ellipsis { @extend .\!#{$kendo-prefix}text-truncate !optional; }
+
+}
diff --git a/packages/utils/scss/typography/index.import.scss b/packages/utils/scss/typography/index.import.scss
@@ -10,24 +10,20 @@
 @import "./_text-align.scss";
 @import "./_text-color.scss";
 // text decoration
+@import "./_text-overflow.scss";
 @import "./_text-transform.scss";
-// text overflow
 // text indent
 // vertical align
 @import "./_white-space.scss";
 
 
 @mixin kendo-utils--typography() {
-    /// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
-    /// @name .k-text-ellipsis
-    /// @group text
-    .#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
-
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-overflow();
     @include kendo-utils--typography--text-transform();
     @include kendo-utils--typography--white-space();
 }