fix(calendar): make all class names unique

Closes #2287
IgniteUI · Nov 22, 2018 · 3d68211 · 3d68211
1 parent a658e00
commit 3d68211
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {