Merge branch 'master' into dkamburov/expose-totalItemCount

Author: ChronosSF

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -15,6 +15,7 @@ import { IgxSuffixDirective } from './../directives/suffix/suffix.directive';
 import { DisplayDensity } from '../core/displayDensity';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { ControlsFunction } from '../test-utils/controls-functions.spec';
 
 @Component({
     template: `
@@ -129,7 +130,7 @@ describe('IgxChip', () => {
 
         it('should render remove button when enabled after the content inside the chip', () => {
             const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
-            const chipRemoveButton = HelperTestFunctions.getDeleteButton(fix);
+            const chipRemoveButton = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
 
             // For this second chip there are 3 elements. The prefix, content span and the remove button icon .
             expect(chipElems[1].nativeElement.children[0].children.length).toEqual(4);
@@ -241,10 +242,10 @@ describe('IgxChip', () => {
 
         it('should delete chip when space button is pressed on delete button', () => {
             HelperTestFunctions.verifyChipsCount(fix, 4);
-
-            const deleteButtonElement = HelperTestFunctions.getDeleteButton(fix);
+            const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+            const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
             // Removes chip with id City, because country chip is unremovable
-            UIInteractions.triggerKeyDownEvtUponElem(' ', deleteButtonElement.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem(' ', deleteButtonElement, true);
             fix.detectChanges();
 
             HelperTestFunctions.verifyChipsCount(fix, 3);
@@ -257,9 +258,10 @@ describe('IgxChip', () => {
         it('should delete chip when enter button is pressed on delete button', () => {
             HelperTestFunctions.verifyChipsCount(fix, 4);
 
-            const deleteButtonElement = HelperTestFunctions.getDeleteButton(fix);
+            const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+            const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
             // Removes chip with id City, because country chip is unremovable
-            UIInteractions.triggerKeyDownEvtUponElem('Enter', deleteButtonElement.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('Enter', deleteButtonElement, true);
             fix.detectChanges();
 
             HelperTestFunctions.verifyChipsCount(fix, 3);
@@ -360,7 +362,8 @@ describe('IgxChip', () => {
             spyOn(secondChipComp.onSelection, 'emit');
             spyOn(secondChipComp.onSelectionDone, 'emit');
 
-            const chipRemoveButton = HelperTestFunctions.getDeleteButton(fix).nativeElement;
+            const chipRemoveButton = ControlsFunction.getChipRemoveButton(secondChipComp.chipArea.nativeElement);
+
             const removeBtnTop = chipRemoveButton.getBoundingClientRect().top;
             const removeBtnLeft = chipRemoveButton.getBoundingClientRect().left;
 
@@ -400,12 +403,6 @@ describe('IgxChip', () => {
 });
 
 class HelperTestFunctions {
-    public static CHIP_REMOVE_BUTTON = '.igx-chip__remove';
-
-    public static getDeleteButton(fix, index = 0) {
-        return fix.debugElement.queryAll(By.css(HelperTestFunctions.CHIP_REMOVE_BUTTON))[index];
-    }
-
     public static verifyChipsCount(fix, count) {
         const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
         expect(chipComponents.length).toEqual(count);

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -170,15 +170,20 @@
 /// Generates CSS variables for a given palette.
 /// @access private
 /// @param {Map} $palette - The igx palette to use to generate css variables for.
+/// @param {Map} $contrast [false] - Specifies if contrast colors should be generated for each color in the palette.
 ///
 /// @example scss Generate css variables for the `$default-palette`.
 ///   @include css-vars-from-palette($default-palette);
 ///
-@mixin css-vars-from-palette($palette) {
+@mixin css-vars-from-palette($palette, $contrast: false) {
     @each $palette-name, $sub-palette in $palette {
         @each $variant, $color in $sub-palette {
+            @if($contrast) {
+                $color: text-contrast($color);
+            }
+
             @if type-of($color) != 'map' {
-                --igx-#{$palette-name}-#{$variant}: #{$color};
+                --igx-#{$palette-name}-#{$variant}#{if($contrast, -contrast, null)}: #{$color};
             }
         }
     }
@@ -187,16 +192,21 @@
 /// Generates CSS variables for a given palette.
 /// @access public
 /// @param {Map} $palette - The igx palette to use to generate css variables for.
+/// @param {Map} $contrast [false] - Specifies if the mixin outputs contrast colors for each color in the palette.
 ///
 /// @example scss Generate css variables for the `$default-palette`.
 ///   @include css-vars-from-palette($default-palette);
 ///
 /// @requires {mixin} css-vars-from-palette
-@mixin igx-palette-vars($palette) {
+@mixin igx-palette-vars($palette, $contrast: false) {
     $scope: if(is-root(), ':root', '&');
 
     #{$scope} {
         @include css-vars-from-palette($palette);
+
+        @if($contrast) {
+            @include css-vars-from-palette($palette, $contrast: true);
+        }
     }
 }
 

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -18,6 +18,7 @@ import {
     IgxGridExternalAdvancedFilteringComponent,
     IgxGridAdvancedFilteringBindingComponent
 } from '../../test-utils/grid-samples.spec';
+import { ControlsFunction } from '../../test-utils/controls-functions.spec';
 
 const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and';
 const ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS = 'igx-filter-tree__line--or';
@@ -2441,7 +2442,7 @@ describe('IgxGrid - Advanced Filtering #grid', () => {
 
                 // Press 'Enter' on the remove icon of the second chip.
                 const chip = GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, [1]);
-                const removeIcon = chip.querySelector('.igx-chip__remove');
+                const removeIcon = ControlsFunction.getChipRemoveButton(chip);
                 UIInteractions.simulateKeyDownEvent(removeIcon, 'Enter');
                 tick(200);
                 fix.detectChanges();