Merge branch 'combo-master' of https://github.com/IgniteUI/igniteui-angular into combo-master

Author: ViktorSlavov

CHANGELOG.md

@@ -57,6 +57,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     ```
    For more information, please head over to `igxGrid`'s [ReadMe](https://github.com/IgniteUI/igniteui-angular/blob/master/src/grid/README.md) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_groupby.html).
 
+- `igxGrid` theme now has support for alternating grid row background and text colors.
 - `igxColumn` changes:
     - **Breaking change** filteringExpressions property is removed.
 
@@ -96,6 +97,9 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
         - `onClose` event renamed to `onClosed`.
 - **Breaking change** All properties that were named `isDisabled` have been renamed to `disabled` in order to acheive consistency across our component suite. This affects: date-picker, input directive, input-group, dropdown-item, tabbar and time-picker.
 
+## 6.0.3
+- **igxGrid** exposing the `filteredSortedData` method publicly - returns the grid data with current filtering and sorting applied.
+
 ## 6.0.2
 - **igxGrid** Improve scrolling on mac [#1563](https://github.com/IgniteUI/igniteui-angular/pull/1563)
 - The `ng update igniteui-angular` migration schematics now also update the theme import path in SASS files. [#1582](https://github.com/IgniteUI/igniteui-angular/issues/1582)

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

@@ -110,8 +110,8 @@
 
         fab-text-color: igx-contrast-color($palette, 'secondary', 500),
         fab-background: igx-color($palette, 'secondary', 500),
-        fab-hover-text-color: null,
-        fab-hover-background: null,
+        fab-hover-text-color: igx-contrast-color($palette, 'secondary', 500),
+        fab-hover-background: igx-color($palette, 'secondary', 400),
         fab-focus-background: igx-color($palette, 'secondary', 500),
         fab-focus-text-color: igx-contrast-color($palette, 'secondary', 500),
 

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

@@ -51,6 +51,7 @@
 ) {
     $default-theme: (
         name: 'igx-grid-filtering',
+        toggle-background: transparent,
         toggle-icon-color: inherit,
         toggle-icon-hover-color: #fff,
         toggle-icon-active-color: igx-contrast-color($palette, 'secondary'),
@@ -60,7 +61,8 @@
         toggle-filtered-background: transparent,
         menu-background: #fff,
         menu-text-color: igx-color($palette, 'grays', 900),
-        menu-button-text-color: igx-color($palette, 'secondary')
+        menu-button-text-color: igx-color($palette, 'secondary'),
+        menu-button-disabled-text-color: initial
     );
 
     @if not($menu-text-color) and $menu-background {
@@ -213,7 +215,7 @@
             color: --var($theme, 'menu-button-text-color');
 
             &:disabled {
-                color: --var($theme, 'menu-button-text-color');
+                color: --var($theme, 'menu-button-disabled-text-color');
             }
         }
 

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

@@ -160,7 +160,7 @@
 
     %igx-grid-summary__result {
         color: --var($theme, 'result-color');
-        font-weight: 800;
+        font-weight: 600;
         flex: 1 1 auto;
         text-align: right;
     }

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

@@ -64,6 +64,14 @@
         }
     }
 
+    @include e(tr, $m: odd) {
+        @extend %grid-row--odd !optional;
+    }
+
+    @include e(tr, $m: even) {
+        @extend %grid-row--even !optional;
+    }
+
     @include e(tr, $m: selected) {
         @extend %grid-row--selected !optional;
     }
@@ -142,6 +150,10 @@
         @extend %grid-cell--fixed-width !optional;
     }
 
+    @include e(td-text) {
+        @extend %grid-cell-text !optional;
+    }
+
     @include e(cbx-selection) {
         @extend %grid__cbx-selection !optional;
     }

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

@@ -13,9 +13,14 @@
 /// @param {Color} $ghost-header-background [null] - The dragged header background color.
 /// @param {Color} $content-background [null] - The table body background color.
 /// @param {Color} $content-text-color [null] - The table body text color.
+/// @param {Color} $row-odd-background [null] - The background color of odd rows.
+/// @param {Color} $row-even-background [null] - The background color of even rows.
+/// @param {Color} $row-odd-text-color [null] - The text color of odd rows.
+/// @param {Color} $row-even-text-color [null] - The text color of even rows.
 /// @param {Color} $row-selected-background [null] - The selected row background color.
 /// @param {Color} $row-selected-text-color [null] - The selected row text color.
 /// @param {Color} $row-hover-background [null] - The hover row background color.
+/// @param {Color} $row-hover-text-color [null] - The hover row text color.
 /// @param {Color} $row-border-color [null] - The row bottom border color.
 /// @param {Color} $pinned-border-width [null] - The border width of the pinned border.
 /// @param {Color} $pinned-border-style [null] - The CSS border style of the pinned border.
@@ -61,9 +66,14 @@
     $ghost-header-icon-color: null,
     $ghost-header-background: null,
 
+    $row-odd-background: null,
+    $row-even-background: null,
+    $row-odd-text-color: null,
+    $row-even-text-color: null,
     $row-selected-background: null,
     $row-selected-text-color: null,
     $row-hover-background: null,
+    $row-hover-text-color: null,
     $row-border-color: null,
 
     $pinned-border-width: null,
@@ -109,9 +119,14 @@
         ghost-header-icon-color: igx-color($palette, 'grays'),
         ghost-header-background: #fff,
 
+        row-odd-background: #fff,
+        row-even-background: #fff,
+        row-odd-text-color: inherit,
+        row-even-text-color: inherit,
         row-selected-background: hexrgba(igx-color($palette, 'grays', 800)),
         row-selected-text-color: igx-contrast-color($palette, 'grays', 900),
-        row-hover-background: darken(hexrgba(igx-color($palette, 'grays', 100)), 10%),
+        row-hover-background: hexrgba(igx-color($palette, 'grays', 200)),
+        row-hover-text-color: igx-color($palette, 'grays', 800),
         row-border-color: igx-color($palette, 'grays', 300),
 
         pinned-border-width: 2px,
@@ -163,6 +178,26 @@
         $content-text-color: text-contrast($content-background);
     }
 
+    @if not($row-odd-background) and $content-background {
+        $row-odd-background: $content-background;
+    }
+
+    @if not($row-even-background) and $content-background {
+        $row-even-background: $content-background;
+    }
+
+    @if not($row-odd-text-color) and $row-odd-background {
+        $row-odd-text-color: text-contrast($row-odd-background);
+    }
+
+    @if not($row-even-text-color) and $row-even-background {
+        $row-even-text-color: text-contrast($row-even-background);
+    }
+
+    @if not($row-hover-text-color) and $row-hover-background {
+        $row-hover-text-color: text-contrast($row-hover-background);
+    }
+
     @if not($cell-selected-text-color) and $cell-selected-background {
         $cell-selected-text-color: text-contrast($cell-selected-background);
     }
@@ -220,9 +255,14 @@
         content-background: $content-background,
         content-text-color: $content-text-color,
 
+        row-odd-background: $row-odd-background,
+        row-even-background: $row-even-background,
+        row-odd-text-color: $row-odd-text-color,
+        row-even-text-color: $row-even-text-color,
         row-selected-background: $row-selected-background,
         row-selected-text-color: $row-selected-text-color,
         row-hover-background: $row-hover-background,
+        row-hover-text-color: $row-hover-text-color,
         row-border-color: $row-border-color,
 
         pinned-border-width: $pinned-border-width,
@@ -371,9 +411,11 @@
 
         %grid-row {
             background: inherit;
+            color: inherit;
 
             &:hover {
                 background: inherit;
+                color: inherit;
             }
         }
     }
@@ -457,15 +499,27 @@
 
         &:hover {
             background-color: --var($theme, 'row-hover-background');
+            color: --var($theme, 'row-hover-text-color');
         }
     }
 
+    %grid-row--odd {
+        background: --var($theme, 'row-odd-background');
+        color: --var($theme, 'row-odd-text-color');
+    }
+
+    %grid-row--even {
+        background: --var($theme, 'row-even-background');
+        color: --var($theme, 'row-even-text-color');
+    }
+
     %grid-row--selected {
         color: --var($theme, 'row-selected-text-color');
         background-color: --var($theme, 'row-selected-background');
 
         &:hover {
             background-color: --var($theme, 'row-selected-background');
+            color: --var($theme, 'row-selected-text-color');
         }
     }
 
@@ -484,9 +538,10 @@
         line-height: $grid-cell-lh;
         color: inherit;
         text-align: left;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    }
+
+    %grid-cell-text {
+        @include ellipsis();
     }
 
     %grid-cell-display--cosy {
@@ -509,8 +564,7 @@
 
     %grid-cell--editing {
         background-color: --var($theme, 'cell-editing-background') !important;
-        border: 1px solid --var($theme, 'cell-selected-background');
-        box-shadow: igx-elevation($elevations, 2);
+        border: 2px solid --var($theme, 'cell-selected-background');
 
         igx-input-group {
             width: 100%;
@@ -526,6 +580,10 @@
 
     %grid-cell--pinned-last {
         border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
+
+        &%grid-cell--editing {
+            border-right: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important;
+        }
     }
 
     %grid-cell-header {
@@ -539,10 +597,6 @@
         padding: map-get($grid-header-padding, 'comfortable');
         border-right: 1px dotted igx-color($palette, 'grays', 400);
         overflow: visible;
-
-        &:last-of-type {
-            border-right: transparent;
-        }
     }
 
     %grid-cell-header--cosy {
@@ -601,9 +655,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        z-index: 1;
-        position: relative;
         background: inherit;
+        z-index: 1;
     }
 
     %grid__cbx-selection--cosy {

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -32,7 +32,9 @@
     $default-theme: (
         name: 'igx-list',
         background: #fff,
+        header-background: #fff,
         header-text-color: igx-color($palette, 'secondary'),
+        item-background: #fff,
         item-text-color: igx-color($palette, 'grays', 800),
         item-background-active: igx-color($palette, 'grays', 100),
         item-text-color-active: igx-color($palette, 'grays', 800)

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

@@ -1,6 +1,6 @@
 <ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" [page]="this.grid.page">
-    <div>{{ formatter ? formatter(value) : value }}</div>
+    <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">

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

@@ -379,10 +379,10 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
     }
 
     @Input()
-    public evenRowCSS = '';
+    public evenRowCSS = 'igx-grid__tr--even';
 
     @Input()
-    public oddRowCSS = '';
+    public oddRowCSS = 'igx-grid__tr--odd';
 
     @Input()
     public rowHeight: number;

projects/igniteui-angular/src/lib/grid/grid.groupby.spec.ts

@@ -1351,7 +1351,7 @@ describe('IgxGrid - GroupBy', () => {
         fix.detectChanges();
         let chips = fix.nativeElement.querySelectorAll('igx-chip');
         // click grouping direction arrow
-        const event = {owner: {id: 'ProductName'}};
+        const event = { owner: { id: 'ProductName' } };
         grid.onChipClicked(event);
         chips = fix.nativeElement.querySelectorAll('igx-chip');
         expect(chips.length).toBe(1);
@@ -1427,7 +1427,7 @@ describe('IgxGrid - GroupBy', () => {
             checkBoxElement.dispatchEvent(new Event('click'));
             setTimeout(() => {
                 expect(grid.selectedRows().length).toEqual(1);
-                expect(rows[0].element.nativeElement.className).toEqual('igx-grid__tr igx-grid__tr--selected');
+                expect(rows[0].element.nativeElement.className).toEqual('igx-grid__tr igx-grid__tr--odd igx-grid__tr--selected');
                 done();
             }, 100);
         }, 100);
@@ -1615,7 +1615,7 @@ describe('IgxGrid - GroupBy', () => {
         expect(groupRows[1].expanded).toEqual(true);
     });
 
-    it('should remove expansion state when reordering chips', (done) => {
+    xit('should remove expansion state when reordering chips', (done) => {
         const fix = TestBed.createComponent(GroupableGridComponent);
         const grid = fix.componentInstance.instance;
         fix.componentInstance.data = [
@@ -1803,8 +1803,8 @@ describe('IgxGrid - GroupBy', () => {
         const grid = fix.componentInstance.instance;
         fix.detectChanges();
         grid.groupBy([{ fieldName: 'Released', dir: SortingDirection.Asc, ignoreCase: false },
-            { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false },
-            { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]);
+        { fieldName: 'Downloads', dir: SortingDirection.Asc, ignoreCase: false },
+        { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false }]);
 
         // there should be 3 groups at top level
         const groupsRecords = grid.groupsRecords;

projects/igniteui-angular/src/lib/grid/grid.sorting.spec.ts

@@ -237,7 +237,7 @@ describe('IgxGrid - Grid Sorting', () => {
     });
 
     // sort now allows only params of type ISortingExpression hence it is not possible to pass invalid expressions
-    xit(`Grid sort by mixed valid and invalid expressions should update the
+    it(`Grid sort by mixed valid and invalid expressions should update the
             data only by valid ones (through API)`, () => {
         const fixture = TestBed.createComponent(GridDeclaredColumnsComponent);
         fixture.detectChanges();
@@ -253,16 +253,16 @@ describe('IgxGrid - Grid Sorting', () => {
 
         fixture.detectChanges();
 
-        let expectedResult = 'Brad';
+        let expectedResult = 'Rick';
         expect(grid.getCellByColumn(0, secondColumn).value).toEqual(expectedResult);
-        expectedResult = 'Williams';
+        expectedResult = 'Jones';
         expect(grid.getCellByColumn(0, thirdColumn).value).toEqual(expectedResult);
-        expect(grid.getCellByColumn(0, firstColumn).value).toEqual(1);
-        expectedResult = 'Rick';
+        expect(grid.getCellByColumn(0, firstColumn).value).toEqual(6);
+        expectedResult = 'ALex';
         expect(grid.getCellByColumn(grid.data.length - 1, secondColumn).value).toEqual(expectedResult);
-        expectedResult = 'BRown';
+        expectedResult = 'Smith';
         expect(grid.getCellByColumn(grid.data.length - 1, thirdColumn).value).toEqual(expectedResult);
-        expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(7);
+        expect(grid.getCellByColumn(grid.data.length - 1, firstColumn).value).toEqual(5);
     });
 
     // UI Tests