Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into nrobakova/refactor-re-tests

Author: nrobakova

CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes for each version of this project will be documented in this
 
 ## 8.2.0
 
+### New theme
+Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.  
+Depending on your use case you can use one of the following mixins:  
+`igx-fluent-theme` and `igx-fluent-dark-theme`  
+  
+We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
+
+Next example shows how you can use the Fluent theme.
+
+```scss
+// Light version
+.fluent-word-theme {
+    @include igx-fluent-theme($fluent-word-palette);
+}
+
+// Dark version
+.fluent-excel-dark-theme {
+    @include igx-fluent-dark-theme($fluent-excel-palette);
+}
+```
+
+For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)  
+
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
@@ -102,28 +125,6 @@ All notable changes for each version of this project will be documented in this
 ## 8.1.0
 
 ### New Features
-
-##### New theme
-Ignite UI for angular now have a new theme that mimics the Microsoft Fluent design as much as possible.  
-In order to use the theme you have to use one of the following mixins:  
-  `igx-fluent-theme` and `igx-fluent-dark-theme`  
-  
-We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.  
-  
-This is an example of how you can use the new theme.
-
-```scss
-// Light version
-.fluent-word-theme {
-    @include igx-fluent-theme($fluent-word-palette);
-}
-
-// Dark version
-.fluent-excel-dark-theme {
-    @include igx-fluent-dark-theme($fluent-excel-palette);
-}
-```
-
 - `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
     - You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
     - You are allowed to customize tab items with labels, icons and even templates.

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

@@ -603,7 +603,7 @@
         overflow: hidden;
         box-shadow: $grid-shadow;
         outline-style: none;
-        z-index: 0;
+        z-index: 1;
         border: $grid-border-width solid --var($theme, 'grid-border-color');
 
         %cbx-display {

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

@@ -1036,7 +1036,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      *  Emitted when `IgxGridRowComponent` is selected.
      * ```html
-     * <igx-grid #grid (onRowSelectionChange)="onRowClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid (onRowSelectionChange)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
      * ```
      * ```typescript
      * public onCellClickChange(e){

projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import { GridBaseAPIService } from '.././api.service';
 import { IgxRowIslandComponent } from './row-island.component';
-import { IgxGridComponent } from '../grid';
+import { IgxGridComponent } from '../grid/grid.component';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IgxChipsModule } from '../../chips/chips.module';
-import { IgxGridCommonModule } from '../grid-common.module';
 import { IgxGridModule } from '../grid/grid.module';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
@@ -13,7 +12,7 @@ import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component'
 import { IgxHierarchicalSelectionAPIService } from './selection';
 import { IgxRowIslandAPIService } from './row-island-api.service';
 import { IgxSelectModule } from '../../select/index';
-import { IgxGridComponent } from '../grid';
+import { IgxGridComponent } from '../grid/grid.component';
 
 /**
  * @hidden

src/app/grid-auto-size/grid-auto-size.sample.html

@@ -32,8 +32,7 @@
                 [filterMode]="'excelStyleFilter'"
                 [paging]="false"
                 [width]="'800px'"
-                [height]="height"
-                [style.zIndex]="'1'">
+                [height]="height">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
                                                     [movable]="c.movable"

src/app/grid-column-moving/grid-column-moving.sample.html

@@ -21,8 +21,7 @@
                 [filterMode]="'excelStyleFilter'"
                 [paging]="false"
                 [width]="'900px'"
-                [height]="'800px'"
-                [style.zIndex]="'1'">
+                [height]="'800px'">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
                                                     [movable]="c.movable"

src/app/grid-filter-template/grid-filter-template.sample.html

@@ -12,8 +12,7 @@
                 [rowSelectable]="true"
                 [paging]="false"
                 [width]="'900px'"
-                [height]="'800px'"
-                [style.zIndex]="'1'">
+                [height]="'800px'">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
                                                     [movable]="c.movable"

src/app/tree-grid/tree-grid.sample.html

@@ -16,7 +16,7 @@
                     rowSelectable="true" [paging]="false" [displayDensity]="density" [width]="'900px'" [height]="'500px'"
                     [showToolbar]="true" [columnHiding]="true" [columnPinning]="true" [exportExcel]="true" [exportCsv]="true"
                     exportText="Export" exportExcelText="Export to Excel" exportCsvText="Export to CSV" [allowFiltering]="true"
-                    [filterMode]="'excelStyleFilter'" [style.zIndex]="'1'">
+                    [filterMode]="'excelStyleFilter'">
                     <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [pinned]="c.pinned"
                         [movable]="c.movable" [groupable]="false" [resizable]="c.resizable" [width]="c.width"
                         [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" [hasSummary]="c.summary"