@progress/kendo-theme-fluent 10.6.0-dev.3 → 10.6.0-dev.5

package/dist/meta/variables.json

@@ -18482,5 +18482,21 @@
                 "line-height": "var(--kendo-line-height, normal)"
             }
         }
+    },
+    "kendo-group-menu-item-action-hover-bg": {
+        "type": "String",
+        "value": "color-mix(in srgb, currentColor 5%, transparent)"
+    },
+    "kendo-group-menu-item-action-selected-bg": {
+        "type": "String",
+        "value": "color-mix(in srgb, currentColor 8%, transparent)"
+    },
+    "kendo-group-menu-item-add-action-text": {
+        "type": "String",
+        "value": "var(--kendo-color-primary, #0078d4)"
+    },
+    "kendo-group-menu-item-border": {
+        "type": "String",
+        "value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
     }
 }

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.6.0-dev.3",
+    "version": "10.6.0-dev.5",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.6.0-dev.3",
+    "version": "10.6.0-dev.5",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.6.0-dev.3",
+    "version": "10.6.0-dev.5",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "10.6.0-dev.3",
+  "version": "10.6.0-dev.5",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,13 +53,13 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.6.0-dev.3",
-    "@progress/kendo-theme-utils": "10.6.0-dev.3"
+    "@progress/kendo-svg-icons": "^4.1.0",
+    "@progress/kendo-theme-core": "10.6.0-dev.5",
+    "@progress/kendo-theme-utils": "10.6.0-dev.5"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "d84da47877d4b18773ad7e5d2d9e7934e78094dd"
+  "gitHead": "974ffdfcf9036dc8bfd368b17f6fcef80e6a1d98"
 }

package/scss/column-menu/_layout.scss

@@ -24,27 +24,49 @@
                 line-height: $_line-height;
             }
         }
+
+        .k-group-menu-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            .k-group-menu-item {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+                font-size: $_font-size;
+                line-height: $_line-height;
+            }
+        }
+    }
+
+    .k-group-menu .k-group-menu-item-wrap + .k-group-menu-item-wrap {
+        border-top: 1px solid;
     }
 
-    .k-columnmenu-item-actions {
+    .k-group-menu-item {
+        display: flex;
+        user-select: none;
+        gap: k-spacing(1);
+    }
+
+    .k-group-menu-item-actions {
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: k-spacing(2);
         margin-block: calc( k-spacing(1) * -1);
         pointer-events: none;
     }
 
-    .k-columnmenu-item-action {
+    .k-group-menu-item-action {
         display: flex;
         align-items: center;
         justify-content: center;
-        pointer-events: none;
         padding: k-spacing(1);
+        border-radius: k-border-radius(md);
+        pointer-events: auto;
+        cursor: pointer;
     }
 
-    .k-columnmenu-item-drag-action {
-        pointer-events: auto;
+    .k-group-menu-item-drag-action {
         cursor: move;
     }
 }

package/scss/column-menu/_theme.scss

@@ -1,5 +1,26 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-column-menu--theme-base() {
     .k-column-menu {}
+
+    .k-group-menu-item-action:not(.k-group-menu-item-drag-action).k-hover,
+    .k-group-menu-item-action:not(.k-group-menu-item-drag-action):hover {
+        background-color: $kendo-group-menu-item-action-hover-bg;
+    }
+
+    .k-group-menu-item-action:not(.k-group-menu-item-drag-action).k-selected,
+    .k-group-menu-item-action:not(.k-group-menu-item-drag-action):active {
+        background-color: $kendo-group-menu-item-action-selected-bg;
+    }
+
+    .k-group-menu-item-action.k-group-menu-item-add-action {
+        color: $kendo-group-menu-item-add-action-text;
+    }
+
+    .k-group-menu .k-group-menu-item-wrap + .k-group-menu-item-wrap {
+        border-top-color: $kendo-group-menu-item-border;
+    }
 }
 
 @mixin kendo-column-menu--theme() {

package/scss/column-menu/_variables.scss

@@ -39,3 +39,9 @@ $kendo-column-menu-sizes: (
         line-height: $kendo-column-menu-lg-line-height
     )
 ) !default;
+
+// Group Menu
+$kendo-group-menu-item-action-hover-bg: color-mix(in srgb, currentColor 5%, transparent) !default;
+$kendo-group-menu-item-action-selected-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
+$kendo-group-menu-item-add-action-text: k-color(primary) !default;
+$kendo-group-menu-item-border: color-mix(in srgb, k-color( border ) 16%, transparent) !default;

package/scss/grid/_layout.scss

@@ -1167,14 +1167,12 @@
         }
     }
 
-    .k-popup .k-multicheck-wrap {
+    .k-multicheck-wrap {
         margin: 0;
         padding: 0;
-        max-height: 300px;
         font-size: var( --kendo-grid-column-menu-multicheck-font-size, #{$kendo-grid-column-menu-multicheck-font-size} );
         line-height: var( --kendo-grid-column-menu-multicheck-line-height, #{$kendo-grid-column-menu-multicheck-line-height} );
         white-space: nowrap;
-        overflow: auto;
         list-style: none;
 
         .k-item,
@@ -1281,9 +1279,6 @@
         padding: 0;
         margin: 0;
         list-style: none;
-        max-height: 200px;
-        overflow-x: hidden;
-        overflow-y: auto;
     }
 
     .k-column-chooser-title,

package/scss/pager/_layout.scss

@@ -17,6 +17,7 @@
         line-height: var( --kendo-pager-line-height, #{$kendo-pager-line-height} );
         white-space: nowrap;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         gap: var( --INTERNAL--kendo-pager-spacing, 0 );
         position: relative;

package/scss/popup/_layout.scss

@@ -71,4 +71,15 @@
         box-shadow: none;
     }
 
+    .k-popup .k-column-list {
+        max-height: 200px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .k-popup .k-multicheck-wrap {
+        max-height: 300px;
+        overflow: auto;
+    }
+
 }