Merging 6.2.x into master (#3019)

* feat(grid, chip): add display density DI token to igxGrid and igxChip * Resolving confilcts related to the new structure(grids ->grid) * Fixing styling issue * Adding event arguments for DenistyChanged * Renaming IDisplayDenisty to IDisplayDenistyOptions and setting IDensityChangedEventArgs type to be DisplayDenisty * Trigger onDensityChanged only for components that do not have displayDenisty explicitly set when the global denisty is changed * Adding displayDenisty DI in tree grid constructor * Group by chips are now affected from the global display denisty option * fix(igxGrid): dirty check only checks if value exists, #2940 * fix(igx-grid): Open date-picker only if condition is not unary, #2937 * Summaries display denisty classes are now correctly applied * Removing dsiplayDenisty property since it is not needed any more * fix(igx-grid): Clear filter when value is cleared from input, #2945 * test(treeGrid): Update treeGrid Keyboard navigation tests #2953 * Improve keyboard navigation in filtering (#2964) * fix(igx-grid): Improve keyboard navigation in filtering, #2951 * fix(igx-grid): Get scroll from first row, when there is one, #2951 * chore(igx-grid): Refactor code, #2951 * chore(igx-grid): Add cases for groupbyrow and pinned columns, #2951 * chore(igx-grid): Fix lint errors, #2951 * feat(igx-grid): Close filter row on Esc, #2979 * test(igx-grid): Add test, #2979 * chore(*): Merging master into 6.2.x * Sorting strategy merge 6.2.x (#2998) * feat(grid sorting): Merging the new sorting strategy into 6.2.x #2734 * chore(*): Adding missing imports to grid-selection tests * chore(*): More test import fixes * chore(*): Applying the groupby changes with the new sorting strategy * chore(*): Resolving the column moving test issue * chore(*): This should be it with the test fixes * chore(*): Removing the fdescribe * Add igxDropDown maxHeight input (#3005) * feat(igxDropDown): introduce itemsMaxHeight property #3001 * test(igxDropDown): test for max height #3001 * docs(igxDropDown): changelog update #3001 * test(igxCombo): adjust tests according to new dropdown structure #3001 * test(igxDropDown): add more tests #3001 * fix(grid): MultiColumn headers should not be grouped #2944 (#2970) * chore(*): Fixing the demos * feat(themes): add theme schemas (#3006) * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): create schemas for more comopnents * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): create schemas for more comopnents * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): create schemas for more comopnents * refactor(themes): introduce presets as basis for component themes * refactor(themes): create schemas for more comopnents * refactor(themes): add schemas for the remaining component themes * refactor(themes): change presets to schemas * fix(themes): value resolver always returns string * refactor(themes): remove all $default-theme references * docs(themes): add docs for newly introduced functions * refactor(demos): update demos theme * build(themes): fix css theme not building * refactor(themes): optimize palette generation * refactor(combo) - navigation (#2999) * refactor(combo): refactor combo navigation, WIP * refactor(combo): refactor combo navigation * refactor(combo): add comments, trim, remove console.log * refactor(combo): add comments, trim, remove console.log * chore(combo): adjust failing tests * refactor(igxCombo): remove focusItem, use super.navigateItem instead * refactor(igxCombo): add navigate virtual * refactor(igxCombo): add focus add button + findFocusableIndex methods * refactor(igxCombo): adjust incorrect `navigateItem` calls * refactor(igxCombo): first header is not loaded and focus search - scroll, #2999 * The grid should update groupsRecords before raising the onGroupingDone event - 6.2.x, #2967 (#3009) * fix(groupBy): update the state before raising onGroupingDone event #2967 * fix(groupBy): calling detectChanges instead of ngDoCheck #2967
IgniteUI · Nov 19, 2018 · ddf7802 · ddf7802
1 parent 16f6fa5
commit ddf7802
Show file tree

Hide file tree

Showing 104 changed files with 2,103 additions and 1,099 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 6.2.1
+- `igx-drop-down`:
+    - Added a new property `maxHeight`, defining the max height of the drop down.
+
 ## 6.2.0
 - Updated typography following the Material guidelines. Type system is now also optional and can be applied via class to the desired containers. [#2112](https://github.com/IgniteUI/igniteui-angular/pull/2112)
   - **Breaking change:** Applications using Ignite UI for Angular now require the `igx-typography` class to be applied on wrapping element, like the body element for instance.

diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -290,6 +290,7 @@ describe('igxCombo', () => {
             expect(dropdown.verticalScrollContainer.state.startIndex).toEqual(0);
             expect(IgxDropDownBase.prototype.navigatePrev).toHaveBeenCalledTimes(1);
         }));
+
         it('Should properly call dropdown navigateNext with virutal items', ( async () => {
             const fix = TestBed.createComponent(IgxComboSampleComponent);
             fix.detectChanges();
@@ -300,7 +301,8 @@ describe('igxCombo', () => {
             expect(dropdown.focusedItem).toBeFalsy();
             expect(dropdown.verticalScrollContainer).toBeDefined();
             const mockClick = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
-            const virtualMock = spyOn<any>(dropdown, 'navigateVirtualItem').and.callThrough();
+            const virtualMockUP = spyOn<any>(dropdown, 'navigateUp').and.callThrough();
+            const virtualMockDOWN = spyOn<any>(dropdown, 'navigateDown').and.callThrough();
             // expect(mockFn).toThrow();
             expect(dropdown.focusedItem).toEqual(null);
             expect(combo.collapsed).toBeTruthy();
@@ -321,15 +323,15 @@ describe('igxCombo', () => {
             dropdown.navigateItem(-1);
             await wait(30);
             fix.detectChanges();
-            expect(virtualMock).toHaveBeenCalledTimes(1);
+            expect(virtualMockDOWN).toHaveBeenCalledTimes(0);
             lastItem.clicked(mockClick);
             await wait(30);
             fix.detectChanges();
             expect(dropdown.focusedItem).toEqual(lastItem);
             dropdown.navigateItem(-1, Navigate.Down);
             await wait(30);
             fix.detectChanges();
-            expect(virtualMock).toHaveBeenCalledTimes(2);
+            expect(virtualMockDOWN).toHaveBeenCalledTimes(1);
             combo.searchValue = 'New';
             await wait(30);
             lastItem.clicked(mockClick);
@@ -339,14 +341,14 @@ describe('igxCombo', () => {
             expect(combo.customValueFlag && combo.searchValue !== '').toBeTruthy();
             dropdown.navigateItem(-1, Navigate.Down);
             await wait(30);
-            expect(virtualMock).toHaveBeenCalledTimes(2);
+            expect(virtualMockDOWN).toHaveBeenCalledTimes(2);
             lastItem.value = dropdown.verticalScrollContainer.igxForOf[dropdown.verticalScrollContainer.igxForOf.length - 1];
             lastItem.clicked(mockClick);
             await wait(30);
             fix.detectChanges();
             expect(dropdown.focusedItem).toEqual(lastItem);
             dropdown.navigateItem(-1, Navigate.Down);
-            expect(virtualMock).toHaveBeenCalledTimes(2);
+            expect(virtualMockDOWN).toHaveBeenCalledTimes(3);
 
             // TEST move from first item
             dropdown.verticalScrollContainer.scrollTo(0);
@@ -362,12 +364,13 @@ describe('igxCombo', () => {
             dropdown.navigateItem(-1);
             await wait(30);
             fix.detectChanges();
-            expect(virtualMock).toHaveBeenCalledTimes(3);
+            expect(virtualMockDOWN).toHaveBeenCalledTimes(3);
             spyOn(dropdown, 'onBlur').and.callThrough();
             dropdown.navigateItem(-1, Navigate.Up);
             await wait(30);
             fix.detectChanges();
-            expect(virtualMock).toHaveBeenCalledTimes(4);
+            expect(virtualMockUP).toHaveBeenCalledTimes(1);
+            expect(virtualMockDOWN).toHaveBeenCalledTimes(3);
         }));
         it('Should call toggle properly', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboSampleComponent);
@@ -435,14 +438,18 @@ describe('igxCombo', () => {
             combo.toggle();
             tick();
             fix.detectChanges();
-            const virtualSpy = spyOn<any>(dropdown, 'navigateVirtualItem');
+            const virtualSpyUP = spyOn<any>(dropdown, 'navigateUp');
+            const virtualSpyDOWN = spyOn<any>(dropdown, 'navigateDown');
             spyOn(IgxComboDropDownComponent.prototype, 'navigateItem').and.callThrough();
             dropdown.navigateItem(0);
             fix.detectChanges();
             expect(IgxComboDropDownComponent.prototype.navigateItem).toHaveBeenCalledTimes(1);
-            dropdown.navigateItem(-1);
+            dropdown.navigateItem(-1, Navigate.Up);
             expect(IgxComboDropDownComponent.prototype.navigateItem).toHaveBeenCalledTimes(2);
-            expect(virtualSpy).toHaveBeenCalled();
+            dropdown.navigateItem(-1, Navigate.Down);
+            expect(IgxComboDropDownComponent.prototype.navigateItem).toHaveBeenCalledTimes(3);
+            expect(virtualSpyDOWN).toHaveBeenCalled();
+            expect(virtualSpyUP).toHaveBeenCalled();
         }));
         it('Should handle handleKeyDown calls', () => {
             const fix = TestBed.createComponent(IgxComboSampleComponent);
@@ -1583,13 +1590,10 @@ describe('igxCombo', () => {
             expect(inputGroupBorder.classList.contains(CSS_CLASS_INPUTGROUP_BORDER)).toBeTruthy();
             expect(inputGroupBorder.childElementCount).toEqual(0);
 
-            const dropDownWrapper = comboElement.children[1];
-            expect(dropDownWrapper.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy();
-            expect(dropDownWrapper.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth);
-            expect(dropDownWrapper.childElementCount).toEqual(1);
-
-            const dropDownElement = dropDownWrapper.children[0];
+            const dropDownElement = comboElement.children[1];
+            expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy();
             expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy();
+            expect(dropDownElement.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(defaultComboDDWidth);
             expect(dropDownElement.childElementCount).toEqual(1);
 
             const dropDownList = dropDownElement.children[0];
@@ -1784,6 +1788,7 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             expect(selectedItem.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
         }));
+
         it('Should render focused items properly', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboTestComponent);
             fixture.detectChanges();
@@ -1807,6 +1812,7 @@ describe('igxCombo', () => {
             expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
             expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy();
         }));
+
         it('Should render properly focused items when grouped', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboSampleComponent);
             fixture.detectChanges();

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
@@ -72,6 +72,8 @@
         @return lighten(desaturate($color, 12.9), 9.1);
     } @else if ($saturation == 400) {
         @return lighten(desaturate($color, 6.6), 4.1);
+    } @else if ($saturation == 500) {
+        @return $color;
     } @else if ($saturation == 600) {
         @return darken(saturate($color, 12.4), 5.1);
     } @else if ($saturation == 700) {
@@ -230,41 +232,50 @@
 /// @access private
 /// @group Palettes
 /// @requires {function} gen-color
+/// @requires {function} text-contrast
+/// @requires {function} extend
 /// @param {Color} $color - The base color used to generate the palette.
-/// @returns {Map} - A map consisting of 26 color variations.
-@function generate-palette($color) {
-    @return (
-        50: gen-color($color, 50),
-        100: gen-color($color, 100),
-        200: gen-color($color, 200),
-        300: gen-color($color, 300),
-        400: gen-color($color, 400),
-        500: $color,
-        600: gen-color($color, 600),
-        700: gen-color($color, 700),
-        800: gen-color($color, 800),
-        900: gen-color($color, 900),
-        A100: gen-color($color, 'A100'),
-        A200: gen-color($color, 'A200'),
-        A400: gen-color($color, 'A400'),
-        A700: gen-color($color, 'A700'),
-        contrast: (
-            50: text-contrast(gen-color($color, 50)),
-            100: text-contrast(gen-color($color, 100)),
-            200: text-contrast(gen-color($color, 200)),
-            300: text-contrast(gen-color($color, 300)),
-            400: text-contrast(gen-color($color, 400)),
-            500: text-contrast($color),
-            600: text-contrast(gen-color($color, 600)),
-            700: text-contrast(gen-color($color, 700)),
-            800: text-contrast(gen-color($color, 800)),
-            900: text-contrast(gen-color($color, 900)),
-            A100: text-contrast(gen-color($color, 'A100')),
-            A200: text-contrast(gen-color($color, 'A200')),
-            A400: text-contrast(gen-color($color, 'A400')),
-            A700: text-contrast(gen-color($color, 'A700')),
-        )
-    );
+/// @param {List} $saturations - The saturation list of color variants.
+//// Based on the Material color system.
+/// @returns {Map} - A map consisting of 14 color variations and 14
+/// text contrast colors for each variation.
+@function generate-palette($color, $saturations) {
+    $shades: ();
+    $contrasts: ();
+
+    @each $saturation in $saturations {
+        $shade: gen-color($color, $saturation);
+        $contrast: text-contrast($shade);
+
+        $shades: map-merge($shades, ($saturation: $shade));
+        $contrasts: map-merge($contrasts, ($saturation: $contrast));
+    }
+    @return extend($shades, (contrast: $contrasts));
+}
+
+/// Generates grayscale color palette from a color.
+/// @access private
+/// @group Palettes
+/// @requires {function} text-contrast
+/// @requires {function} extend
+/// @param {Color} $color - The base color used to generate the palette.
+/// @param {Map} $shades - A map of variations as keys and opacities as values.
+/// Based on the Material color system.
+/// @returns {Map} - A map consisting of 10 grayscale color variations and 10
+/// text contrast colors for each variation.
+@function grayscale-palette($color, $shades) {
+    $colors: ();
+    $contrasts: ();
+
+    @each $saturation, $opacity in $shades {
+        $shade: rgba(grayscale($color), $opacity);
+        $contrast: text-contrast(hexrgba($shade));
+
+        $colors: map-merge($colors, ($saturation: $shade));
+        $contrasts: map-merge($contrasts, ($saturation: $contrast));
+    }
+
+    @return extend($colors, (contrast: $contrasts));
 }
 
 /// Generates a color palette.
@@ -277,6 +288,7 @@
 /// @param {Color} $success [#4eb862] - The success color used throughout the application.
 /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application.
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
+/// @param {Color} $grays [#000] - The color used for generating the grayscale palette.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
 @function igx-palette(
@@ -285,10 +297,15 @@
     $info: #1377d5,
     $success: #4eb862,
     $warn: #fbb13c,
-    $error: #ff134a
+    $error: #ff134a,
+    $grays: #000
 ) {
-    $primary-palette: generate-palette($primary);
-    $secondary-palette: generate-palette($secondary);
+    $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
+    $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87);
+
+    $primary-palette: generate-palette($primary, $saturations);
+    $secondary-palette: generate-palette($secondary, $saturations);
+    $grayscale-palette: grayscale-palette($grays, $shades);
 
     // @debug 'Primary Colors Palette: #{$primary-palette}';
     // @debug 'secondary Colors Palette: #{$secondary-palette}';
@@ -297,34 +314,11 @@
     @return (
         primary: $primary-palette,
         secondary: $secondary-palette,
+        grays: $grayscale-palette,
         info: (500: $info),
         success: (500: $success),
         warn: (500: $warn),
-        error: (500: $error),
-        grays: (
-            50: rgba(0, 0, 0, .02),
-            100: rgba(0, 0, 0, .04),
-            200: rgba(0, 0, 0, .08),
-            300: rgba(0, 0, 0, .12),
-            400: rgba(0, 0, 0, .26),
-            500: rgba(0, 0, 0, .38),
-            600: rgba(0, 0, 0, .54),
-            700: rgba(0, 0, 0, .62),
-            800: rgba(0, 0, 0, .74),
-            900: rgba(0, 0, 0, .87),
-            contrast: (
-                50: text-contrast(hexrgba(rgba(0, 0, 0, .02))),
-                100: text-contrast(hexrgba(rgba(0, 0, 0, .04))),
-                200: text-contrast(hexrgba(rgba(0, 0, 0, .08))),
-                300: text-contrast(hexrgba(rgba(0, 0, 0, .12))),
-                400: text-contrast(hexrgba(rgba(0, 0, 0, .26))),
-                500: text-contrast(hexrgba(rgba(0, 0, 0, .38))),
-                600: text-contrast(hexrgba(rgba(0, 0, 0, .54))),
-                700: text-contrast(hexrgba(rgba(0, 0, 0, .62))),
-                800: text-contrast(hexrgba(rgba(0, 0, 0, .74))),
-                900: text-contrast(hexrgba(rgba(0, 0, 0, .87))),
-            )
-        )
+        error: (500: $error)
     );
 }
 
@@ -379,9 +373,9 @@
 }
 
 /// Splits a string into a list by a given separator.
+/// @access private
 /// @param {string} $string - The string to split.
 /// @param {string} $separator - The string separator to split the string by.
-///
 @function str-split($string, $separator) {
     $split-arr: ();
     $index : str-index($string, $separator);
@@ -395,7 +389,7 @@
     @return $split-arr;
 }
 
-/// @ignore
+// @ignore
 @function get-theme($themes, $theme)  {
     @if type-of($themes) == 'map' and map-has-key($themes, $theme) {
         @return map-get($themes, $theme);
@@ -407,3 +401,83 @@
         @return call((#{$theme}-theme));
     }
 }
+
+/// Returns a value for a given instruction map, where the
+/// keys of the map are the names of the functions to be called,
+/// and the value for a given key is the arguments the function
+/// should be called with.
+/// The instruction set is executed left-to-right. The output of
+/// the first instruction is then passed as input to the next, and so on.
+/// @access private
+/// @param {Map} $ctx - The instruction map to be used.
+/// @param {List | Map} $extra [null] - Additional arguments to be passed during function calls.
+/// Will only be applied for `igx-color` and `igx-contrast-color` functions.
+/// @example scss Resolve `igx-color` and apply 80% opacity
+/// $instructions: (
+///   igx-color: ('primary', 500),
+///   rgba: .2
+/// );
+/// // $some-palette is a palette we pass as extra arguments
+/// $resolved-color: resolve-value($instructions, $some-palette);
+///
+@function resolve-value($ctx, $extra: null) {
+    $result: null;
+    @each $fn, $args in $ctx {
+        @if function-exists($fn) {
+            @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') {
+                $result: call(get-function($fn), $extra, $args...);
+            } @else if $result != null {
+                $result: call(get-function($fn), $result, $args...)
+            } @else {
+                $result: call(get-function($fn), $args...)
+            }
+        }
+    }
+    @return $result;
+}
+
+/// Applies an `igx-palette` to a given theme schema.
+/// @access private
+/// @param {Map} $schema - A theme schema.
+/// @param {Map} $palette - An igx-palette map.
+/// @requires {function} resolve-value
+/// @example scss Apply an `igx-palette` to theme schema
+///   $custom-palette: igx-palette($primary: red, $secondary: blue);
+///   $custom-schema: (
+///     my-color: (
+///        igx-color: ('primary', 800),
+///        rgba: .5
+///     ),
+///     roundness: 5px
+///   );
+///   $theme: apply-palette($custom-schema, $custom-palette); // A map with palette values resolved.
+/// @returns {Map} - A map with the resolved palette values.
+@function apply-palette($schema, $palette) {
+    $result: ();
+    @each $key, $value in $schema {
+        @if type-of($value) == 'map' {
+            $result: extend($result, (#{$key}: resolve-value($value, $palette)));
+        } @else {
+            $result: extend($result, (#{$key}: $value));
+        }
+    }
+    @return $result;
+}
+
+/// Returns true if the scope where it's called
+/// is the root of the document.
+/// @access private
+/// @example scss Check if the current scope is root
+///   @mixin smart-mixin() {
+///     $scope: if(is-root(), ':root', '&');
+///
+///     #{$scope} {
+///       /* style rules here */
+///     }
+///   }
+///
+@function is-root {
+    @each $selector in & {
+        @return if($selector == null, true, false);
+    }
+}