Merge branch '15.0.x' into vkombov/fix-12391-15.0.x

Author: viktorkombov

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -258,9 +258,9 @@
     $button-icon-padding: 0;
 
     $button-padding-material: (
-        comfortable: rem(9px, 16px) rem(16px, 16px),
-        cosy: rem(6px, 16px) rem(16px, 16px),
-        compact: rem(3px, 16px) rem(16px, 16px)
+        comfortable: rem(7px, 16px) rem(16px, 16px),
+        cosy: rem(4px, 16px) rem(16px, 16px),
+        compact: rem(1px, 16px) rem(16px, 16px)
     );
 
     $outlined-button-padding-material: (

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

@@ -121,6 +121,8 @@
     );
 
     %igx-grid-toolbar {
+        position: absolute;
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -136,7 +138,6 @@
         background: var-get($theme, 'background-color');
         height: auto;
         min-height: map.get($grid-toolbar-height, 'comfortable');
-        position: relative;
         padding-block: 0;
         padding-inline: map.get($grid-toolbar-padding, 'comfortable');
 
@@ -164,15 +165,24 @@
                 }
             }
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'comfortable');
+        }
     }
 
+
     %igx-grid-toolbar--cosy {
         min-height: map.get($grid-toolbar-height, 'cosy');
         padding-inline: map.get($grid-toolbar-padding, 'cosy');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'cosy');
+        }
     }
 
     %igx-grid-toolbar--compact {
@@ -182,6 +192,10 @@
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'compact');
         }
+
+        + igx-grid-header-row {
+            margin-top: map.get($grid-toolbar-height, 'compact');
+        }
     }
 
     %igx-grid-toolbar__title {

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -77,7 +77,7 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $label-margin: rem(8px);
+    $label-margin: rem(6px);
 
     $variant: map.get($theme, variant);
     $bootstrap-theme: $variant == 'bootstrap';

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss

@@ -25,8 +25,7 @@ $dark-dialog: extend($light-dialog, $base-dark-dialog);
 /// Generates a dark fluent dialog schema.
 /// @type {Map}
 /// @requires $fluent-dialog
-/// @requires $base-dark-dialog
-$dark-fluent-dialog: extend($fluent-dialog, $base-dark-dialog);
+$dark-fluent-dialog: extend($fluent-dialog);
 
 /// Generates a dark bootstrap dialog schema.
 /// @type {Map}

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

@@ -11,7 +11,7 @@
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The dialog background color.
 /// @prop {Map} title-color [contrast-color: 'surface'] - The dialog title text color.
-/// @prop {Map} message-color [color: 'surface', text-contrast: (), rgba: .6] - The dialog message text color.
+/// @prop {Map} message-color [color: ('gray', 600),] - The dialog message text color.
 /// @prop {map} border-color [color: ('gray', 300)] - The border color for dialog component.
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
@@ -42,13 +42,18 @@ $light-dialog: extend(
 /// Generates a fluent dialog schema.
 /// @type {Map}
 /// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Map} message-color [color: ('gray', 700),] - The dialog message text color.
 /// @requires {Map} $light-dialog
 $fluent-dialog: extend(
     $light-dialog,
     (
         variant: 'fluent',
 
-        border-radius: rem(2px)
+        border-radius: rem(2px),
+
+        message-color: (
+            color: ('gray', 700),
+        ),
     )
 );
 

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

@@ -159,7 +159,7 @@ $fluent-tabs: extend(
         ),
 
         button-disabled-color: (
-            color: ('gray', 500)
+            color: ('gray', 400)
         ),
     )
 );

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -641,7 +641,9 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
 
         this.grid.navigateTo(this.row.index, -1);
         // when selecting the dummy row we need to adjust for top pinned rows
-        const indexAdjust = this.grid.isRowPinningToTop && !this.addRowParent.isPinned ? this.grid.pinnedRows.length : 0;
+        const indexAdjust = this.grid.isRowPinningToTop ?
+            (!this.addRowParent.isPinned ? this.grid.pinnedRows.length : 0) :
+            (!this.addRowParent.isPinned ? 0 : this.grid.unpinnedRecords.length);
 
         // TODO: Type this without shoving a bunch of internal properties in the row type
         const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index + indexAdjust) as any;

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts

@@ -2,7 +2,7 @@
 import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxTreeGridModule, IgxTreeGridComponent } from './public_api';
-import { IgxTreeGridEditActionsComponent } from '../../test-utils/tree-grid-components.spec';
+import { IgxTreeGridEditActionsComponent, IgxTreeGridEditActionsPinningComponent } from '../../test-utils/tree-grid-components.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxActionStripModule, IgxActionStripComponent } from '../../action-strip/public_api';
@@ -24,7 +24,8 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
-                IgxTreeGridEditActionsComponent
+                IgxTreeGridEditActionsComponent,
+                IgxTreeGridEditActionsPinningComponent
             ],
             imports: [IgxTreeGridModule, NoopAnimationsModule, IgxActionStripModule]
         })
@@ -128,5 +129,70 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
 
             expect(treeGrid.rowList.length).toBe(1);
         });
+
+        it('should add row on correct position and enter edit mode from pinned row - pinning position: Top', () => {
+            fix = TestBed.createComponent(IgxTreeGridEditActionsPinningComponent);
+            fix.detectChanges();
+            treeGrid = fix.componentInstance.treeGrid;
+            actionStrip = fix.componentInstance.actionStrip;
+
+            treeGrid.pinRow(1);
+            treeGrid.pinRow(6);
+
+            expect(treeGrid.getRowByKey(1).pinned).toBeTrue();
+            expect(treeGrid.getRowByKey(6).pinned).toBeTrue();
+
+            actionStrip.show(treeGrid.rowList.toArray()[1]);
+            fix.detectChanges();
+
+            const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`));
+
+            expect(editActions[3].componentInstance.iconName).toBe('add-row');
+            const addRowBtn = editActions[3].componentInstance;
+            addRowBtn.actionClick.emit();
+            fix.detectChanges();
+            endTransition();
+
+            let addRow = treeGrid.gridAPI.get_row_by_index(2);
+            expect(addRow.addRowUI).toBeTrue();
+            expect(addRow.inEditMode).toBeTrue();
+
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+        });
+
+        it('should add row on correct position and enter edit mode from pinned row - pinning position: Bottom', () => {
+            fix = TestBed.createComponent(IgxTreeGridEditActionsPinningComponent);
+            fix.detectChanges();
+            treeGrid = fix.componentInstance.treeGrid;
+            actionStrip = fix.componentInstance.actionStrip;
+
+            treeGrid.pinning = fix.componentInstance.pinningConfig;
+            fix.detectChanges();
+
+            treeGrid.pinRow(1);
+            treeGrid.pinRow(6);
+
+            expect(treeGrid.getRowByKey(1).pinned).toBeTrue();
+            expect(treeGrid.getRowByKey(6).pinned).toBeTrue();
+
+            actionStrip.show(treeGrid.rowList.last);
+            fix.detectChanges();
+
+            const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`));
+
+            expect(editActions[3].componentInstance.iconName).toBe('add-row');
+            const addRowBtn = editActions[3].componentInstance;
+            addRowBtn.actionClick.emit();
+            fix.detectChanges();
+            endTransition();
+
+            let addRow = treeGrid.gridAPI.get_row_by_index(10);
+            expect(addRow.addRowUI).toBeTrue();
+            expect(addRow.inEditMode).toBeTrue();
+
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+        });
     });
 });

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts

@@ -315,7 +315,12 @@ export class IgxTreeGridAddRowPipe implements PipeTransform {
         }
         const copy = collection.slice(0);
         const rec = (this.grid.crudService.row as IgxAddRow).recordRef;
-        copy.splice(this.grid.crudService.row.index, 0, rec);
+        if (this.grid.crudService.addRowParent.isPinned) {
+            const parentRowIndex = copy.findIndex(record => record.rowID === this.grid.crudService.addRowParent.rowID);
+            copy.splice(parentRowIndex + 1, 0, rec);
+        } else {
+            copy.splice(this.grid.crudService.row.index, 0, rec);            
+        }
         this.grid.records.set(rec.key, rec);
         return copy;
     }

projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts

@@ -1,10 +1,10 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component';
 import { SampleTestData } from './sample-test-data.spec';
-import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/public_api';
+import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult, IPinningConfig } from '../grids/public_api';
 import { DisplayDensity } from '../core/displayDensity';
 import { IgxActionStripComponent } from '../action-strip/action-strip.component';
-import { DefaultSortingStrategy } from 'igniteui-angular';
+import { DefaultSortingStrategy, RowPinningPosition } from 'igniteui-angular';
 import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
 import { IgxTreeGridGroupByAreaComponent } from '../grids/grouping/tree-grid-group-by-area.component';
 
@@ -1025,3 +1025,26 @@ export class IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent {
     public actionStrip: IgxActionStripComponent;
     public data = SampleTestData.employeeSmallPrimaryForeignKeyTreeData();
 }
+
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" width="900px" height="600px" [rowEditable]="true">
+        <igx-column [field]="'ID'" dataType="number"></igx-column>
+        <igx-column [field]="'ParentID'" dataType="number"></igx-column>
+        <igx-column [field]="'Name'" dataType="string"></igx-column>
+        <igx-column [field]="'JobTitle'" dataType="string"></igx-column>
+        <igx-column [field]="'Age'" dataType="number"></igx-column>
+        <igx-action-strip #actionStrip>
+        <igx-grid-pinning-actions></igx-grid-pinning-actions>
+        <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
+    </igx-action-strip>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridEditActionsPinningComponent {
+    @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
+    @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+    public actionStrip: IgxActionStripComponent;
+    public data = SampleTestData.employeePrimaryForeignKeyTreeData();
+    public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
+}