Merging 6.2.x into master (#3038)

* 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 * fix(grid): update method _updateVScrollOffset to calculate top #2957 * fix(grid): update lint #2957 * feat(igx-grid): Close filter row on Esc, #2979 * fix(grid): Recalculate start index on _applyChanges #2957 * fix(grid): Update lint #2957 * test(igx-grid): Add test, #2979 * fix(IgxTreeGrid): refocus row when expand/collapse tree row #2935 * fix(IgxGrid): shound not toggle expand on arrowLeft when row is expanded #2950 * 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 * fix(grid): #2507 prevent scrolling on arrow keys (#2989) * fix(grid): #2507 prevent scrolling on arrow keys * fix(grid): #2507 prevent scrolling for default columns only * Feat - Combo - Add DisplayDensity Input to Combo and Drop Down (#3007) * feat(igxCombo): add display density to combo component, refactor template,#2410 * feat(igxCombo): add hidden to binding, add display: block, fix tests, #2410 * feat(igxCombo): move display styling in styles, remove hostbinding, #2410 * chore(*): Updating the PR template (#3036) * chore(*): Updating the PR template * chore(*): Addressing Stamen's comment * fix(grid): removing checks which prevent scrolling #2971 (#3022)
IgniteUI · Nov 20, 2018 · 856a0d3 · 856a0d3
1 parent ddf7802
commit 856a0d3
Show file tree

Hide file tree

Showing 11 changed files with 253 additions and 167 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,4 +1,20 @@
-Closes # .  
+Closes #  
 
-Additional information related to this pull request:
+### Additional information (check all that apply):
+ - [] Bug fix
+ - [] New functionality
+ - [] Documentation
+ - [] Demos
+ - [] CI/CD
 
+### Checklist:
+ - [] All relevant tags have been applied to this PR
+ - [] This PR includes unit tests covering all the new code
+ - [] This PR includes API docs for newly added methods/properties
+ - [] This PR includes `feature/README.MD` updates for the feature docs
+ - [] This PR includes general feature table updates in the root `README.MD`
+ - [] This PR includes `CHANGELOG.MD` updates for newly added functionality
+ - [] This PR contains breaking changes
+ - [] This PR includes `ng update` migrations for the breaking changes
+ - [] This PR includes behavioral changes and the feature specification has been updated with them
+
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -14,58 +14,58 @@
     {{ item[key] }}
 </ng-template>
 
-<div class="igx-combo" [style.width]="width" role="combobox" [attr.aria-expanded]="!dropdown.collapsed" aria-haspopup="listbox" [attr.aria-owns]="dropdown.id">
-    <igx-input-group [type]="type" (click)="onInputClick($event)">
-        <input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder" [disabled]="disabled" (blur)="onBlur($event)"/>
-        <igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
-            <igx-icon fontSet="material">clear</igx-icon>
-        </igx-suffix>
-        <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
-            <igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
-            <ng-template #toggleUp>
-                <igx-icon fontSet="material">arrow_drop_up</igx-icon>
-            </ng-template>
-        </igx-suffix>
+<igx-input-group [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
+    <input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder"
+        [disabled]="disabled" (blur)="onBlur($event)" />
+    <igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
+        <igx-icon fontSet="material">clear</igx-icon>
+    </igx-suffix>
+    <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
+        <igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
+        <ng-template #toggleUp>
+            <igx-icon fontSet="material">arrow_drop_up</igx-icon>
+        </ng-template>
+    </igx-suffix>
+</igx-input-group>
+<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
+    <igx-input-group [displayDensity]="displayDensity" class="igx-combo__search">
+        <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
+            (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
+            (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
+            [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
     </igx-input-group>
-    <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
-        <igx-input-group class="igx-combo__search">
-            <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)"
-                (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
-                [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
-        </igx-input-group>
-        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
-        </ng-container>
-        <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
-            [igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
-            <ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
-                [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight"
-                [igxForItemSize]="itemHeight" (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
-                <igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
-                    <ng-container *ngIf="!item.isHeader">
-                        <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
-                    </ng-container>
-                    <ng-container *ngIf="item.isHeader">
-                        <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="!item.isHeader">
-                        <ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
-                    </ng-container>
-                </igx-combo-item>
-            </ng-template>
-        </div>
-        <div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
-            <div class="igx-combo__empty" *ngIf="filteredData.length === 0">
-                <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
+    <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
+    </ng-container>
+    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
+        [igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
+        <ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
+            [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
+            (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
+            <igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
+                <ng-container *ngIf="!item.isHeader">
+                    <igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
+                </ng-container>
+                <ng-container *ngIf="item.isHeader">
+                    <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
                 </ng-container>
-            </div>
-            <igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item"
-                    igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false" [value]="'ADD ITEM'" role="button"
-                    aria-label="Add Item">
-                <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
+                <ng-container *ngIf="!item.isHeader">
+                    <ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
                 </ng-container>
             </igx-combo-item>
+        </ng-template>
+    </div>
+    <div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
+        <div class="igx-combo__empty" *ngIf="filteredData.length === 0">
+            <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
+            </ng-container>
         </div>
-        <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
-        </ng-container>
-    </igx-combo-drop-down>
-</div>
+        <igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
+            class="igx-combo__add-item" igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false"
+            [value]="'ADD ITEM'" role="button" aria-label="Add Item">
+            <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
+            </ng-container>
+        </igx-combo-item>
+    </div>
+    <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
+    </ng-container>
+</igx-combo-drop-down>
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -1545,18 +1545,16 @@ describe('igxCombo', () => {
             expect(comboWrapper.attributes.getNamedItem('ng-reflect-placeholder').nodeValue).toEqual('Items');
             expect(comboWrapper.attributes.getNamedItem('ng-reflect-data').nodeValue).toEqual('Item 1,Item 2,Item 3');
             expect(comboWrapper.attributes.getNamedItem('ng-reflect-filterable')).toBeTruthy();
-            expect(comboWrapper.childElementCount).toEqual(1);
-
-            const comboElement = comboWrapper.children[0];
-            expect(comboElement.attributes.getNamedItem('class').nodeValue).toEqual(CSS_CLASS_COMBO);
-            expect(comboElement.attributes.getNamedItem('role').nodeValue).toEqual('combobox');
-            expect(comboElement.style.width).toEqual(defaultComboWidth);
-            expect(comboElement.attributes.getNamedItem('aria-haspopup').nodeValue).toEqual('listbox');
-            expect(comboElement.attributes.getNamedItem('aria-expanded').nodeValue).toEqual('false');
-            expect(comboElement.attributes.getNamedItem('aria-owns').nodeValue).toEqual(fix.componentInstance.combo.dropdown.id);
-            expect(comboElement.childElementCount).toEqual(2);
-
-            const inputGroupElement = comboElement.children[0];
+            expect(comboWrapper.childElementCount).toEqual(2); // Input Group + Dropdown
+            expect(comboWrapper.attributes.getNamedItem('class').nodeValue).toEqual(CSS_CLASS_COMBO);
+            expect(comboWrapper.attributes.getNamedItem('role').nodeValue).toEqual('combobox');
+            expect(comboWrapper.style.width).toEqual(defaultComboWidth);
+            expect(comboWrapper.attributes.getNamedItem('aria-haspopup').nodeValue).toEqual('listbox');
+            expect(comboWrapper.attributes.getNamedItem('aria-expanded').nodeValue).toEqual('false');
+            expect(comboWrapper.attributes.getNamedItem('aria-owns').nodeValue).toEqual(fix.componentInstance.combo.dropdown.id);
+            expect(comboWrapper.childElementCount).toEqual(2);
+
+            const inputGroupElement = comboWrapper.children[0];
             expect(inputGroupElement.attributes.getNamedItem('ng-reflect-type').nodeValue).toEqual('box');
             expect(inputGroupElement.classList.contains(CSS_CLASS_INPUTGROUP)).toBeTruthy();
             expect(inputGroupElement.classList.contains('igx-input-group--box')).toBeTruthy();
@@ -1590,7 +1588,7 @@ describe('igxCombo', () => {
             expect(inputGroupBorder.classList.contains(CSS_CLASS_INPUTGROUP_BORDER)).toBeTruthy();
             expect(inputGroupBorder.childElementCount).toEqual(0);
 
-            const dropDownElement = comboElement.children[1];
+            const dropDownElement = comboWrapper.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);
@@ -1837,6 +1835,7 @@ describe('igxCombo', () => {
             expect(focusedItem_2.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
             expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeFalsy();
         }));
+
         it('Should adjust combo width to the container element width when set to 100%', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboInContainerTestComponent);
             fixture.detectChanges();
@@ -1853,7 +1852,7 @@ describe('igxCombo', () => {
             combo.toggle();
             tick();
             fixture.detectChanges();
-
+            tick();
             const inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_WRAPPER)).nativeElement;
             const dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
             containerElementWidth = containerElement.getBoundingClientRect().width;
@@ -1864,6 +1863,7 @@ describe('igxCombo', () => {
             expect(dropDownWidth).toEqual(containerElementWidth);
             expect(inputWidth).toEqual(containerElementWidth);
         }));
+
         it('Should render combo width properly when placed in container', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboInContainerFixedWidthComponent);
             fixture.detectChanges();

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -36,6 +36,7 @@ import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
 import { Subscription } from 'rxjs';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
+import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 
 /** Custom strategy to provide the combo with callback on initial positioning */
 class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
@@ -97,7 +98,7 @@ const noop = () => { };
     selector: 'igx-combo',
     templateUrl: 'combo.component.html'
 })
-export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
+export class IgxComboComponent extends DisplayDensityBase implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
     /**
      * @hidden
      */
@@ -169,7 +170,9 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
-        @Self() @Optional() public ngControl: NgControl) {
+        @Self() @Optional() public ngControl: NgControl,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
         if (this.ngControl) {
             // Note: we provide the value accessor through here, instead of
             // the `providers` to avoid running into a circular import.
@@ -523,6 +526,42 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         return this._valid === IgxComboState.INVALID;
     }
 
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-combo')
+    public cssClass = 'igx-combo'; // Independant of display density, at the time being
+
+    /**
+     * @hidden
+     */
+    @HostBinding(`attr.role`)
+    public role = 'combobox';
+
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.aria-expanded')
+    public get ariaExpanded() {
+        return !this.dropdown.collapsed;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.aria-haspopup')
+    public get hasPopUp() {
+        return 'listbox';
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.aria-owns')
+    public get ariaOwns() {
+        return this.dropdown.id;
+    }
+
     /**
      * Controls whether custom values can be added to the collection
      *

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -38,6 +38,7 @@
 
     %igx-combo {
         position: relative;
+        display: block;
 
         %igx-button--icon {
             width: rem(24px);