feat(grid): add selection aggregates styles

telerik · Apr 12, 2023 · 34de2a8 · 34de2a8
1 parent ec6ca19
commit 34de2a8
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 10 deletions.
diff --git a/packages/bootstrap/scss/grid/_theme.scss b/packages/bootstrap/scss/grid/_theme.scss
@@ -175,6 +175,15 @@
         }
     }
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        @include fill(
+            $kendo-grid-selection-aggregates-text,
+            $kendo-grid-selection-aggregates-bg,
+            $kendo-grid-selection-aggregates-border
+        );
+    }
+
 
     // Content
     .k-master-row {

diff --git a/packages/bootstrap/scss/grid/_variables.scss b/packages/bootstrap/scss/grid/_variables.scss
@@ -65,6 +65,8 @@ $kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-x !defa
 $kendo-grid-sm-edit-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-grid-sm-edit-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
+$kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
 
 $kendo-grid-md-padding-x: $kendo-grid-padding-x !default;
 $kendo-grid-md-padding-y: $kendo-grid-padding-y !default;
@@ -79,6 +81,8 @@ $kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default
 $kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
 $kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
 $kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
+$kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
+$kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !default;
 
 
 // Kendo Grid sizes
@@ -96,7 +100,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
         button-padding-y: $kendo-button-sm-padding-y,
         button-calc-size: $kendo-button-sm-calc-size,
-        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
     ),
     md: (
         header-padding-x: $kendo-grid-md-header-padding-x,
@@ -111,7 +117,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
         button-padding-y: $kendo-button-md-padding-y,
         button-calc-size: $kendo-button-md-calc-size,
-        group-dropclue-height: $kendo-grid-md-group-dropclue-height
+        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
     ),
 ) !default;
 
@@ -191,6 +199,28 @@ $kendo-grid-selected-text: $kendo-table-selected-text !default;
 /// @group grid
 $kendo-grid-selected-border: $kendo-table-selected-border !default;
 
+/// Background color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-bg: $kendo-grid-header-bg !default;
+/// Text color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-text: $kendo-grid-text !default;
+/// Border color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border: $kendo-grid-border !default;
+/// Border width of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border-width: $kendo-grid-border-width !default;
+/// Spacing between the selection aggregates items
+/// @group grid
+$kendo-grid-selection-aggregates-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// Line height of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
+/// Font weight of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
+
 $kendo-grid-grouping-row-bg: k-try-shade( $kendo-grid-bg ) !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 

diff --git a/packages/classic/scss/grid/_variables.scss b/packages/classic/scss/grid/_variables.scss
@@ -71,6 +71,8 @@ $kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-x !defa
 $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-cell-padding-x !default;
 $kendo-grid-sm-edit-cell-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
+$kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
 
 $kendo-grid-md-padding-x: $kendo-grid-padding-x !default;
 $kendo-grid-md-padding-y: $kendo-grid-padding-y !default;
@@ -85,6 +87,8 @@ $kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default
 $kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
 $kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
 $kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
+$kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
+$kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !default;
 
 
 // Kendo Grid sizes
@@ -102,7 +106,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
         button-padding-y: $kendo-button-sm-padding-y,
         button-calc-size: $kendo-button-sm-calc-size,
-        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
     ),
     md: (
         header-padding-x: $kendo-grid-md-header-padding-x,
@@ -117,7 +123,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
         button-padding-y: $kendo-button-md-padding-y,
         button-calc-size: $kendo-button-md-calc-size,
-        group-dropclue-height: $kendo-grid-md-group-dropclue-height
+        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
     ),
 ) !default;
 
@@ -198,6 +206,28 @@ $kendo-grid-selected-text: $kendo-table-selected-text !default;
 /// @group grid
 $kendo-grid-selected-border: $kendo-table-selected-border !default;
 
+/// Background color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-bg: $kendo-grid-header-bg !default;
+/// Text color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-text: $kendo-grid-text !default;
+/// Border color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border: $kendo-grid-border !default;
+/// Border width of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border-width: $kendo-grid-border-width !default;
+/// Spacing between the selection aggregates items
+/// @group grid
+$kendo-grid-selection-aggregates-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// Line height of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
+/// Font weight of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
+
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
 $kendo-grid-sorted-bg: rgba( k-contrast-color( $kendo-grid-bg ), .02 ) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;

diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -667,6 +667,20 @@
     }
 
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        border-width: $kendo-grid-selection-aggregates-border-width 0 0;
+        border-style: solid;
+        line-height: $kendo-grid-selection-aggregates-line-height;
+        display: flex;
+        justify-content: flex-end;
+        gap: $kendo-grid-selection-aggregates-spacing;
+    }
+    .k-selection-aggregates-item-value {
+        font-weight: $kendo-grid-selection-aggregates-font-weight;
+    }
+
+
     // Pager
     .k-grid-pager {
         border-width: 1px 0 0;
@@ -913,6 +927,8 @@
         $_button-calc-size: k-map-get( $size-props, button-calc-size );
         $_button-line-height: k-map-get( $size-props, button-line-height );
         $_group-dropclue-height: k-map-get( $size-props, group-dropclue-height );
+        $_selection-aggregates-padding-x: k-map-get( $size-props, selection-aggregates-padding-x );
+        $_selection-aggregates-padding-y: k-map-get( $size-props, selection-aggregates-padding-y );
 
         .k-grid-#{$size} {
 
@@ -1015,6 +1031,13 @@
                     gap: k-math-div( $_cell-padding-y, 2 );
                 }
             }
+
+
+            // Selection Aggregates
+            .k-selection-aggregates {
+                padding-block: $_selection-aggregates-padding-x;
+                padding-inline: $_selection-aggregates-padding-y;
+            }
         }
 
     }

diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss
@@ -238,6 +238,15 @@
         }
     }
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        @include fill(
+            $kendo-grid-selection-aggregates-text,
+            $kendo-grid-selection-aggregates-bg,
+            $kendo-grid-selection-aggregates-border
+        );
+    }
+
     // Content
     .k-master-row {
         .k-grid-content-sticky {

diff --git a/packages/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss
@@ -64,6 +64,8 @@ $kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-x !defa
 $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-cell-padding-x !default;
 $kendo-grid-sm-edit-cell-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
+$kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
 
 $kendo-grid-md-padding-x: $kendo-grid-padding-x !default;
 $kendo-grid-md-padding-y: $kendo-grid-padding-y !default;
@@ -78,6 +80,8 @@ $kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default
 $kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
 $kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
 $kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
+$kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
+$kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !default;
 
 
 // Kendo Grid sizes
@@ -95,7 +99,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
         button-padding-y: $kendo-button-sm-padding-y,
         button-calc-size: $kendo-button-sm-calc-size,
-        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
     ),
     md: (
         header-padding-x: $kendo-grid-md-header-padding-x,
@@ -110,7 +116,9 @@ $kendo-grid-sizes: (
         edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
         button-padding-y: $kendo-button-md-padding-y,
         button-calc-size: $kendo-button-md-calc-size,
-        group-dropclue-height: $kendo-grid-md-group-dropclue-height
+        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
     ),
 ) !default;
 
@@ -191,6 +199,28 @@ $kendo-grid-selected-text: $kendo-table-selected-text !default;
 /// @group grid
 $kendo-grid-selected-border: $kendo-table-selected-border !default;
 
+/// Background color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-bg: $kendo-grid-header-bg !default;
+/// Text color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-text: $kendo-grid-text !default;
+/// Border color of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border: $kendo-grid-border !default;
+/// Border width of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-border-width: $kendo-grid-border-width !default;
+/// Spacing between the selection aggregates items
+/// @group grid
+$kendo-grid-selection-aggregates-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// Line height of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
+/// Font weight of the selection aggregates container
+/// @group grid
+$kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
+
 $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 

diff --git a/packages/fluent/scss/grid/_layout.scss b/packages/fluent/scss/grid/_layout.scss
@@ -672,6 +672,22 @@
     }
 
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        padding-inline: var( --INTERNAL--kendo-grid-selection-aggregates-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-grid-selection-aggregates-padding-y, 0 );
+        border-width: var( --kendo-grid-selection-aggregates-border-width, #{$kendo-grid-selection-aggregates-border-width} ) 0 0;
+        border-style: solid;
+        line-height: var( --kendo-grid-selection-aggregates-line-height, #{$kendo-grid-selection-aggregates-line-height} );
+        display: flex;
+        justify-content: flex-end;
+        gap: var( --kendo-grid-selection-aggregates-spacing, #{$kendo-grid-selection-aggregates-spacing} );
+    }
+    .k-selection-aggregates-item-value {
+        font-weight: var( --kendo-grid-selection-aggregates-font-weight, #{$kendo-grid-selection-aggregates-font-weight} );
+    }
+
+
     // Pager
     .k-grid-pager {
         border-width: 1px 0 0;
@@ -997,6 +1013,8 @@
         $_button-calc-size: map.get( $size-props, button-calc-size );
         $_button-line-height: map.get( $size-props, button-line-height );
         $_group-dropclue-height: map.get( $size-props, group-dropclue-height );
+        $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
+        $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
 
         .k-grid-#{$size} {
             --INTERNAL--kendo-grid-header-padding-x: var( --kendo-grid-header-padding-x-#{$size}, #{$_header-padding-x} );
@@ -1013,6 +1031,8 @@
             --INTERNAL--kendo-button-calc-size: var( --kendo-button-calc-size-#{$size}, #{$_button-calc-size} );
             --INTERNAL--kendo-button-line-height: var( --kendo-button-line-height-#{$size}, #{$_button-line-height} );
             --INTERNAL--kendo-grid-group-drop-hint-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
+            --INTERNAL--kendo-grid-selection-aggregates-padding-x: var( --kendo-grid-selection-aggregates-padding-x-#{$size}, #{$_selection-aggregates-padding-x} );
+            --INTERNAL--kendo-grid-selection-aggregates-padding-y: var( --kendo-grid-selection-aggregates-padding-y-#{$size}, #{$_selection-aggregates-padding-y} );
         }
     }
 

diff --git a/packages/fluent/scss/grid/_theme.scss b/packages/fluent/scss/grid/_theme.scss
@@ -276,6 +276,15 @@
         }
     }
 
+    // Selection Aggregates
+    .k-selection-aggregates {
+        @include fill(
+            var( --kendo-grid-selection-aggregates-text, #{$kendo-grid-selection-aggregates-text} ),
+            var( --kendo-grid-selection-aggregates-bg, #{$kendo-grid-selection-aggregates-bg} ),
+            var( --kendo-grid-selection-aggregates-border, #{$kendo-grid-selection-aggregates-border} )
+        );
+    }
+
     // Content
     .k-master-row {
         .k-grid-content-sticky {