Merge branch '9.1.x' into ibarakov/fix-8604-9.1.x

Author: DiyanDimitrov

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

@@ -11,22 +11,38 @@
 
     @extend %igx-button-display !optional;
 
+    @include m(cosy) {
+        @extend %igx-button-display--cosy !optional;
+    }
+
+    @include m(compact) {
+        @extend %igx-button-display--compact !optional;
+    }
+
     // FLAT BUTTON
     @include m(flat) {
         @extend %igx-button-display !optional;
         @extend %igx-button--flat !optional;
     }
 
+    // RAISED BUTTON
+    @include m(raised) {
+        @extend %igx-button-display !optional;
+        @extend %igx-button--raised !optional;
+    }
+
     // OUTLINED BUTTON
     @include m(outlined) {
         @extend %igx-button-display !optional;
         @extend %igx-button--outlined !optional;
     }
 
-    // RAISED BUTTON
-    @include m(raised) {
-        @extend %igx-button-display !optional;
-        @extend %igx-button--raised !optional;
+    @include mx(outlined-cosy, outlined) {
+        @extend %igx-button--outlined-cosy !optional;
+    }
+
+    @include mx(outlined-compact, outlined) {
+        @extend %igx-button--outlined-compact !optional;
     }
 
     // FAB BUTTON
@@ -53,12 +69,4 @@
     @include m(disabled) {
         @extend %igx-button--disabled !optional;
     }
-
-    @include m(cosy) {
-        @extend %igx-button-display--cosy !optional;
-    }
-
-    @include m(compact) {
-        @extend %igx-button-display--compact !optional;
-    }
 }

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

@@ -461,6 +461,12 @@
         compact: rem(3px, 16px) rem(16px, 16px)
     );
 
+    $outlined-button-padding-material: (
+        comfortable: rem(7px, 16px) rem(14px, 16px),
+        cosy: rem(4px, 16px) rem(14px, 16px),
+        compact: rem(1px, 16px) rem(14px, 16px)
+    );
+
     $button-padding-fluent: (
         comfortable: 0 rem(16px, 16px),
         cosy: 0 rem(16px, 16px),
@@ -473,6 +479,12 @@
         compact: rem(4px, 16px) rem(8px, 16px)
     );
 
+    $outlined-button-padding-indigo: (
+        comfortable: rem(6px, 16px) rem(14px, 16px),
+        cosy: rem(4px, 16px) rem(10px, 16px),
+        compact: rem(2px, 16px) rem(6px, 16px)
+    );
+
     $variant: map-get($theme, variant);
 
     $button-padding: map-get((
@@ -481,6 +493,13 @@
         bootstrap: $button-padding-bootstrap,
     ), $variant);
 
+    $outlined-button-padding: map-get((
+        material: $outlined-button-padding-material,
+        fluent: $button-padding-fluent,
+        bootstrap: $button-padding-bootstrap,
+        indigo-design: $outlined-button-padding-indigo
+    ), $variant);
+
     $button--size-material: (
         comfortable: rem(36px),
         cosy: rem(30px),
@@ -638,6 +657,7 @@
         background: --var($theme, 'outlined-background');
         color: --var($theme, 'outlined-text-color');
         border-radius: --var($theme, 'outlined-border-radius');
+        padding: map-get($outlined-button-padding, 'comfortable');
 
         %igx-icon-display {
             color: --var($theme, 'outlined-icon-color')
@@ -664,6 +684,16 @@
         }
     }
 
+    %igx-button--outlined-cosy {
+        padding: map-get($outlined-button-padding, 'cosy');
+        min-height: map-get($button-size, 'cosy');
+    }
+
+    %igx-button--outlined-compact {
+        padding: map-get($outlined-button-padding, 'compact');
+        min-height: map-get($button-size, 'compact');
+    }
+
     %igx-button--raised {
         color: --var($theme, 'raised-text-color');
         background: --var($theme, 'raised-background');

projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts

@@ -10,8 +10,10 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxIconComponent, IgxIconService } from '../../icon/public_api';
 import { DisplayDensity } from '../../core/density';
 
-const FLAT_RAISED_OUTLINED_BUTTON_COMPACT = 'igx-button--compact';
-const FLAT_RAISED_OUTLINED_BUTTON_COSY = 'igx-button--cosy';
+const FLAT_RAISED_BUTTON_COMPACT = 'igx-button--compact';
+const FLAT_RAISED_BUTTON_COSY = 'igx-button--cosy';
+const OUTLINED_BUTTON_COMPACT = 'igx-button--outlined-compact';
+const OUTLINED_BUTTON_COSY = 'igx-button--outlined-cosy';
 const FAB_BUTTON_COMPACT = 'igx-button--fab-compact';
 const FAB_BUTTON_COSY = 'igx-button--fab-cosy';
 
