Skip to content

Commit 3e13245

Browse files
TeyaVesTeyaVes
committed
feat(multiselect): add select all functionality
1 parent bd39a74 commit 3e13245

20 files changed

Lines changed: 519 additions & 12 deletions

‎packages/bootstrap/scss/list/_variables.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@ $kendo-list-md-header-padding-y: k-spacing(1) !default;
6565
/// @group list
6666
$kendo-list-lg-header-padding-y: k-spacing(2) !default;
6767

68+
/// The vertical padding of the small List sticky header.
69+
/// @group list
70+
$kendo-list-sm-sticky-header-padding-y: k-spacing(1.5) !default;
71+
/// The vertical padding of the medium List sticky header.
72+
/// @group list
73+
$kendo-list-md-sticky-header-padding-y: k-spacing(2) !default;
74+
/// The vertical padding of the large List sticky header.
75+
/// @group list
76+
$kendo-list-lg-sticky-header-padding-y: k-spacing(2.5) !default;
77+
6878
/// The border width of the List header.
6979
/// @group list
7080
$kendo-list-header-border-width: 0 0 1px !default;
@@ -296,7 +306,6 @@ $kendo-list-header-border: inherit !default;
296306
/// @group list
297307
$kendo-list-header-shadow: none !default;
298308

299-
300309
/// The background color of the List items.
301310
/// @group list
302311
$kendo-list-item-bg: null !default;
@@ -324,6 +333,10 @@ $kendo-list-item-focus-text: null !default;
324333
/// @group list
325334
$kendo-list-item-focus-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
326335

336+
/// The box shadow of the List sticky header.
337+
/// @group list
338+
$kendo-list-sticky-header-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !default;
339+
327340
/// The background color of the selected List items.
328341
/// @group list
329342
$kendo-list-item-selected-bg: k-color(primary) !default;
@@ -385,6 +398,9 @@ $kendo-list-item-description-text: k-color(subtle) !default;
385398
$kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
386399
$kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
387400
$kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
401+
$kendo-list-sm-sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y,
402+
$kendo-list-md-sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y,
403+
$kendo-list-lg-sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y,
388404
$kendo-list-header-border-width: $kendo-list-header-border-width,
389405
$kendo-list-header-font-size: $kendo-list-header-font-size,
390406
$kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
@@ -460,6 +476,7 @@ $kendo-list-item-description-text: k-color(subtle) !default;
460476
$kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
461477
$kendo-list-item-focus-text: $kendo-list-item-focus-text,
462478
$kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
479+
$kendo-list-sticky-header-shadow: $kendo-list-sticky-header-shadow,
463480
$kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
464481
$kendo-list-item-selected-text: $kendo-list-item-selected-text,
465482
$kendo-list-item-selected-hover-bg: $kendo-list-item-selected-hover-bg,

‎packages/classic/scss/list/_variables.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,16 @@ $kendo-list-md-header-padding-y: k-spacing(1) !default;
6464
/// @group list
6565
$kendo-list-lg-header-padding-y: k-spacing(1.5) !default;
6666

67+
/// The vertical padding of the small List sticky header.
68+
/// @group list
69+
$kendo-list-sm-sticky-header-padding-y: k-spacing(1.5) !default;
70+
/// The vertical padding of the medium List sticky header.
71+
/// @group list
72+
$kendo-list-md-sticky-header-padding-y: k-spacing(2) !default;
73+
/// The vertical padding of the large List sticky header.
74+
/// @group list
75+
$kendo-list-lg-sticky-header-padding-y: k-spacing(2.5) !default;
76+
6777
/// The border width of the List header.
6878
/// @group list
6979
$kendo-list-header-border-width: 0 0 1px !default;
@@ -290,7 +300,6 @@ $kendo-list-header-border: inherit !default;
290300
/// @group list
291301
$kendo-list-header-shadow: none !default;
292302

293-
294303
/// The background color of the List items.
295304
/// @group list
296305
$kendo-list-item-bg: null !default;
@@ -318,6 +327,10 @@ $kendo-list-item-focus-text: null !default;
318327
/// @group list
319328
$kendo-list-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
320329

330+
/// The box shadow of the List sticky header.
331+
/// @group list
332+
$kendo-list-sticky-header-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !default;
333+
321334
/// The background color of the selected List items.
322335
/// @group list
323336
$kendo-list-item-selected-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent ) !default;
@@ -378,6 +391,9 @@ $kendo-list-item-description-text: k-color(subtle) !default;
378391
$kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
379392
$kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
380393
$kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
394+
$kendo-list-sm-sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y,
395+
$kendo-list-md-sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y,
396+
$kendo-list-lg-sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y,
381397
$kendo-list-header-border-width: $kendo-list-header-border-width,
382398
$kendo-list-header-font-size: $kendo-list-header-font-size,
383399
$kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
@@ -453,6 +469,7 @@ $kendo-list-item-description-text: k-color(subtle) !default;
453469
$kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
454470
$kendo-list-item-focus-text: $kendo-list-item-focus-text,
455471
$kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
472+
$kendo-list-sticky-header-shadow: $kendo-list-sticky-header-shadow,
456473
$kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
457474
$kendo-list-item-selected-text: $kendo-list-item-selected-text,
458475
$kendo-list-item-selected-hover-bg: $kendo-list-item-selected-hover-bg,

‎packages/core/scss/components/list/_layout.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
$_group-label-line-height: map.get( $size-props, item-group-label-line-height );
6969
$_filter-padding-x: map.get( $size-props, filter-padding-x );
7070
$_filter-padding-y: map.get( $size-props, filter-padding-y );
71+
$_sticky-header-padding-y: map.get( $size-props, sticky-header-padding-y );
7172

7273
#{k-when-default($kendo-list-default-size, $size)}
7374
&.k-list-#{$size} {
@@ -82,6 +83,22 @@
8283
line-height: $_header-line-height;
8384
}
8485

86+
// Sticky header
87+
.k-list-sticky-header {
88+
padding-block-end: $_sticky-header-padding-y;
89+
}
90+
91+
.k-list-sticky-header + .k-list-content {
92+
padding-block-start: $_sticky-header-padding-y;
93+
}
94+
95+
.k-list-sticky-header-item {
96+
padding-block: $_item-padding-y;
97+
padding-inline: $_item-padding-x;
98+
font-size: $_item-font-size;
99+
line-height: $_item-line-height;
100+
}
101+
85102
.k-list-filter {
86103
padding-inline: $_filter-padding-x;
87104
padding-block: $_filter-padding-y;
@@ -155,6 +172,19 @@
155172
cursor: pointer;
156173
}
157174

175+
.k-list-sticky-header:has(+ .k-list-group-sticky-header) {
176+
border-block-end: 1px solid;
177+
}
178+
179+
.k-list-sticky-header-item {
180+
border-radius: $kendo-list-item-border-radius;
181+
display: flex;
182+
flex-flow: row nowrap;
183+
align-items: center;
184+
gap: $kendo-list-item-gap;
185+
cursor: pointer;
186+
}
187+
158188

159189
// List content
160190
.k-list-content {

‎packages/core/scss/components/list/_theme.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,41 @@
3131
}
3232

3333

34+
// Sticky header
35+
.k-list-sticky-header {
36+
@include fill(
37+
$kendo-list-item-text,
38+
$kendo-list-item-bg,
39+
$kendo-list-header-border,
40+
);
41+
@include box-shadow( $kendo-list-sticky-header-shadow );
42+
43+
&:has(+ .k-list-group-sticky-header) {
44+
@include box-shadow( none );
45+
border-color: $kendo-list-header-border;
46+
}
47+
}
48+
49+
.k-list-sticky-header-item {
50+
&:hover,
51+
&.k-hover {
52+
@include fill(
53+
$kendo-list-item-hover-text,
54+
$kendo-list-item-hover-bg,
55+
);
56+
}
57+
58+
&:focus-within,
59+
&.k-focus {
60+
@include fill(
61+
$kendo-list-item-focus-text,
62+
$kendo-list-item-focus-bg,
63+
);
64+
@include focus-indicator( $kendo-list-item-focus-shadow, true );
65+
}
66+
}
67+
68+
3469
// List item
3570
.k-list-item,
3671
.k-list-custom-value {

‎packages/core/scss/components/list/_variables.scss‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ $kendo-list-sm-header-padding-y: null !default;
2424
$kendo-list-md-header-padding-y: null !default;
2525
$kendo-list-lg-header-padding-y: null !default;
2626

27+
$kendo-list-sm-sticky-header-padding-y: null !default;
28+
$kendo-list-md-sticky-header-padding-y: null !default;
29+
$kendo-list-lg-sticky-header-padding-y: null !default;
30+
2731
$kendo-list-header-border-width: null !default;
2832

2933
$kendo-list-header-font-size: null !default;
@@ -128,7 +132,8 @@ $kendo-list-sizes: (
128132
item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
129133
item-group-label-line-height: $kendo-list-item-group-label-sm-line-height,
130134
filter-padding-x: $kendo-list-sm-filter-padding-x,
131-
filter-padding-y: $kendo-list-sm-filter-padding-y
135+
filter-padding-y: $kendo-list-sm-filter-padding-y,
136+
sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y
132137
),
133138
md: (
134139
font-size: $kendo-list-md-font-size,
@@ -150,7 +155,8 @@ $kendo-list-sizes: (
150155
item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
151156
item-group-label-line-height: $kendo-list-item-group-label-md-line-height,
152157
filter-padding-x: $kendo-list-md-filter-padding-x,
153-
filter-padding-y: $kendo-list-md-filter-padding-y
158+
filter-padding-y: $kendo-list-md-filter-padding-y,
159+
sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y
154160
),
155161
lg: (
156162
font-size: $kendo-list-lg-font-size,
@@ -172,7 +178,8 @@ $kendo-list-sizes: (
172178
item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
173179
item-group-label-line-height: $kendo-list-item-group-label-lg-line-height,
174180
filter-padding-x: $kendo-list-lg-filter-padding-x,
175-
filter-padding-y: $kendo-list-lg-filter-padding-y
181+
filter-padding-y: $kendo-list-lg-filter-padding-y,
182+
sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y
176183
)
177184
) !default;
178185

@@ -187,6 +194,8 @@ $kendo-list-header-text: null !default;
187194
$kendo-list-header-border: null !default;
188195
$kendo-list-header-shadow: null !default;
189196

197+
$kendo-list-sticky-header-shadow: null !default;
198+
190199

191200
$kendo-list-item-bg: null !default;
192201
$kendo-list-item-text: null !default;

‎packages/default/scss/list/_variables.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,16 @@ $kendo-list-md-header-padding-y: k-spacing(1) !default;
6464
/// @group list
6565
$kendo-list-lg-header-padding-y: k-spacing(1.5) !default;
6666

67+
/// The vertical padding of the small List sticky header.
68+
/// @group list
69+
$kendo-list-sm-sticky-header-padding-y: k-spacing(1.5) !default;
70+
/// The vertical padding of the medium List sticky header.
71+
/// @group list
72+
$kendo-list-md-sticky-header-padding-y: k-spacing(2) !default;
73+
/// The vertical padding of the large List sticky header.
74+
/// @group list
75+
$kendo-list-lg-sticky-header-padding-y: k-spacing(2.5) !default;
76+
6777
/// The border width of the List header.
6878
/// @group list
6979
$kendo-list-header-border-width: 0 0 1px !default;
@@ -291,7 +301,6 @@ $kendo-list-header-border: inherit !default;
291301
/// @group list
292302
$kendo-list-header-shadow: k-elevation(2) !default;
293303

294-
295304
/// The background color of the List items.
296305
/// @group list
297306
$kendo-list-item-bg: null !default;
@@ -319,6 +328,10 @@ $kendo-list-item-focus-text: null !default;
319328
/// @group list
320329
$kendo-list-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
321330

331+
/// The box shadow of the List sticky header.
332+
/// @group list
333+
$kendo-list-sticky-header-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !default;
334+
322335
/// The background color of the selected List items.
323336
/// @group list
324337
$kendo-list-item-selected-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent ) !default;
@@ -379,6 +392,9 @@ $kendo-list-item-description-text: k-color(subtle) !default;
379392
$kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
380393
$kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
381394
$kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
395+
$kendo-list-sm-sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y,
396+
$kendo-list-md-sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y,
397+
$kendo-list-lg-sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y,
382398
$kendo-list-header-border-width: $kendo-list-header-border-width,
383399
$kendo-list-header-font-size: $kendo-list-header-font-size,
384400
$kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
@@ -454,6 +470,7 @@ $kendo-list-item-description-text: k-color(subtle) !default;
454470
$kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
455471
$kendo-list-item-focus-text: $kendo-list-item-focus-text,
456472
$kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
473+
$kendo-list-sticky-header-shadow: $kendo-list-sticky-header-shadow,
457474
$kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
458475
$kendo-list-item-selected-text: $kendo-list-item-selected-text,
459476
$kendo-list-item-selected-hover-bg: $kendo-list-item-selected-hover-bg,

‎packages/fluent/scss/list/_variables.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,16 @@ $kendo-list-md-header-padding-y: var( --kendo-list-md-header-padding-y, #{k-spac
5757
/// @group list
5858
$kendo-list-lg-header-padding-y: var( --kendo-list-lg-header-padding-y, #{k-spacing(2.5)} ) !default;
5959

60+
/// The vertical padding of the small List sticky header.
61+
/// @group list
62+
$kendo-list-sm-sticky-header-padding-y: var( --kendo-list-sm-sticky-header-padding-y, #{k-spacing(0.5)} ) !default;
63+
/// The vertical padding of the medium List sticky header.
64+
/// @group list
65+
$kendo-list-md-sticky-header-padding-y: var( --kendo-list-md-sticky-header-padding-y, #{k-spacing(1)} ) !default;
66+
/// The vertical padding of the large List sticky header.
67+
/// @group list
68+
$kendo-list-lg-sticky-header-padding-y: var( --kendo-list-lg-sticky-header-padding-y, #{k-spacing(1.5)} ) !default;
69+
6070
/// The border width of the List header.
6171
/// @group list
6272
$kendo-list-header-border-width: var( --kendo-list-header-border-width, 0 ) !default;
@@ -262,7 +272,6 @@ $kendo-list-header-border: var( --kendo-list-header-border, inherit ) !default;
262272
/// @group list
263273
$kendo-list-header-shadow: var( --kendo-list-header-shadow, null ) !default;
264274

265-
266275
/// The background color of the List items.
267276
/// @group list
268277
$kendo-list-item-bg: var( --kendo-list-item-bg, #{k-color(surface-alt)} ) !default;
@@ -287,6 +296,10 @@ $kendo-list-item-focus-text: var( --kendo-list-item-focus-text, #{k-color(on-app
287296
/// @group list
288297
$kendo-list-item-focus-shadow: var( --kendo-list-item-focus-shadow, inset 0 0 0 2px #{k-color(border-alt)} ) !default;
289298

299+
/// The box shadow of the List sticky header.
300+
/// @group list
301+
$kendo-list-sticky-header-shadow: var( --kendo-list-sticky-header-shadow, #{0 2px 4px 0 rgba(0, 0, 0, 0.08)} ) !default;
302+
290303
/// The background color of the selected List items.
291304
/// @group list
292305
$kendo-list-item-selected-bg: var( --kendo-list-item-selected-bg, #{color-mix(in srgb, k-color(on-app-surface) 12%, transparent)} ) !default;
@@ -355,6 +368,9 @@ $kendo-list-item-description-text: var( --kendo-list-item-description-text, #{k-
355368
$kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
356369
$kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
357370
$kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
371+
$kendo-list-sm-sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y,
372+
$kendo-list-md-sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y,
373+
$kendo-list-lg-sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y,
358374
$kendo-list-header-border-width: $kendo-list-header-border-width,
359375
$kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
360376
$kendo-list-md-header-font-size: $kendo-list-md-header-font-size,
@@ -421,6 +437,7 @@ $kendo-list-item-description-text: var( --kendo-list-item-description-text, #{k-
421437
$kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
422438
$kendo-list-item-focus-text: $kendo-list-item-focus-text,
423439
$kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
440+
$kendo-list-sticky-header-shadow: $kendo-list-sticky-header-shadow,
424441
$kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
425442
$kendo-list-item-selected-text: $kendo-list-item-selected-text,
426443
$kendo-list-item-selected-hover-bg: $kendo-list-item-selected-hover-bg,

‎packages/html/src/list/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export * from './list-item.spec';
44
export * from './list-content';
55
export * from './list-ul';
66
export * from './list-header';
7+
export * from './list-select-all';
78
export * from './list-group';
89
export * from './list-group-item';
910
export * from './list-option-label';

0 commit comments

Comments
 (0)