Merge branch '9.0.x' into hPopov/refactor-hGrid-selection-tests-90x

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 9.0.9
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - The `title` attribute of the columns and the column groups is now used as `title` for the header text.
+
 ## 9.0.1
 - **Breaking Changes** 
     - Remove `$base-color` from igx-typography. The igx-typography class now inherits the parent color.

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tooltip.scss

@@ -46,7 +46,10 @@ $_fluent-tooltip: extend(
     $_fluent-shape-tooltip,
     (
         background: (
-            igx-color: 'surface'
+            igx-color: ('grays', 900)
+        ),
+        text-color: (
+            igx-contrast-color: ('grays', 900)
         )
     )
 );

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -10,6 +10,7 @@ import {
     TemplateRef,
     Output,
     EventEmitter,
+    ElementRef,
 } from '@angular/core';
 import { notifyChanges } from '../watch-changes';
 import { WatchColumnChanges } from '../watch-changes';
@@ -1238,7 +1239,7 @@ export class IgxColumnComponent implements AfterContentInit {
     protected collapseIndicatorTemplate:  IgxCollapsibleIndicatorTemplateDirective;
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef,
-        public rowIslandAPI: IgxRowIslandAPIService) { }
+        public rowIslandAPI: IgxRowIslandAPIService, public elementRef: ElementRef) { }
 
     /**
      * @hidden

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

@@ -1569,6 +1569,23 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         expect(grid.columnList.length).toEqual(10);
     });
+
+    it('should set title attribute on column group header spans', () => {
+        const fixture = TestBed.createComponent(ColumnGroupTestComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.grid;
+        const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+        generalGroup.elementRef.nativeElement.title = 'General Information Title';
+        fixture.detectChanges();
+
+        const headers = fixture.debugElement.queryAll(By.css('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
+        const generalHeader = headers.find(h => h.nativeElement.textContent === 'General Information');
+        const addressHeader = headers.find(h => h.nativeElement.textContent === 'Address Information');
+
+        expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
+        expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
+    });
 });
 
 @Component({

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

@@ -375,6 +375,29 @@ describe('IgxGrid - Column properties #grid', () => {
         const row = grid.getRowByIndex(0);
         row.cells.forEach(cell => expect(cell.nativeElement.getAttribute('style')).toMatch('background: black'));
     });
+
+    it('should set title attribute on column header spans', () => {
+        const fix = TestBed.createComponent(ColumnsFromIterableComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.instance;
+        const idColumn = grid.getColumnByName('ID');
+        const nameColumn = grid.getColumnByName('Name');
+
+        idColumn.header = 'ID Header';
+        idColumn.elementRef.nativeElement.title = 'ID Title';
+        nameColumn.header = 'Name Header';
+        fix.detectChanges();
+
+        const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+        const idHeader = headers[0].nativeElement;
+        const nameHeader = headers[1].nativeElement;
+        expect(idHeader.textContent).toBe('ID Header');
+        expect(idHeader.firstElementChild.firstElementChild.title).toBe('ID Title');
+        expect(nameHeader.textContent).toBe('Name Header');
+        expect(nameHeader.firstElementChild.firstElementChild.title).toBe('Name Header');
+    });
+
 });
 
 @Component({

projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts

@@ -1136,7 +1136,7 @@ describe('IgxGrid - Row Editing #grid', () => {
             tick(16);
 
             const cell = grid.getCellByColumn(0, 'ProductName');
-            const select = fix.debugElement.query(By.css('igx-select')).nativeElement;
+            const select = GridFunctions.getGridPageSelectElement(fix);
 
             cell.setEditMode(true);
             // cell.update('IG');
@@ -1168,7 +1168,7 @@ describe('IgxGrid - Row Editing #grid', () => {
 
                 const gridElement: HTMLElement = grid.nativeElement;
                 let cell = grid.getCellByColumn(3, 'ProductName');
-                const select = fix.debugElement.query(By.css('igx-select')).nativeElement;
+                const select =  GridFunctions.getGridPageSelectElement(fix);
 
                 cell.setEditMode(true);
                 tick(16);