Merge branch 'master' into didimmova/dataviz-exclude-themes-7897

Author: simeonoff

CHANGELOG.md

@@ -50,6 +50,8 @@ The following example shows how you can use the Indigo theme:
 
 
 ### New Features
+- `igxButton` directive
+    - Added styles to support extended fab buttons.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
     - Added support for tooltips on data cells default template and summary cells.

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

@@ -429,6 +429,8 @@
 @mixin igx-button($theme) {
     @include igx-root-css-vars($theme);
 
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
     $button-border: 1px solid transparent;
     $button-width: rem(88px);
 
@@ -514,15 +516,15 @@
 
 
     $button-floating-padding: (
-        comfortable: rem(15px),
-        cosy: rem(11px),
-        compact: rem(7px)
+        comfortable: rem(8px) rem(16px),
+        cosy: rem(4px) rem(12px),
+        compact: 0 rem(8px)
     );
 
     $button-floating-size: (
-        comfortable: rem(56px),
-        cosy: rem(48px),
-        compact: rem(40px)
+        comfortable: rem(48px),
+        cosy: rem(40px),
+        compact: rem(32px)
     );
 
     $icon-in-button-size: rem(18px);
@@ -762,18 +764,37 @@
             background: --var($theme, 'fab-focus-background');
             box-shadow: $fab-shadow--focus;
         }
+
+        igx-icon {
+            display: inline-flex;
+            order: -1;
+            margin: rem(8px) 0;
+        }
+
+        * + igx-icon {
+            margin: 0;
+            margin-#{$right}: rem(12px);
+        }
     }
 
     %igx-button--fab-cosy {
         padding: map-get($button-floating-padding, 'cosy');
         min-width: map-get($button-floating-size, 'cosy');
         min-height: map-get($button-floating-size, 'cosy');
+
+        * + igx-icon {
+            margin-#{$right}: rem(8px);
+        }
     }
 
     %igx-button--fab-compact {
         padding: map-get($button-floating-padding, 'compact');
         min-width: map-get($button-floating-size, 'compact');
         min-height: map-get($button-floating-size, 'compact');
+
+        * + igx-icon {
+            margin-#{$right}: rem(4px);
+        }
     }
 
     %igx-button--icon {
@@ -849,4 +870,15 @@
             text-align: center;
         }
     }
+
+    %igx-button--fab {
+        p,
+        span,
+        div {
+            @include igx-type-style($type-scale, $text) {
+                text-align: center;
+                margin: 0;
+            }
+        }
+    }
 }

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

@@ -22,6 +22,7 @@
         flex-grow: 1;
         box-shadow: igx-elevation($elevations, 12);
         overflow: auto;
+        min-width: rem(320px);
     }
 
     %grid-excel-filter--inline {
@@ -58,10 +59,9 @@
         display: flex;
         flex-direction: column;
         height: 100%;
-        width: 320px;
-        min-width: 320px;
         background: --var($theme, 'filtering-row-background');
-        border-radius: 4px;
+        // TODO The border-radius should not be hardcoded.
+        border-radius: rem(4px);
 
         @include igx-button-group(igx-button-group-theme(
             $shadow: none,

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

@@ -1717,6 +1717,18 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.getRowByIndex(3).selected).toBeTrue();
             expect(grid.getRowByIndex(0).selected).toBeFalse();
         });
