Skip to content

Commit 87feb27

Browse files
ddinchevaddincheva
authored
Merge branch '11.1.x' into clear-active-node-summary-11.1.x
2 parents 1909824 + fb6640b commit 87feb27

23 files changed

+136
-160
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -752,6 +752,10 @@
752752
color: inherit;
753753
}
754754
}
755+
756+
> [aria-activedescendant] {
757+
outline-style: none;
758+
}
755759
}
756760

757761
%grid-thead {
@@ -1771,6 +1775,7 @@
17711775
display: flex;
17721776
overflow: hidden;
17731777
background: --var($theme, 'root-summaries-background');
1778+
outline-style: none;
17741779

17751780
%igx-grid-summary__result {
17761781
color: --var($theme, 'root-summaries-text-color');

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -65,21 +65,13 @@
6565
@extend %igx-list__item-line-subtitle !optional;
6666
}
6767

68-
@include e(empty) {
68+
@include m(empty) {
6969
@extend %igx-list !optional;
70-
@extend %igx-list-empty !optional;
70+
@extend %igx-list--empty !optional;
7171

72-
@include b(image) {
73-
@extend %igx-list-empty-image !optional;
72+
@include e(message) {
73+
@extend %igx-list__message--empty !optional;
7474
}
75-
76-
@include b(message) {
77-
@extend %igx-list-empty-message !optional;
78-
}
79-
}
80-
81-
@include e(empty, $m: custom) {
82-
@extend %igx-list-empty !optional;
8375
}
8476

8577
@include m(compact) {
@@ -93,12 +85,6 @@
9385
@extend %igx-list__item-actions--compact !optional;
9486
}
9587

96-
@include e(empty) {
97-
@include b(message) {
98-
@extend %igx-list-empty-message--compact !optional;
99-
}
100-
}
101-
10288
@include e(item-content) {
10389
@extend %igx-list-item-content--compact !optional;
10490
}
@@ -119,12 +105,6 @@
119105
@extend %igx-list__item-actions--cosy !optional;
120106
}
121107

122-
@include e(empty) {
123-
@include b(message) {
124-
@extend %igx-list-empty-message--cosy !optional;
125-
}
126-
}
127-
128108
@include e(item-content) {
129109
@extend %igx-list-item-content--cosy !optional;
130110
}

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -306,31 +306,18 @@
306306
}
307307
}
308308

