Skip to content

Commit 0fa473d

Browse files
authored
Merge branch 'master' into simeonoff/bump-typedoc
2 parents a756de2 + 49b8f00 commit 0fa473d

File tree

4 files changed

+98
-49
lines changed

4 files changed

+98
-49
lines changed

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss

Lines changed: 57 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,22 @@
1414
@extend %cbx-display !optional;
1515

1616
&:hover {
17+
@include e(label) {
18+
@extend %cbx-label--hover !optional;
19+
}
20+
21+
@include e(label, $m: before) {
22+
@extend %cbx-label--hover !optional;
23+
}
24+
1725
@include e(ripple) {
1826
@extend %cbx-ripple--hover !optional;
1927
}
2028

29+
@include e(composite) {
30+
@extend %cbx-composite--hover !optional;
31+
}
32+
2133
@include e(composite-mark) {
2234
@extend %cbx-composite-mark--fluent !optional;
2335
}
@@ -60,30 +72,10 @@
6072
@extend %cbx-ripple !optional;
6173
}
6274

63-
@include m(bootstrap) {
64-
@include e(composite) {
65-
&:hover {
66-
@extend %cbx-composite--hover !optional;
67-
}
68-
}
69-
}
70-
7175
@include m(indigo) {
72-
@include e(composite) {
73-
&:hover {
74-
@extend %cbx-composite--hover !optional;
75-
}
76-
}
77-
7876
@include e(composite-mark) {
7977
@extend %cbx-composite-mark-indigo !optional;
8078
}
81-
82-
@include e(label) {
83-
&:hover {
84-
@extend %cbx-label--hover !optional;
85-
}
86-
}
8779
}
8880

8981
@include m(invalid) {
@@ -99,6 +91,10 @@
9991
@extend %cbx-label--invalid !optional;
10092
}
10193

94+
@include e(label, $m: before) {
95+
@extend %cbx-label--invalid !optional;
96+
}
97+
10298
&:hover {
10399
@include e(ripple) {
104100
@extend %cbx-ripple--hover !optional;
@@ -112,6 +108,14 @@
112108
@include e(composite-mark) {
113109
@extend %cbx-composite-mark--invalid--fluent !optional;
114110
}
111+
112+
@include e(label) {
113+
@extend %cbx-label--invalid !optional;
114+
}
115+
116+
@include e(label, $m: before) {
117+
@extend %cbx-label--invalid !optional;
118+
}
115119
}
116120

117121
&:active {
@@ -183,6 +187,12 @@
183187
@include e(ripple) {
184188
@extend %cbx-ripple--focused-invalid !optional;
185189
}
190+
191+
&:hover {
192+
@include e(ripple) {
193+
@extend %cbx-ripple--hover-invalid !optional;
194+
}
195+
}
186196
}
187197

188198
@include mx(indigo, focused, invalid) {
@@ -239,19 +249,29 @@
239249
@include e(composite) {
240250
@extend %cbx-composite--x--hover !optional;
241251
}
252+
253+
@include e(composite-mark) {
254+
@extend %cbx-composite-mark--in--fluent !optional;
255+
}
242256
}
243257
}
244258

245259
@include mx(material, disabled, indeterminate) {
246-
@extend %igx-checkbox--disabled-indeterminate-material !optional;
260+
@extend %igx-checkbox--disabled-indeterminate !optional;
261+
}
262+
263+
@include mx(bootstrap, disabled, indeterminate) {
264+
@extend %igx-checkbox--disabled-indeterminate !optional;
247265
}
248266

249267
@include mx(fluent, disabled, indeterminate) {
250268
@extend %igx-checkbox--disabled-indeterminate-fluent !optional;
251269
}
252270

253271
@include mx(indigo, disabled, indeterminate) {
254-
@extend %igx-checkbox--disabled-indeterminate-indigo !optional;
272+
@include e(composite) {
273+
@extend %igx-checkbox--disabled-indeterminate-indigo !optional;
274+
}
255275
}
256276

257277
@include mx(indigo, focused, indeterminate) {
@@ -324,6 +344,21 @@
324344
@extend %cbx-ripple--focused !optional;
325345
@extend %cbx-ripple--focused-checked !optional;
326346
}
347+
348+
&:hover {
349+
@include e(ripple) {
350+
@extend %cbx-ripple--focused !optional;
351+
@extend %cbx-ripple--focused--hover-checked !optional;
352+
}
353+
}
354+
}
355+
356+
@include mx(focused, invalid, checked) {
357+
&:hover {
358+
@include e(ripple) {
359+
@extend %cbx-ripple--hover-invalid !optional;
360+
}
361+
}
327362
}
328363

329364
@include mx(focused, indeterminate) {

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,9 @@
122122
}
123123

124124
%cbx-composite--hover {
125-
border-color: var-get($theme, 'empty-color-hover');
125+
@if $variant == 'bootstrap' or $variant == 'indigo' {
126+
border-color: var-get($theme, 'empty-color-hover');
127+
}
126128
}
127129

128130
%cbx-composite--x {
@@ -175,6 +177,7 @@
175177
%cbx-composite--x--disabled {
176178
@if $variant == 'material' or $variant == 'fluent' {
177179
background: var-get($theme, 'disabled-color');
180+
border-color: var-get($theme, 'disabled-color');
178181
}
179182

180183
@if $variant == 'indigo' or $variant == 'bootstrap' {
@@ -262,7 +265,7 @@
262265
}
263266

264267
%igx-checkbox--disabled-indeterminate-indigo {
265-
@extend %igx-checkbox--indeterminate-indigo;
268+
@extend %cbx-composite--x--disabled;
266269

267270
%cbx-composite-mark {
268271
rect {
@@ -291,6 +294,14 @@
291294
z-index: 1;
292295
}
293296
}
297+
298+
&:hover {
299+
%cbx-composite {
300+
&::before {
301+
background: var-get($theme, 'fill-color-hover');
302+
}
303+
}
304+
}
294305
}
295306

296307
%igx-checkbox--disabled-indeterminate-fluent {
@@ -299,15 +310,15 @@
299310
}
300311

301312
%cbx-composite--x--disabled {
302-
background: transparent;
313+
border-color: var-get($theme, 'disabled-color');
303314

304315
&::before {
305316
background: var-get($theme, 'disabled-color');
306317
}
307318
}
308319
}
309320

310-
%igx-checkbox--disabled-indeterminate-material {
321+
%igx-checkbox--disabled-indeterminate {
311322
%cbx-composite--x--disabled {
312323
border-color: var-get($theme, 'disabled-indeterminate-color');
313324
background: var-get($theme, 'disabled-indeterminate-color');
@@ -458,11 +469,11 @@
458469
}
459470

460471
%cbx-ripple--hover-checked {
461-
background: var-get($theme, 'fill-color');
472+
background: var-get($theme, 'fill-color-hover');
462473
}
463474

464475
%cbx-ripple--hover-invalid {
465-
background: var-get($theme, 'error-color');
476+
background: var-get($theme, 'error-color-hover');
466477
}
467478

468479
%igx-checkbox--focused-indigo {
@@ -544,6 +555,10 @@
544555
background: var-get($theme, 'fill-color');
545556
}
546557

558+
%cbx-ripple--focused--hover-checked {
559+
background: var-get($theme, 'fill-color-hover');
560+
}
561+
547562
%cbx-ripple--focused-invalid {
548563
background: var-get($theme, 'error-color');
549564
}

projects/igniteui-angular/src/lib/directives/button/button-base.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
Output,
99
booleanAttribute,
1010
inject,
11-
afterRenderEffect,
11+
AfterViewInit,
1212
} from '@angular/core';
1313
import { PlatformUtil } from '../../core/utils';
1414

@@ -20,8 +20,9 @@ export const IgxBaseButtonType = {
2020

2121

2222
@Directive()
23-
export abstract class IgxButtonBaseDirective {
23+
export abstract class IgxButtonBaseDirective implements AfterViewInit{
2424
private _platformUtil = inject(PlatformUtil);
25+
private _viewInit = false;
2526

2627
/**
2728
* Emitted when the button is clicked.
@@ -101,15 +102,16 @@ export abstract class IgxButtonBaseDirective {
101102
// In SSR there is no paint, so there’s no visual rendering or transitions to suppress.
102103
// Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
103104
if (this._platformUtil.isBrowser) {
104-
afterRenderEffect({
105-
write: () => {
106-
this.element.nativeElement.style.setProperty('--_init-transition', '0s');
107-
},
108-
read: () => {
109-
requestAnimationFrame(() => {
110-
this.element.nativeElement.style.removeProperty('--_init-transition');
111-
});
112-
}
105+
this.element.nativeElement.style.setProperty('--_init-transition', '0s');
106+
}
107+
}
108+
109+
public ngAfterViewInit(): void {
110+
if (this._platformUtil.isBrowser && !this._viewInit) {
111+
this._viewInit = true;
112+
113+
requestAnimationFrame(() => {
114+
this.element.nativeElement.style.removeProperty('--_init-transition');
113115
});
114116
}
115117
}

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6580,27 +6580,24 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
65806580

65816581
// Scroll the search list to the bottom.
65826582
let scrollbar = GridFunctions.getExcelStyleSearchComponentScrollbar(fix);
6583+
expect(scrollbar.scrollTop).toBe(0);
6584+
let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
6585+
expect(listItems[0].innerText).toBe('Select All');
6586+
65836587
scrollbar.scrollTop = 3000;
65846588
await wait();
65856589
fix.detectChanges();
6590+
expect(listItems[0].innerText).not.toBe('Select All');
6591+
expect(scrollbar.scrollTop).toBeGreaterThan(300);
65866592

65876593
// Select another column
65886594
GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
65896595
await wait();
65906596
fix.detectChanges();
65916597

65926598
// Update scrollbar
6593-
const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
65946599
scrollbar = GridFunctions.getExcelStyleSearchComponentScrollbar(fix);
6595-
await wait();
6596-
fix.detectChanges();
6597-
6598-
// Get the display container and its parent and verify that the display container is at start
6599-
const displayContainer = searchComponent.querySelector('igx-display-container');
6600-
const displayContainerRect = displayContainer.getBoundingClientRect();
6601-
const parentContainerRect = displayContainer.parentElement.getBoundingClientRect();
6602-
6603-
expect(displayContainerRect.top - parentContainerRect.top <= 1).toBe(true, 'search scrollbar did not reset');
6600+
expect(scrollbar.scrollTop).toBe(0, 'search scrollbar did not reset');
66046601
});
66056602
});
66066603

0 commit comments

Comments
 (0)