Merge branch 'master' into mevtimov/feat-7344-master

ChronosSF · web-flow · commit 5c24c880b847 · 2020-11-03T17:09:07.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/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
@@ -477,17 +477,34 @@
 }
 
 @function igx-generate-series-colors($palette) {
+    $color-blind: if(global-variable-exists('_igx-enhanced-accessibility'), $_igx-enhanced-accessibility, false);
+
+    @if $color-blind {
+        @return (
+            rgb(86, 180, 233),
+            rgb(0, 158, 115),
+            rgb(240, 228, 68),
+            rgb(213, 94, 0),
+            rgb(214, 0, 254),
+            rgb(0, 73, 159),
+            rgb(230, 159, 0),
+            rgb(0, 0, 0),
+            rgb(132, 240, 223),
+            rgb(115, 86, 86),
+        );
+    }
+
     @return (
-        igx-color($palette, 'primary'),
-        igx-color($palette, 'secondary'),
-        rgb(249, 98, 50),
-        rgb(60, 189, 201),
-        rgb(220, 63, 118),
-        rgb(255, 152, 0),
-        rgb(78, 98, 207),
-        rgb(84, 194, 90),
-        rgb(121, 85, 72),
-        rgb(154, 154, 154)
+        rgb(157, 231, 114),
+        rgb(139, 91, 177),
+        rgb(109, 177, 255),
+        rgb(154, 242, 228),
+        rgb(238, 88, 121),
+        rgb(115, 86, 86),
+        rgb(247, 210, 98),
+        rgb(168, 168, 183),
+        rgb(224, 81, 169),
+        rgb(248, 161, 95),
     );
 }
 
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/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -88,20 +88,24 @@
 
 /// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
 /// @param {string} $direction [ltr] - Sets the layout direction. Can be 'ltr' or 'rtl'.
+/// @param {boolean} $enhanced-accesibility [false] - Switches component colors and other properties to more accessible values.
 /// @param {color} $foreground-color [0, 0, 0, .87] - Sets the value of the global $igx-foreground-color used in all typography styles.
 /// @requires {mixin} igx-typography
 /// @requires {mixin} igx-vhelper
 /// @requires {mixin} igx-print-layout
 @mixin igx-core(
     $print-layout: true,
     $direction: ltr,
+    $enhanced-accessibility: false
 ) {
     @if $direction != ltr and $direction != rtl {
         $direction: ltr !global;
     } @else {
         $direction: $direction !global;
     }
 
+    $_igx-enhanced-accessibility: $enhanced-accessibility !global;
+
     @include igx-typography();
     @include igx-vhelper();
 
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;
+}
