fix(calendar): make all class names unique

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>

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -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];
 

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;
+    }
+}

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 {

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,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'));
@@ -2475,7 +2482,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 +2793,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 +2810,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'));