feat(list): update option-label styles to match design

telerik · May 2, 2023 · 7b57567 · 7b57567
1 parent 1ab9ec8
commit 7b57567
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/list/_variables.scss b/packages/bootstrap/scss/list/_variables.scss
@@ -245,3 +245,7 @@ $kendo-list-group-item-shadow: null !default;
 /// The color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: $kendo-subtle-text !default;
+
+/// The color of the 'Option Label' text.
+/// @group list
+$kendo-list-option-label-text: $kendo-subtle-text !default;
diff --git a/packages/classic/scss/list/_variables.scss b/packages/classic/scss/list/_variables.scss
@@ -245,3 +245,7 @@ $kendo-list-group-item-shadow: null !default;
 /// The color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: $kendo-subtle-text !default;
+
+/// The color of the 'Option Label' text.
+/// @group list
+$kendo-list-option-label-text: $kendo-subtle-text !default;
diff --git a/packages/default/scss/list/_layout.scss b/packages/default/scss/list/_layout.scss
@@ -122,6 +122,7 @@
     }
     .k-list-optionlabel {
         @extend .k-list-item !optional;
+        column-gap: 0;
     }
 
 

diff --git a/packages/default/scss/list/_theme.scss b/packages/default/scss/list/_theme.scss
@@ -62,6 +62,12 @@
         }
     }
 
+    // Option Label
+    .k-list-optionlabel,
+    .k-list-optionlabel.k-hover,
+    .k-list-optionlabel:hover {
+        color: $kendo-list-option-label-text;
+    }
 
     // List group item
     .k-list-group-item {

diff --git a/packages/default/scss/list/_variables.scss b/packages/default/scss/list/_variables.scss
@@ -245,3 +245,7 @@ $kendo-list-group-item-shadow: null !default;
 /// The color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: $kendo-subtle-text !default;
+
+/// The color of the 'Option Label' text.
+/// @group list
+$kendo-list-option-label-text: $kendo-subtle-text !default;
diff --git a/packages/fluent/scss/list/_layout.scss b/packages/fluent/scss/list/_layout.scss
@@ -125,6 +125,7 @@
     }
     .k-list-optionlabel {
         @extend .k-list-item !optional;
+        column-gap: 0;
     }
 
 

diff --git a/packages/fluent/scss/list/_theme.scss b/packages/fluent/scss/list/_theme.scss
@@ -76,6 +76,21 @@
         );
     }
 
+    // Option Label
+    .k-list-optionlabel,
+    .k-list-optionlabel.k-hover,
+    .k-list-optionlabel:hover {
+        @include fill(
+            $color: var( --kendo-list-option-label-text, #{$kendo-list-option-label-text} )
+        );
+    }
+
+    .k-list-optionlabel:disabled,
+    .k-list-optionlabel.k-disabled {
+            @include fill(
+                $color: var( --kendo-list-option-label-disabled-text, #{$kendo-list-option-label-disabled-text} )
+            )
+    }
 
     // List group item
     .k-list-group-item {

diff --git a/packages/fluent/scss/list/_variables.scss b/packages/fluent/scss/list/_variables.scss
@@ -276,3 +276,10 @@ $kendo-list-group-item-shadow: none !default;
 /// The text color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: get-theme-color-var( neutral-160 ) !default;
+
+/// The color of the 'Option Label' text.
+/// @group list
+$kendo-list-option-label-text: $kendo-subtle-text !default;
+/// The color of the disabled 'Option Label' text.
+/// @group list
+$kendo-list-option-label-disabled-text: $kendo-disabled-text !default;
diff --git a/packages/material/scss/list/_variables.scss b/packages/material/scss/list/_variables.scss
@@ -245,3 +245,7 @@ $kendo-list-group-item-shadow: null !default;
 /// The color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: $kendo-subtle-text !default;
+
+/// The color of the 'Option Label' text.
+/// @group list
+$kendo-list-option-label-text: $kendo-subtle-text !default;