+
+        it('Row Pinning: should update checkbox status correctly when there is pinned row and groupBy', () => {
+            grid.pinRow(2);
+            fix.detectChanges();
+
+            grid.groupBy({ fieldName: 'InStock', dir: SortingDirection.Desc, ignoreCase: false });
+
+            GridSelectionFunctions.headerCheckboxClick(grid);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true, false);
+            expect(grid.selectedRows.length).toBe(grid.data.length);
+        });
     });
 
     describe('Integration with CRUD and transactions', () => {

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

@@ -7,7 +7,7 @@
     </ng-container>
 </span>
 <div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
-    <igx-icon 
+    <igx-icon
         [attr.draggable]="false"
         [attr.data-sortIndex]="column.field | sortingIndex:grid.sortingExpressions"
         class="sort-icon"
@@ -18,6 +18,6 @@
 
     <igx-icon [ngClass]="filterIconClassName" [attr.draggable]="false" (click)="onFilteringIconClick($event)"
         *ngIf="grid.allowFiltering == true && column.filterable && grid.filterMode == 'excelStyleFilter'">
-        filter_list
+        more_vert
     </igx-icon>
 </div>

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -729,8 +729,12 @@ export class IgxGridSelectionService {
 
     /** Returns all data in the grid, with applied filtering and sorting and without deleted rows. */
     public get allData(): Array<any> {
-        const allData = this.isFilteringApplied() || this.grid.sortingExpressions.length ?
-            this.grid.filteredSortedData : this.grid.gridAPI.get_all_data(true);
+        let  allData;
+        if (this.isFilteringApplied() || this.grid.sortingExpressions.length) {
+            allData = this.grid.pinnedRecordsCount ? this.grid._filteredSortedUnpinnedData : this.grid.filteredSortedData;
+        } else {
+            allData = this.grid.gridAPI.get_all_data(true);
+        }
         return allData.filter(rData => !this.isRowDeleted(this.grid.gridAPI.get_row_id(rData)));
     }
 

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

@@ -622,6 +622,17 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true);
         });
 
+        it('should have correct header checkbox when add a row and then selectAll rows', () => {
+            treeGrid.addRow({ ID: 13, Name: 'Michael Cooper', Age: 33, OnPTO: false }, 317);
+            fix.detectChanges();
+
+            TreeGridFunctions.clickHeaderRowSelectionCheckbox(fix);
+            fix.detectChanges();
+
+            expect(treeGrid.selectedRows.length).toBeGreaterThan(treeGrid.flatData.length);
+            TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true);
+        });
+
         it('should have correct header checkbox when add a row and undo transaction', fakeAsync(() => {
             treeGrid.addRow({ ID: 13, Name: 'Michael Cooper', Age: 33, OnPTO: false }, 317);
             tick();

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

@@ -39,7 +39,8 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
                 flatData, 0, treeGridRecordsMap);
         }
 
-        grid.flatData = flatData;
+        grid.flatData = grid.transactions.enabled ?
+        flatData.filter(rec => !grid.transactions.getState(this.getRowID(primaryKey, rec))) : flatData;
         grid.records = treeGridRecordsMap;
         grid.rootRecords = hierarchicalRecords;
         return hierarchicalRecords;

src/app/button/button.sample.html

@@ -24,7 +24,7 @@ <h4 class="sample-title">Flat Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Raised Buttons</h4>
                 <div class="buttons-sample">
@@ -48,7 +48,7 @@ <h4 class="sample-title">Raised Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Outlined Buttons</h4>
                 <div class="buttons-sample">
@@ -72,7 +72,7 @@ <h4 class="sample-title">Outlined Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Floating Action Buttons</h4>
                 <div class="buttons-sample">
@@ -108,7 +108,7 @@ <h4 class="sample-title">Floating Action Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Icon Buttons</h4>
                 <div class="buttons-sample">
@@ -179,7 +179,18 @@ <h4 class="sample-title">Buttons based on Display Density</h4>
                     </div>
                     <div class="button-sample">
                         <button igxRipple igxButton="fab" [displayDensity]="density">
-                            <igx-icon fontSet="material" >favorite</igx-icon>
+                            <igx-icon fontSet="material">favorite</igx-icon>
+                        </button>
+                    </div>
+                    <div class="button-sample">
+                        <button igxRipple igxButton="fab" [displayDensity]="density">
+                            <span>Favorite</span>
+                            <igx-icon fontSet="material">favorite</igx-icon>
+                        </button>
+                    </div>
+                    <div class="button-sample">
+                        <button igxRipple igxButton="fab" [displayDensity]="density">
+                            <span>Favorite</span>
                         </button>
                     </div>
                 </div>

src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -20,7 +20,7 @@
             </div>
             <igx-grid [rowEditable]="true" [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [paging]="true"
                 [columnHiding]='true' [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'"
-                [height]="'600px'" [rowSelection]="true">
+                [height]="'600px'" [rowSelection]="'multiple'">
 
                 <ng-template igxGridDetail let-dataItem>
                     <div>