@@ -210,15 +212,19 @@ function verifyDisplayDensity(buttonDirective, buttonDebugEl, buttonType, expect
 
     switch (expectedDisplayDensity) {
         case DisplayDensity.compact: {
-            if (buttonType === 'flat' || buttonType === 'raised' || buttonType === 'outlined') {
-                expectedButtonDensityClass = FLAT_RAISED_OUTLINED_BUTTON_COMPACT;
+            if (buttonType === 'flat' || buttonType === 'raised') {
+                expectedButtonDensityClass = FLAT_RAISED_BUTTON_COMPACT;
+            } else if (buttonType === 'outlined') {
+                expectedButtonDensityClass = OUTLINED_BUTTON_COMPACT;
             } else if (buttonType === 'fab') {
                 expectedButtonDensityClass = FAB_BUTTON_COMPACT;
             }
         } break;
         case DisplayDensity.cosy: {
-            if (buttonType === 'flat' || buttonType === 'raised' || buttonType === 'outlined') {
-                expectedButtonDensityClass = FLAT_RAISED_OUTLINED_BUTTON_COSY;
+            if (buttonType === 'flat' || buttonType === 'raised') {
+                expectedButtonDensityClass = FLAT_RAISED_BUTTON_COSY;
+            } else if (buttonType === 'outlined') {
+                expectedButtonDensityClass = OUTLINED_BUTTON_COSY;
             } else if (buttonType === 'fab') {
                 expectedButtonDensityClass = FAB_BUTTON_COSY;
             }

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

@@ -190,7 +190,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     @HostBinding('class.igx-button--cosy')
     public get cssClassCosy(): boolean {
-        return (this._type === 'flat' || this._type === 'raised' || this._type === 'outlined') &&
+        return (this._type === 'flat' || this._type === 'raised') &&
             this.displayDensity === DisplayDensity.cosy;
     }
 
@@ -200,10 +200,28 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     @HostBinding('class.igx-button--compact')
     public get cssClassCompact(): boolean {
-        return (this._type === 'flat' || this._type === 'raised' || this._type === 'outlined') &&
+        return (this._type === 'flat' || this._type === 'raised') &&
             this.displayDensity === DisplayDensity.compact;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('class.igx-button--outlined-cosy')
+    public get cssClassCosyOutlined(): boolean {
+        return this._type === 'outlined' && this.displayDensity === DisplayDensity.cosy;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('class.igx-button--outlined-compact')
+    public get cssClassCompactOutlined(): boolean {
+        return this._type === 'outlined' && this.displayDensity === DisplayDensity.compact;
+    }
+
     /**
      * @hidden
      * @internal

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

@@ -1447,8 +1447,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ViewChild('loadingOverlay', { static: true })
-    public loadingOverlay: ElementRef;
+    @ViewChild('loadingOverlay', { read: IgxToggleDirective, static: true })
+    public loadingOverlay: IgxToggleDirective;
 
     /**
      * @hidden @internal
@@ -1959,7 +1959,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ViewChild(IgxToggleDirective)
+    @ViewChild('rowEditingOverlay', { read: IgxToggleDirective })
     public rowEditingOverlay: IgxToggleDirective;
 
     /**
@@ -2596,7 +2596,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _baseFontSize: number;
     private _horizontalForOfs: Array<IgxGridForOfDirective<any>> = [];
     private _multiRowLayoutRowSize = 1;
-    protected _loadingId;
     protected _expansionStates: Map<any, boolean> = new Map<any, boolean>();
     protected _defaultExpandState = false;
     // Caches
@@ -6205,15 +6204,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 closeOnOutsideClick: false,
                 positionStrategy: new ContainerPositionStrategy()
             };
-            if (!this._loadingId) {
-                this._loadingId = this.overlayService.attach(this.loadingOverlay, overlaySettings);
-                this.overlayService.show(this._loadingId, overlaySettings);
-            }
+
+            this.loadingOverlay.open(overlaySettings);
         } else {
-            if (this._loadingId) {
-                this.overlayService.hide(this._loadingId);
-                this._loadingId = null;
-            }
+            this.loadingOverlay.close();
         }
     }
 

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

@@ -195,7 +195,7 @@
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
         <igc-trial-watermark></igc-trial-watermark>
     </div>
-    <div #loadingOverlay>
+    <div igxToggle #loadingOverlay>
         <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
@@ -279,7 +279,7 @@
 }">unfold_more</igx-icon>
 </ng-template>
 
-<div *ngIf="rowEditable" igxToggle>
+<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
             *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }">

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

@@ -73,7 +73,7 @@
         <igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
-    <div #loadingOverlay>
+    <div igxToggle #loadingOverlay>
         <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
@@ -227,7 +227,7 @@
     <igx-icon role="button" [isActive]='hasExpandedRecords() && hasExpandableChildren' fontSet="material">unfold_less</igx-icon>
 </ng-template>
 
-<div *ngIf="rowEditable" igxToggle>
+<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
             *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }">

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

@@ -56,7 +56,7 @@
             [column]="filteringService.filteredColumn"></igx-grid-filtering-row>
     </div>
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
-    <div #loadingOverlay>
+    <div igxToggle #loadingOverlay>
         <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
         </igx-circular-bar>
     </div>
@@ -194,7 +194,7 @@
     </div>
 </ng-template>
 
-<div *ngIf="rowEditable" igxToggle>
+<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
             *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }">