From 3d6821181c4b47bde07693e7df73a08d97211007 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 22 Nov 2018 17:18:33 +0200
Subject: [PATCH 1/4] fix(calendar): make all class names unique

Closes #2287
---
 .../src/lib/calendar/calendar.component.html  | 16 ++++-----
 .../lib/calendar/calendar.component.spec.ts   | 12 +++----
 .../calendar/_calendar-component.scss         | 36 +++++++++----------
 .../components/calendar/_calendar-theme.scss  | 29 ++++++---------
 4 files changed, 40 insertions(+), 53 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
index 0fd937b1568..a9ecf93d246 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.html
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -1,13 +1,13 @@
 <ng-template let-result #defaultHeader>
-    <span class="date-text">{{ getFormattedDate().weekday }},&nbsp;</span>
-    <span class="date-text">{{ getFormattedDate().monthday }}</span>
+    <span>{{ getFormattedDate().weekday }},&nbsp;</span>
+    <span>{{ getFormattedDate().monthday }}</span>
 </ng-template>
 
 <ng-template let-result #defaultMonth>
-    <span (click)="activeViewYear()" class="date__el">
+    <span (click)="activeViewYear()" class="igx-calendar-picker__date">
         {{ formattedMonth(viewDate) }}
     </span>
-    <span (click)="activeViewDecade()" class="date__el">
+    <span (click)="activeViewDecade()" class="igx-calendar-picker__date">
         {{ formattedYear(viewDate) }}
     </span>
 </ng-template>
@@ -21,15 +21,15 @@ <h2 class="igx-calendar__header-date">
 </div>
 
 <div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
-    <div class="igx-calendar__body-picker">
-        <div class="prev" (click)="previousMonth()">
+    <div class="igx-calendar-picker">
+        <div class="igx-calendar-picker__prev" (click)="previousMonth()">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
-        <div class="date">
+        <div>
             <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: context">
             </ng-container>
         </div>
