From 7a959fcee1857204cf104dab8f42f7e8235a16ab Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 13 Nov 2018 13:38:59 +0200 Subject: [PATCH 1/5] feat(igxDropDown): introduce itemsMaxHeight property #3001 --- CHANGELOG.md | 1 + .../src/lib/drop-down/README.md | 1 + .../lib/drop-down/drop-down.component.html | 14 ++++++------ .../src/lib/drop-down/drop-down.component.ts | 22 ++++++++++++++++++- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fda1d42775..a2fcdd99abc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ All notable changes for each version of this project will be documented in this ... ``` - `igx-drop-down`: + - Added a new property `maxHeight`, defining the max height of the drop down. - Added a new boolean argument `cancel` to the `onSelection` `ISelectionEventArgs`. Its default value is false, in case it is set to true, the drop down selection is invalidated. - `igxIcon`: - **Breaking change** `glyphName` property is removed from `IgxIconComponent`. For `Material` icons the icon name should be explicitly defined between the opening and closing tags. `Font Awesome` icons should use the `name` property now. diff --git a/projects/igniteui-angular/src/lib/drop-down/README.md b/projects/igniteui-angular/src/lib/drop-down/README.md index c84b5380707..9a9017c50fe 100644 --- a/projects/igniteui-angular/src/lib/drop-down/README.md +++ b/projects/igniteui-angular/src/lib/drop-down/README.md @@ -36,6 +36,7 @@ The following inputs are available in the **igx-drop-down** component: | :--- | :--- | :--- | | `width` | string | Sets the tab width of the control. | | `height` | string | Sets the tab height of the control. | +| `maxHeight` | string | defines drop down maximum height | | `allowItemsFocus` | boolean | Allows items to take focus. | | `id` | string | Sets the drop down's id. | diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html index ebe190135af..1f83777e20d 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html @@ -1,7 +1,7 @@ -
-
- - - -
-
\ No newline at end of file +
+ + + +
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 18affc8d4a7..e483519a8f4 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -16,7 +16,8 @@ import { Optional, HostListener, Directive, - Inject + Inject, + HostBinding } from '@angular/core'; import { IgxSelectionAPIService } from '../core/selection'; import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle.directive'; @@ -205,6 +206,25 @@ export class IgxDropDownBase implements OnInit, IToggleView { this.toggleDirective.id = value; } + @HostBinding('class.igx-drop-down') + cssClass = 'igx-drop-down'; + + /** + * Gets/Sets the drop down's container max height. + * + * ```typescript + * // get + * let maxHeight = this.dropdown.maxHeight; + * ``` + * + * ```html + * + * + * ``` + */ + @Input() + public maxHeight = null; + /** * Gets if the dropdown is collapsed * From b1558d49a2ed7d0643171f9a10babb01beff2f64 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 13 Nov 2018 14:06:15 +0200 Subject: [PATCH 2/5] test(igxDropDown): test for max height #3001 --- .../lib/drop-down/drop-down.component.spec.ts | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index f375c711339..03b0bc321ca 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -35,7 +35,8 @@ describe('IgxDropDown ', () => { IgxDropDownImageTestComponent, IgxDropDownTabsTestComponent, DropDownWithValuesComponent, - IgxDropDownSelectComponent + IgxDropDownSelectComponent, + DropDownWithMaxHeightComponent ], imports: [ IgxDropDownModule, @@ -884,6 +885,19 @@ describe('IgxDropDown ', () => { expect(dropdown.selectedItem).toEqual(dropdownItem); expect(dropdown.collapsed).toEqual(true); })); + + it('Should properly define maxHeight option', fakeAsync(() => { + const fixture = TestBed.createComponent(DropDownWithMaxHeightComponent); + fixture.detectChanges(); + const dropdown = fixture.componentInstance.dropdown; + dropdown.toggle(); + tick(); + + fixture.detectChanges(); + const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement; + expect(dropdown.maxHeight).toBe('100px'); + expect(ddList.style.maxHeight).toBe('100px'); + })); }); describe('igxDropDown Unit tests', () => { @@ -1674,3 +1688,23 @@ class DropDownWithValuesComponent { { name: 'Product 4', id: 3 }, ]; } + +@Component({ + template: ` + + + {{ item.field }} + + ` +}) +class DropDownWithMaxHeightComponent { + @ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent }) + public dropdown: IgxDropDownComponent; + + public items: any[] = [ + { name: 'Product 1', id: 1 }, + { name: 'Product 2', id: 2 }, + { name: 'Product 3', id: 3 }, + { name: 'Product 4', id: 3 }, + ]; +} From 4fc9a9bf221ca6cfd0a06fe52c1056aa37164658 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 13 Nov 2018 14:09:15 +0200 Subject: [PATCH 3/5] docs(igxDropDown): changelog update #3001 --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a2fcdd99abc..9ddada201fc 100644 --- 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. @@ -21,7 +25,6 @@ All notable changes for each version of this project will be documented in this ... ``` - `igx-drop-down`: - - Added a new property `maxHeight`, defining the max height of the drop down. - Added a new boolean argument `cancel` to the `onSelection` `ISelectionEventArgs`. Its default value is false, in case it is set to true, the drop down selection is invalidated. - `igxIcon`: - **Breaking change** `glyphName` property is removed from `IgxIconComponent`. For `Material` icons the icon name should be explicitly defined between the opening and closing tags. `Font Awesome` icons should use the `name` property now. From 9b4b2ceea9c0306dacef4098f0cc2b065224d0df Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 13 Nov 2018 14:56:27 +0200 Subject: [PATCH 4/5] test(igxCombo): adjust tests according to new dropdown structure #3001 --- .../src/lib/combo/combo.component.spec.ts | 9 +++------ .../src/lib/drop-down/drop-down.component.spec.ts | 12 ++++++------ 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 945616b095b..9a7e44909f0 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1584,13 +1584,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]; diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 03b0bc321ca..8844e4aef98 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -74,7 +74,7 @@ describe('IgxDropDown ', () => { expect(currentItem.componentInstance.index).toEqual(0); expect(list.collapsed).toEqual(false); - targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent; + targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0]; expect(targetElement).toBeDefined(); mockObj.code = 'arrowdown'; @@ -98,7 +98,7 @@ describe('IgxDropDown ', () => { button.click(mockObj); tick(); fixture.detectChanges(); - targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent; + targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0]; currentItem = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_SELECTED))[0]; mockObj.code = 'arrowdown'; @@ -106,7 +106,7 @@ describe('IgxDropDown ', () => { targetElement.triggerEventHandler('keydown', mockObj); tick(); fixture.detectChanges(); - targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0].parent; + targetElement = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROP_DOWN_BASE))[0]; currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); mockObj.code = 'enter'; @@ -153,7 +153,7 @@ describe('IgxDropDown ', () => { let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); expect(currentItem.componentInstance.index).toEqual(0); - targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent; + targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)); mockObj.code = 'arrowdown'; mockObj.key = 'arrowdown'; targetElement.triggerEventHandler('keydown', mockObj); @@ -210,7 +210,7 @@ describe('IgxDropDown ', () => { tick(); fixture.detectChanges(); let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); - targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent; + targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)); mockObj.code = 'ArrowDown'; mockObj.key = 'ArrowDown'; targetElement.triggerEventHandler('keydown', mockObj); @@ -545,7 +545,7 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); let currentItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOCUSED)); expect(currentItem).toBeDefined(); - targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)).parent; + targetElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROP_DOWN_BASE)); targetElement.triggerEventHandler('keydown', mockObj); tick(); From 6edeca07927c5d447a46f192b02b6f03b033105c Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Tue, 13 Nov 2018 15:20:16 +0200 Subject: [PATCH 5/5] test(igxDropDown): add more tests #3001 --- .../lib/drop-down/drop-down.component.spec.ts | 40 +++++++++++++------ 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 8844e4aef98..1f706de1c98 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -36,7 +36,8 @@ describe('IgxDropDown ', () => { IgxDropDownTabsTestComponent, DropDownWithValuesComponent, IgxDropDownSelectComponent, - DropDownWithMaxHeightComponent + DropDownWithMaxHeightComponent, + DropDownWithUnusedMaxHeightComponent ], imports: [ IgxDropDownModule, @@ -886,7 +887,7 @@ describe('IgxDropDown ', () => { expect(dropdown.collapsed).toEqual(true); })); - it('Should properly define maxHeight option', fakeAsync(() => { + it('Should properly set maxHeight option', fakeAsync(() => { const fixture = TestBed.createComponent(DropDownWithMaxHeightComponent); fixture.detectChanges(); const dropdown = fixture.componentInstance.dropdown; @@ -895,9 +896,22 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement; - expect(dropdown.maxHeight).toBe('100px'); + expect(parseInt(ddList.style.maxHeight, 10)).toEqual(ddList.offsetHeight); expect(ddList.style.maxHeight).toBe('100px'); })); + + it('Should properly set maxHeight option (maxHeight value larger than needed)', fakeAsync(() => { + const fixture = TestBed.createComponent(DropDownWithUnusedMaxHeightComponent); + fixture.detectChanges(); + const dropdown = fixture.componentInstance.dropdown; + dropdown.toggle(); + tick(); + + fixture.detectChanges(); + const ddList = fixture.debugElement.query(By.css('.igx-drop-down__list')).nativeElement; + expect(parseInt(ddList.style.maxHeight, 10)).toBeGreaterThan(ddList.offsetHeight); + expect(ddList.style.maxHeight).toBe('700px'); + })); }); describe('igxDropDown Unit tests', () => { @@ -1697,14 +1711,14 @@ class DropDownWithValuesComponent { ` }) -class DropDownWithMaxHeightComponent { - @ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent }) - public dropdown: IgxDropDownComponent; +class DropDownWithMaxHeightComponent extends DropDownWithValuesComponent {} - public items: any[] = [ - { name: 'Product 1', id: 1 }, - { name: 'Product 2', id: 2 }, - { name: 'Product 3', id: 3 }, - { name: 'Product 4', id: 3 }, - ]; -} +@Component({ + template: ` + + + {{ item.field }} + + ` +}) +class DropDownWithUnusedMaxHeightComponent extends DropDownWithValuesComponent {}