309-
%igx-list-empty {
309+
%igx-list--empty {
310310
justify-content: center;
311311
align-items: center;
312312
}
313313

314-
%igx-list-empty-image {
315-
width: auto;
316-
max-height: 120px;
317-
}
318-
319-
%igx-list-empty-message {
314+
%igx-list__message--empty {
320315
text-align: center;
321316
color: --var($theme, 'item-text-color');
322317
padding: map-get($list-empty-padding, 'comfortable');
323318
z-index: 1;
324319
}
325320

326-
%igx-list-empty-message--cosy {
327-
padding: map-get($list-empty-padding, 'cosy');
328-
}
329-
330-
%igx-list-empty-message--compact {
331-
padding: map-get($list-empty-padding, 'compact');
332-
}
333-
334321
%igx-list-header {
335322
display: flex;
336323
align-items: center;
@@ -375,15 +362,15 @@
375362
%igx-list__item-actions {
376363
color: --var($theme, 'item-action-color-hover');
377364

378-
%igx-icon-display {
365+
igx-icon {
379366
color: --var($theme, 'item-action-color-hover')
380367
}
381368
}
382369

383370
%igx-list__item-thumbnail {
384371
color: --var($theme, 'item-thumbnail-color-hover');
385372

386-
%igx-icon-display {
373+
igx-icon {
387374
color: --var($theme, 'item-thumbnail-color-hover')
388375
}
389376
}
@@ -431,7 +418,7 @@
431418
display: none;
432419
}
433420

434-
%igx-icon-display {
421+
igx-icon {
435422
color: --var($theme, 'item-action-color')
436423
}
437424
}
@@ -462,7 +449,7 @@
462449
padding: 0;
463450
color: --var($theme, 'item-thumbnail-color');
464451

465-
> %igx-icon-display {
452+
> igx-icon {
466453
@include if-ltr() {
467454
margin: map-get($list-icon-margin, 'comfortable');
468455
}
@@ -472,8 +459,8 @@
472459
}
473460
}
474461

475-
> %igx-avatar-display {
476-
> %igx-icon-display {
462+
> igx-avatar {
463+
> igx-icon {
477464
margin: 0;
478465
}
479466
}
@@ -515,27 +502,27 @@
515502

516503
%igx-list__item-thumbnail--cosy {
517504
@include if-ltr() {
518-
> %igx-icon-display {
505+
> igx-icon {
519506
margin: map-get($list-icon-margin, 'cosy');
520507
}
521508
}
522509

523510
@include if-rtl() {
524-
> %igx-icon-display {
511+
> igx-icon {
525512
margin: map-get($list-icon-margin-rtl, 'cosy');
526513
}
527514
}
528515
}
529516

530517
%igx-list__item-thumbnail--compact {
531518
@include if-ltr() {
532-
> %igx-icon-display {
519+
> igx-icon {
533520
margin: map-get($list-icon-margin, 'compact');
534521
}
535522
}
536523

537524
@include if-rtl() {
538-
> %igx-icon-display {
525+
> igx-icon {
539526
margin: map-get($list-icon-margin-rtl, 'compact');
540527
}
541528
}
@@ -569,15 +556,15 @@
569556
%igx-list__item-actions {
570557
color: --var($theme, 'item-action-color-active');
571558

572-
%igx-icon-display {
559+
igx-icon {
573560
color: --var($theme, 'item-action-color-active')
574561
}
575562
}
576563

577564
%igx-list__item-thumbnail {
578565
color: --var($theme, 'item-thumbnail-color-active');
579566

580-
%igx-icon-display {
567+
igx-icon {
581568
color: --var($theme, 'item-thumbnail-color-active')
582569
}
583570
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2251,11 +2251,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
22512251

22522252
public get activeDescendant() {
22532253
const activeElem = this.navigation.activeNode;
2254-
if (activeElem) {
2255-
return !this.navigation.isDataRow(activeElem.row, true) ? this.id + '_' + activeElem.row :
2256-
this.id + '_' + activeElem.row + '_' + activeElem.column;
2254+
2255+
if (!activeElem || !Object.keys(activeElem).length) {
2256+
return this.id;
22572257
}
2258-
return null;
2258+
2259+
return activeElem.row < 0 ?
2260+
`${this.id}_${activeElem.row}_${activeElem.mchCache.level}_${activeElem.column}` :
2261+
`${this.id}_${activeElem.row}_${activeElem.column}`;
22592262
}
22602263

22612264
/**

‎projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,7 +669,7 @@ describe('Column Hiding UI #grid', () => {
669669
const toolbar = GridFunctions.getToolbar(fix);
670670
const gridHeader = GridFunctions.getGridHeader(fix);
671671
const gridScroll = GridFunctions.getGridScroll(fix);
672-
const gridFooter = GridFunctions.getGridFooter(fix);
672+
const gridFooter = GridFunctions.getGridFooterWrapper(fix);
673673
let expectedHeight = parseInt(window.getComputedStyle(grid.nativeElement).height, 10)
674674
- parseInt(window.getComputedStyle(toolbar.nativeElement).height, 10)
675675
- parseInt(window.getComputedStyle(gridHeader.nativeElement).height, 10)

‎projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ describe('IgxGrid - Summaries #grid', () => {
6767

6868
it('should enableSummaries through grid API ', () => {
6969
expect(grid.hasSummarizedColumns).toBe(false);
70-
let tFoot = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
70+
let tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
7171
expect(tFoot < grid.defaultSummaryHeight).toBe(true);
7272

7373
grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ProductID' }]);
@@ -84,7 +84,7 @@ describe('IgxGrid - Summaries #grid', () => {
8484
expect(grid.getColumnByName('ProductName').hasSummary).toBe(true);
8585
expect(grid.getColumnByName('OrderDate').hasSummary).toBe(false);
8686

87-
tFoot = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
87+
tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
8888
expect(tFoot).toEqual(grid.defaultSummaryHeight);
8989
});
9090

@@ -95,7 +95,7 @@ describe('IgxGrid - Summaries #grid', () => {
9595
grid.getColumnByName('UnitsInStock').hasSummary = true;
9696
fixture.detectChanges();
9797

98-
const tFoot = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
98+
const tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
9999
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
100100
expect(GridSummaryFunctions.getRootSummaryRow(fixture)).toBeDefined();
101101
});
@@ -170,7 +170,7 @@ describe('IgxGrid - Summaries #grid', () => {
170170
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Test 1', 'Test 2'], ['10', '50', '150']);
171171
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Count', 'Test 3'], ['10', '850']);
172172

173-
const tFootHeight = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
173+
const tFootHeight = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
174174
expect(tFootHeight).toBeGreaterThanOrEqual(3 * grid.defaultSummaryHeight);
175175
});
176176

@@ -610,14 +610,14 @@ describe('IgxGrid - Summaries #grid', () => {
610610
}));
611611

612612
it('Hiding: should recalculate summary area after column with enabled summary is hidden', fakeAsync(() => {
613-
let tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
613+
let tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
614614
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
615615

616616
grid.getColumnByName('UnitsInStock').hidden = true;
617617
tick();
618618
fix.detectChanges();
619619

620-
tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
620+
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
621621
expect(tFoot).toEqual(3 * grid.defaultSummaryHeight);
622622
expect(grid.hasSummarizedColumns).toBe(true);
623623

@@ -633,7 +633,7 @@ describe('IgxGrid - Summaries #grid', () => {
633633
fix.detectChanges();
634634

635635
expect(grid.hasSummarizedColumns).toBe(true);
636-
tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
636+
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
637637
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
638638
summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
639639
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []);
@@ -760,7 +760,7 @@ describe('IgxGrid - Summaries #grid', () => {
760760
fix.detectChanges();
761761
grid = fix.componentInstance.grid;
762762
setupGridScrollDetection(fix, grid);
763-
grid.width = '400px';
763+
grid.width = '800px';
764764
grid.height = '800px';
765765
fix.detectChanges();
766766
tick(100);

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@
2525
</igx-chips-area>
2626
</div>
2727

28-
<div class="igx-grid__thead">
29-
<div class="igx-grid__thead-wrapper" (keydown.meta.c)="copyHandler($event)" (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="rowgroup" (focus)="navigation.focusFirstCell()"
30-
[style.width.px]='calcWidth' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
31-
<div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
28+
<div class="igx-grid__thead" role="rowgroup">
29+
<div class="igx-grid__thead-wrapper" (keydown.meta.c)="copyHandler($event)" (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)"
30+
[class.igx-grid__tr--mrl]='hasColumnLayouts' (focus)="navigation.focusFirstCell()" [attr.aria-activedescendant]="activeDescendant"
31+
[style.width.px]='calcWidth' tabindex="0" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
32+
<div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
3233
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
3334
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
3435
class="igx-grid__scroll-on-drag-left" [style.left.px]="pinnedWidth"></span>
@@ -94,11 +95,11 @@
9495
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
9596
</div>
9697

97-
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
98-
<div class="igx-grid__tbody-content" tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
99-
role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
98+
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
99+
<div class="igx-grid__tbody-content" tabindex="0" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
100+
(onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
100101
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
101-
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody>
102+
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
102103
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
103104
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
104105
class="igx-grid__scroll-on-drag-left"></span>
@@ -167,7 +168,7 @@
167168
</igx-grid-groupby-row>
168169
</ng-template>
169170
<ng-template #summary_template let-rowIndex="index" let-rowData>
170-
<igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
171+
<igx-grid-summary-row role="row" [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
171172
class="igx-grid__summaries--body" #summaryRow>
172173
</igx-grid-summary-row>
173174
</ng-template>
@@ -213,15 +214,16 @@
213214
</div>
214215

215216

216-
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant"
217-
(focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
218-
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
219-
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
220-
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
221-
class="igx-grid__summaries" #summaryRow>
222-
</igx-grid-summary-row>
223-
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
224-
[style.width.px]="scrollSize"></div>
217+
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
218+
<div tabindex="0" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
219+
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
220+
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
221+
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
222+
class="igx-grid__summaries" #summaryRow>
223+
</igx-grid-summary-row>
224+
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
225+
[style.width.px]="scrollSize"></div>
226+
</div>
225227
</div>
226228

227229
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,12 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
165165
@ViewChild('groupArea')
166166
public groupArea: ElementRef;
167167

168+
/**
169+
* @hidden @internal
170+
*/
171+
@HostBinding('attr.role')
172+
public role = 'grid';
173+
168174
/**
169175
* Gets/Sets the value of the `id` attribute.
170176
*

‎projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2344,7 +2344,8 @@ describe('IgxGrid - GroupBy #grid', () => {
23442344
fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false
23452345
});
23462346
fix.detectChanges();
2347-
UIInteractions.simulateMouseEvent('click', fix.nativeElement.querySelector('igx-grid-header[id$="_ProductName"]'), 0, 0);
2347+
const productNameCol = fix.nativeElement.querySelector('igx-grid-header-group[id$="_-1_0_2"]');
2348+
UIInteractions.simulateMouseEvent('click', productNameCol,0, 0);
23482349
tick();
23492350
fix.detectChanges();
23502351
const chips = fix.nativeElement.querySelectorAll('igx-chip');

0 commit comments

Comments
 (0)