-        <div class="next" (click)="nextMonth()">
+        <div class="igx-calendar-picker__next" (click)="nextMonth()">
             <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
         </div>
     </div>
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
index ee86fdeee3b..f7772468efe 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
@@ -12,7 +12,7 @@ import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 
-describe('IgxCalendar', () => {
+fdescribe('IgxCalendar', () => {
     configureTestSuite();
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -246,9 +246,9 @@ describe('IgxCalendar', () => {
                 year: 'numeric'
             };
             const defaultViews = { day: false, month: true, year: false };
-            const bodyMonth = dom.query(By.css('.date .date__el'));
+            const bodyMonth = dom.query(By.css('.igx-calendar-picker__date'));
             const headerYear = dom.query(By.css('.igx-calendar__header-year'));
-            const bodyYear = dom.queryAll(By.css('.date .date__el'))[1];
+            const bodyYear = dom.queryAll(By.css('.igx-calendar-picker__date'))[1];
             const headerWeekday = dom.queryAll(By.css('.igx-calendar__header-date span'))[0];
             const headerDate = dom.queryAll(By.css('.igx-calendar__header-date span'))[1];
 
@@ -300,9 +300,9 @@ describe('IgxCalendar', () => {
             fixture.componentInstance.model = new Date();
             fixture.detectChanges();
 
-            const bodyMonth = dom.query(By.css('.date .date__el'));
+            const bodyMonth = dom.query(By.css('.igx-calendar-picker__date'));
             const headerYear = dom.query(By.css('.igx-calendar__header-year'));
-            const bodyYear = dom.queryAll(By.css('.date .date__el'))[1];
+            const bodyYear = dom.queryAll(By.css('.igx-calendar-picker__date'))[1];
             const headerWeekday = dom.queryAll(By.css('.igx-calendar__header-date span'))[0];
             const headerDate = dom.queryAll(By.css('.igx-calendar__header-date span'))[1];
             let bodyWeekday = dom.query(By.css('.igx-calendar__label'));
@@ -362,7 +362,7 @@ describe('IgxCalendar', () => {
         });
 
         it('Calendar DOM structure - year view | month view', () => {
-            const collection = dom.queryAll(By.css('.date__el'));
+            const collection = dom.queryAll(By.css('.igx-calendar-picker__date'));
             const monthButton = collection[0];
             const yearButton = collection[1];
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index 05adfe4bf41..947b9be3f16 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -27,26 +27,6 @@
         @extend %cal-body-display !optional;
     }
 
-    @include e(body-picker) {
-        @extend %cal-picker-display !optional;
-
-        @include b(date) {
-            @extend %cal-picker-date !optional;
-
-            @include e(el) {
-                @extend %cal-header-date-el--hover !optional;
-            }
-        }
-
-        @include b(prev) {
-            @extend %cal-picker-arrow !optional;
-        }
-
-        @include b(next) {
-            @extend %cal-picker-arrow !optional;
-        }
-    }
-
     @include e(body-row) {
         @extend %cal-row-display !optional;
     }
@@ -166,3 +146,19 @@
         }
     }
 }
+
+@include b(igx-calendar-picker) {
+    @extend %cal-picker-display !optional;
+
+    @include e(date) {
+        @extend %cal-picker-date !optional;
+    }
+
+    @include e(prev) {
+        @extend %cal-picker-arrow !optional;
+    }
+
+    @include e(next) {
+        @extend %cal-picker-arrow !optional;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 0ab80b3d6ca..65b3ac1af27 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -242,13 +242,6 @@
         background: --var($theme, 'content-background');
         overflow: hidden;
         outline: none;
-
-        &[dir='rtl'] {
-            .prev,
-            .next {
-                @extend %cal-picker-arrow--rtl;
-            }
-        }
     }
 
     %cal-display--vertical {
@@ -275,7 +268,7 @@
         display: flex;
         margin: $cal-header-date-margin;
 
-        .date-text {
+        > span {
             @include ellipsis();
         }
     }
@@ -284,14 +277,6 @@
         flex-flow: column nowrap;
     }
 
-    %cal-header-date-el--hover {
-        &:hover,
-        &:focus {
-            color: --var($theme, 'picker-text-hover-color');
-            cursor: pointer;
-        }
-    }
-
     %cal-picker-display {
         display: flex;
         height: em(56px);
@@ -311,15 +296,21 @@
         &:hover {
             color: --var($theme, 'picker-arrow-hover-color');
         }
-    }
 
-    %cal-picker-arrow--rtl {
-        transform: scaleX(-1);
+        [dir='rtl'] & {
+            transform: scaleX(-1);
+        }
     }
 
     %cal-picker-date {
         color: --var($theme, 'picker-text-color');
         text-align: center;
+
+        &:hover,
+        &:focus {
+            color: --var($theme, 'picker-text-hover-color');
+            cursor: pointer;
+        }
     }
 
     %cal-body-display {

From 71df04afce29ec347182e0ac84a38a3fff17df5a Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 22 Nov 2018 17:39:35 +0200
Subject: [PATCH 2/4] Update calendar.component.spec.ts

---
 .../src/lib/calendar/calendar.component.spec.ts                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
index f7772468efe..0c009cbb7b5 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
@@ -12,7 +12,7 @@ import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 
-fdescribe('IgxCalendar', () => {
+describe('IgxCalendar', () => {
     configureTestSuite();
     beforeEach(() => {
         TestBed.configureTestingModule({

From a70c1c58b40ad8bd2a0a98128092ce230222a439 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Fri, 23 Nov 2018 14:36:37 +0200
Subject: [PATCH 3/4] test(grid-filtering-ui): fix failing tests

---
 .../lib/grids/grid/grid-filtering-ui.spec.ts  | 128 +++++++++---------
 1 file changed, 65 insertions(+), 63 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
index 50867d14403..ad24434db6f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -6,8 +6,10 @@ import { Calendar } from '../../calendar/calendar';
 import { IgxInputDirective } from '../../directives/input/input.directive';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
-import { IgxFilteringOperand, IgxStringFilteringOperand,
-     FilteringExpressionsTree, FilteringLogic, IgxChipComponent } from '../../../public_api';
+import {
+    IgxFilteringOperand, IgxStringFilteringOperand,
+    FilteringExpressionsTree, FilteringLogic, IgxChipComponent
+} from '../../../public_api';
 import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -1201,7 +1203,7 @@ describe('IgxGrid - Filtering actions', () => {
         tick();
 
         let calendar = fix.debugElement.query(By.css('igx-calendar'));
-        const monthView = calendar.queryAll(By.css('.date__el'))[0];
+        const monthView = calendar.queryAll(By.css('.igx-calendar-picker__date'))[0];
         monthView.nativeElement.click();
         fix.detectChanges();
         tick();
@@ -1212,7 +1214,7 @@ describe('IgxGrid - Filtering actions', () => {
         tick();
 
         calendar = fix.debugElement.query(By.css('igx-calendar'));
-        const month = calendar.queryAll(By.css('.date__el'))[0];
+        const month = calendar.queryAll(By.css('.igx-calendar-picker__date'))[0];
 
         expect(month.nativeElement.textContent.trim()).toEqual('Jan');
     }));
@@ -1238,7 +1240,7 @@ describe('IgxGrid - Filtering actions', () => {
         tick();
 
         let calendar = fix.debugElement.query(By.css('igx-calendar'));
-        const monthView = calendar.queryAll(By.css('.date__el'))[1];
+        const monthView = calendar.queryAll(By.css('.igx-calendar-picker__date'))[1];
         monthView.nativeElement.click();
         fix.detectChanges();
         tick();
@@ -1249,7 +1251,7 @@ describe('IgxGrid - Filtering actions', () => {
         tick();
 
         calendar = fix.debugElement.query(By.css('igx-calendar'));
-        const month = calendar.queryAll(By.css('.date__el'))[1];
+        const month = calendar.queryAll(By.css('.igx-calendar-picker__date'))[1];
 
         const today = new Date(Date.now());
 
@@ -1525,28 +1527,28 @@ describe('IgxGrid - Filtering Row UI actions', () => {
     // TODO - add new tests based on the test plan in the spec.
 
     it('should render Filter chip for filterable columns and render empty cell for a column when filterable is set to false',
-    fakeAsync(() => {
-        const fix = TestBed.createComponent(IgxGridFilteringComponent);
-        fix.detectChanges();
-        tick(100);
-        const grid = fix.componentInstance.grid;
-        grid.width = '1500px';
-        fix.detectChanges();
-        const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
-        const filteringChips = fix.debugElement.queryAll(By.css('.igx-filtering-chips'));
-        expect(filteringCells.length).toBe(6);
-        expect(filteringChips.length).toBe(5);
-
-        let idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
-        expect(idCellChips.length).toBe(0);
-
-        grid.getColumnByName('ID').filterable = true;
-        fix.detectChanges();
-        tick(100);
-
-        idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
-        expect(idCellChips.length).toBe(1);
-    }));
+        fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridFilteringComponent);
+            fix.detectChanges();
+            tick(100);
+            const grid = fix.componentInstance.grid;
+            grid.width = '1500px';
+            fix.detectChanges();
+            const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
+            const filteringChips = fix.debugElement.queryAll(By.css('.igx-filtering-chips'));
+            expect(filteringCells.length).toBe(6);
+            expect(filteringChips.length).toBe(5);
+
+            let idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
+            expect(idCellChips.length).toBe(0);
+
+            grid.getColumnByName('ID').filterable = true;
+            fix.detectChanges();
+            tick(100);
+
+            idCellChips = filteringCells[0].queryAll(By.css('.igx-filtering-chips'));
+            expect(idCellChips.length).toBe(1);
+        }));
 
     it('should render correct input and dropdown in filter row for different column types', fakeAsync(() => {
         const fix = TestBed.createComponent(IgxGridFilteringComponent);
@@ -1737,36 +1739,36 @@ describe('IgxGrid - Filtering Row UI actions', () => {
     }));
 
     it('should not render chip in header if condition that requires value is applied and then value is cleared in filter row.',
-    fakeAsync(() => {
-        const fix = TestBed.createComponent(IgxGridFilteringComponent);
-        fix.detectChanges();
-        let filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
-        const stringCellChip = filteringCells[1].query(By.css('igx-chip'));
-        const grid = fix.componentInstance.grid;
-        // filter string col
-        stringCellChip.nativeElement.click();
-        tick();
-        fix.detectChanges();
-        GridFunctions.filterBy('Starts With', 'I', fix);
-        // remote text from input
-        const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
-        const input = filterUIRow.query(By.directive(IgxInputDirective));
-        input.nativeElement.value = null;
-        const exprList = filterUIRow.componentInstance.expressionsList;
-        exprList[0].expression.searchVal = null;
-        tick();
-        fix.detectChanges();
-        GridFunctions.closeFilterRow(fix);
-
-        // check no condition is applied
-        expect(grid.rowList.length).toEqual(8);
-
-        filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
-        const stringCellText = filteringCells[1].query(By.css('igx-chip')).query(By.css('.igx-chip__content'));
-        expect(stringCellText.nativeElement.textContent).toBe('Filter');
-    }));
-
-    it('Should correctly update empty filter cells when scrolling horizontally.', async() => {
+        fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridFilteringComponent);
+            fix.detectChanges();
+            let filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
+            const stringCellChip = filteringCells[1].query(By.css('igx-chip'));
+            const grid = fix.componentInstance.grid;
+            // filter string col
+            stringCellChip.nativeElement.click();
+            tick();
+            fix.detectChanges();
+            GridFunctions.filterBy('Starts With', 'I', fix);
+            // remote text from input
+            const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            const input = filterUIRow.query(By.directive(IgxInputDirective));
+            input.nativeElement.value = null;
+            const exprList = filterUIRow.componentInstance.expressionsList;
+            exprList[0].expression.searchVal = null;
+            tick();
+            fix.detectChanges();
+            GridFunctions.closeFilterRow(fix);
+
+            // check no condition is applied
+            expect(grid.rowList.length).toEqual(8);
+
+            filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
+            const stringCellText = filteringCells[1].query(By.css('igx-chip')).query(By.css('.igx-chip__content'));
+            expect(stringCellText.nativeElement.textContent).toBe('Filter');
+        }));
+
+    it('Should correctly update empty filter cells when scrolling horizontally.', async () => {
         const fix = TestBed.createComponent(IgxGridFilteringScrollComponent);
         const grid = fix.componentInstance.grid;
         fix.detectChanges();
@@ -1838,7 +1840,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         fix.detectChanges();
 
         const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent));
-        const stringCellChip =  initialChips[0].nativeElement;
+        const stringCellChip = initialChips[0].nativeElement;
 
         stringCellChip.click();
         fix.detectChanges();
@@ -2251,7 +2253,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         const grid = fix.componentInstance.grid;
         fix.detectChanges();
         grid.getColumnByName('ProductName').groupable = true;
-        grid.groupBy({fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()});
+        grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() });
         fix.detectChanges();
 
         const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
@@ -2475,7 +2477,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
 export class CustomFilter extends IgxFilteringOperand {
     private static _instance: CustomFilter;
 
-    private constructor () {
+    private constructor() {
         super();
         this.operations = [{
             name: 'custom',
@@ -2786,7 +2788,7 @@ function isNextYear(date: Date, year: number): boolean {
 function checkUIForType(type: string, elem: DebugElement) {
     let expectedConditions;
     let expectedInputType;
-    const isReadOnly = type === 'bool' ?  true : false;
+    const isReadOnly = type === 'bool' ? true : false;
     switch (type) {
         case 'string':
             expectedConditions = IgxStringFilteringOperand.instance().operations;
@@ -2803,7 +2805,7 @@ function checkUIForType(type: string, elem: DebugElement) {
         case 'bool':
             expectedConditions = IgxBooleanFilteringOperand.instance().operations;
             expectedInputType = 'text';
-        break;
+            break;
     }
     GridFunctions.openFilterDD(elem);
     const ddList = elem.query(By.css('div.igx-drop-down__list.igx-toggle'));

From fb8480761e2752fb7db718b4230501ca2c1ace5e Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Fri, 23 Nov 2018 15:22:15 +0200
Subject: [PATCH 4/4] test(grid-filtering-ui): fix linting erros

---
 .../src/lib/grids/grid/grid-filtering-ui.spec.ts           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
index ad24434db6f..0b93213f143 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -2253,7 +2253,12 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         const grid = fix.componentInstance.grid;
         fix.detectChanges();
         grid.getColumnByName('ProductName').groupable = true;
-        grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() });
+        grid.groupBy({
+            fieldName: 'ProductName',
+            dir: SortingDirection.Asc,
+            ignoreCase: false,
+            strategy: DefaultSortingStrategy.instance()
+        });
         fix.detectChanges();
 
         const filteringCells = fix.debugElement.queryAll(By.css('igx-grid-filtering-cell'));