Merge branch 'master' into simeonoff/dv-palettes

kdinev · web-flow · commit 3bdd84825320 · 2020-11-02T15:18:14.000+02:00
diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.html b/projects/igniteui-angular/src/lib/badge/badge.component.html
@@ -1,4 +1,2 @@
-<div class="igx-badge__circle" [ngClass]="setClasses()" [attr.aria-roledescription]="roleDescription">
-    <span *ngIf="!icon" class="igx-badge__circle-value">{{value}}</span>
-    <igx-icon *ngIf="icon" fontSet="material">{{icon}}</igx-icon>
-</div>
+<span *ngIf="!icon" class="igx-badge__value">{{value}}</span>
+<igx-icon *ngIf="icon">{{icon}}</igx-icon>
diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts b/projects/igniteui-angular/src/lib/badge/badge.component.spec.ts
@@ -32,8 +32,8 @@ describe('Badge', () => {
         expect(badge.value).toBeTruthy();
         expect(badge.type).toBeTruthy();
 
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle--error'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--error'))).toBeTruthy();
 
         expect(badge.value).toMatch('22');
         expect(badge.type).toMatch('error');
@@ -63,9 +63,8 @@ describe('Badge', () => {
         expect(badge.value).toMatch('');
         expect(badge.icon).toBeFalsy();
 
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle--default'))).toBeTruthy();
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle--icon'))).toBeFalsy();
+        expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--icon'))).toBeFalsy();
     });
 
     it('Initializes badge with icon', () => {
@@ -77,8 +76,8 @@ describe('Badge', () => {
         expect(badge.type === IgxBadgeType.INFO).toBeTruthy();
         expect(badge.value === '').toBeTruthy();
 
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();
-        expect(fixture.debugElement.query(By.css('.igx-badge__circle--info'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--info'))).toBeTruthy();
     });
 
     it('Initializes badge with icon ARIA', () => {
@@ -89,7 +88,7 @@ describe('Badge', () => {
         const expectedDescription = `${badge.type} type badge with icon type ${badge.icon}`;
         expect(badge.roleDescription).toMatch(expectedDescription);
 
-        const container = fixture.nativeElement.querySelectorAll('.igx-badge__circle--default')[0];
+        const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
         expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
     });
 });
diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts
@@ -153,6 +153,7 @@ export class IgxBadgeComponent {
      * @hidden
      * @internal
      */
+    @HostBinding('attr.aria-roledescription')
     get roleDescription() {
         // tslint:disable-next-line:prefer-conditional-expression
         if (this.icon) {
@@ -163,45 +164,25 @@ export class IgxBadgeComponent {
         return this.type + ' badge type without value';
     }
 
-    /**
-     * Method which makes the name of the class more descriptive.
-     * This helps the styling of the badges.
-     * @hidden
-     * @internal
-     */
-    public setClasses() {
-        let classes = {};
+    @HostBinding('class.igx-badge--info')
+    public get infoClass() {
+        return this.type === IgxBadgeType.INFO;
+    }
 
-        switch (IgxBadgeType[this.type.toUpperCase()]) {
-            case IgxBadgeType.INFO:
-                classes = {
-                    [`${this.cssClass}__circle--info`]: true
-                };
-                break;
-            case IgxBadgeType.SUCCESS:
-                classes = {
-                    [`${this.cssClass}__circle--success`]: true
-                };
-                break;
-            case IgxBadgeType.WARNING:
-                classes = {
-                    [`${this.cssClass}__circle--warning`]: true
-                };
-                break;
-            case IgxBadgeType.ERROR:
-                classes = {
-                    [`${this.cssClass}__circle--error`]: true
-                };
-                break;
-            default:
-                classes = {
-                    [`${this.cssClass}__circle--default`]: true
-                };
-        }
+    @HostBinding('class.igx-badge--success')
+    public get successClass() {
+        return this.type === IgxBadgeType.SUCCESS;
+    }
 
-        return classes;
+    @HostBinding('class.igx-badge--warning')
+    public get warningClass() {
+        return this.type === IgxBadgeType.WARNING;
     }
 
+    @HostBinding('class.igx-badge--error')
+    public get errorClass() {
+        return this.type === IgxBadgeType.ERROR;
+    }
 }
 
 /**
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss
@@ -11,37 +11,28 @@
 
     @extend %igx-badge-display !optional;
 
-    @include e(circle) {
-        @extend %igx-badge-display !optional;
-        @extend %igx-badge--circle !optional;
-    }
-
-    @include e(circle-value) {
+    @include e(value) {
         @extend %igx-badge-value !optional;
     }
 
-    @include e(circle, $m: default) {
+    @include m(default) {
         @extend %igx-badge--default !optional;
     }
 
-    @include e(circle, $m: info) {
-        @extend %igx-badge-display !optional;
+    @include m(info) {
         @extend %igx-badge--info !optional;
     }
 
-    @include e(circle, $m: success) {
-        @extend %igx-badge-display !optional;
-        @extend %igx-circle--success !optional;
+    @include m(success) {
+        @extend %igx-badge--success !optional;
     }
 
-    @include e(circle, $m: warning) {
-        @extend %igx-badge-display !optional;
-        @extend %igx-circle--warn !optional;
+    @include m(warning) {
+        @extend %igx-badge--warn !optional;
     }
 
-    @include e(circle, $m: error) {
-        @extend %igx-badge-display !optional;
-        @extend %igx-circle--error !optional;
+    @include m(error) {
+        @extend %igx-badge--error !optional;
     }
 
     @include m(hidden) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -124,6 +124,13 @@
         font-weight: $badge-font-weight;
         color: --var($theme, 'text-color');
         line-height: 1;
+        background: --var($theme, 'background-color');
+        border-radius: --var($theme, 'border-radius');
+        box-shadow: --var($theme, 'shadow');
+        border-width: --var($theme, 'border-width');
+        border-color: --var($theme, 'border-color');
+        border-style: $border-type;
+        overflow: hidden;
 
         igx-icon {
             display: inline-flex;
@@ -142,32 +149,19 @@
         padding: $badge-value-padding;
     }
 
-    %igx-badge--circle {
-        border-radius: --var($theme, 'border-radius');
-        box-shadow: --var($theme, 'shadow');
-        border-width: --var($theme, 'border-width');
-        border-color: --var($theme, 'border-color');
-        border-style: $border-type;
-        overflow: hidden;
-    }
-
-    %igx-badge--default {
-        background: --var($theme, 'background-color');
-    }
-
-    %igx-circle--success {
+    %igx-badge--success {
         background: igx-color($palette, 'success');
     }
 
     %igx-badge--info {
         background: igx-color($palette, 'info');
     }
 
-    %igx-circle--warn {
+    %igx-badge--warn {
         background: igx-color($palette, 'warn');
     }
 
-    %igx-circle--error {
+    %igx-badge--error {
         background: igx-color($palette, 'error');
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -127,7 +127,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public get valuesLoadingTemplate() {
-        if (this.esf.grid.excelStyleLoadingValuesTemplateDirective) {
+        if (this.esf.grid?.excelStyleLoadingValuesTemplateDirective) {
             return this.esf.grid.excelStyleLoadingValuesTemplateDirective.template;
         } else {
             return this.defaultExcelStyleLoadingValuesTemplate;
@@ -136,6 +136,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
 
     constructor(public cdr: ChangeDetectorRef, public esf: IgxGridExcelStyleFilteringComponent) {
         esf.loadingStart.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.displayedListData = [];
             this.isLoading = true;
         });
         esf.loadingEnd.pipe(takeUntil(this.destroy$)).subscribe(() => {
diff --git a/src/app/badge/badge.sample.css b/src/app/badge/badge.sample.css
@@ -12,3 +12,9 @@
     height: 88px;
     align-items: center;
 }
+
+.badge-theme {
+    min-width: 15px;
+    width: 15px;
+    height: 15px;
+}
