Skip to content

Commit a92608b

Browse files
LipataLipata
authored
Merge pull request #6329 from IgniteUI/drop-down-border-radius
Drop down border radius
2 parents d04e75c + e9c29e3 commit a92608b

File tree

15 files changed

+208
-227
lines changed

15 files changed

+208
-227
lines changed

‎projects/igniteui-angular/src/lib/combo/combo.component.spec.ts‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const CSS_CLASS_COMBO = 'igx-combo';
2323
const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
2424
const CSS_CLASS_DROPDOWN = 'igx-drop-down';
2525
const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list';
26+
const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll';
2627
const CSS_CLASS_CONTENT = 'igx-combo__content';
2728
const CSS_CLASS_CONTAINER = 'igx-display-container';
2829
const CSS_CLASS_DROPDOWNLISTITEM = 'igx-drop-down__item';
@@ -233,7 +234,7 @@ describe('igxCombo', () => {
233234
tick();
234235
fixture.detectChanges();
235236
expect(combo.headerTemplate).toBeDefined();
236-
const dropdownList: HTMLElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
237+
const dropdownList: HTMLElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
237238
headerElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_HEADER));
238239
expect(headerElement).not.toBeNull();
239240
const headerHTMLElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_HEADER)).nativeElement;
@@ -250,7 +251,7 @@ describe('igxCombo', () => {
250251
tick();
251252
fixture.detectChanges();
252253
expect(combo.footerTemplate).toBeDefined();
253-
const dropdownList: HTMLElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
254+
const dropdownList: HTMLElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
254255
footerElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOOTER));
255256
expect(footerElement).not.toBeNull();
256257
const footerHTMLElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_FOOTER)).nativeElement;
@@ -512,15 +513,16 @@ describe('igxCombo', () => {
512513
const searchInputElement = fixture.debugElement.query(By.css('input[name=\'searchInput\']')).nativeElement;
513514
expect(searchInputElement).toBeDefined();
514515
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
516+
const dropdownListScrollContainer = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
515517
expect(dropdownList.classList.contains(CSS_CLASS_TOGGLE)).toBeTruthy();
516-
const dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
518+
const dropdownItems = dropdownListScrollContainer.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
517519
expect(dropdownItems.length).toEqual(11);
518520
comboButton.click();
519521
tick();
520522
fixture.detectChanges();
521523
expect(combo.collapsed).toEqual(true);
522524
expect(dropdownList.classList.contains(CSS_CLASS_TOGGLE + '--hidden')).toBeTruthy();
523-
expect(dropdownList.children.length).toEqual(0);
525+
expect(dropdownListScrollContainer.children.length).toEqual(0);
524526
}));
525527
it('Should focus search input after dropdown has been opened', fakeAsync(() => {
526528
let isFocused = false;
@@ -606,7 +608,7 @@ describe('igxCombo', () => {
606608
tick();
607609
fixture.detectChanges();
608610

609-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
611+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
610612
const dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
611613
const dropdownContent = fixture.debugElement.query(By.css('.' + CSS_CLASS_CONTENT)).nativeElement;
612614
let focusedItems = dropdownList.querySelectorAll('.' + CSS_CLASS_FOCUSED);
@@ -1183,7 +1185,7 @@ describe('igxCombo', () => {
11831185

11841186
comboButton.click();
11851187
fixture.detectChanges();
1186-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1188+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
11871189

11881190
const verifySelectedItem = function (itemIndex: number) {
11891191
clickItemCheckbox(dropdownList, itemIndex);
@@ -1212,7 +1214,7 @@ describe('igxCombo', () => {
12121214
comboButton.click();
12131215
fixture.detectChanges();
12141216
const dropdownContent = fixture.debugElement.query(By.css('.' + CSS_CLASS_CONTENT)).nativeElement;
1215-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1217+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
12161218

12171219
clickItemCheckbox(dropdownList, 3);
12181220
fixture.detectChanges();
@@ -1243,7 +1245,7 @@ describe('igxCombo', () => {
12431245
combo.toggle();
12441246
tick();
12451247
fixture.detectChanges();
1246-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1248+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
12471249

12481250
clickItemCheckbox(dropdownList, 3);
12491251
fixture.detectChanges();
@@ -1299,7 +1301,7 @@ describe('igxCombo', () => {
12991301
combo.toggle();
13001302
tick();
13011303
fixture.detectChanges();
1302-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1304+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
13031305
let selectedItemIndex = -1;
13041306

13051307
const verifySelectedItem = function (itemIndex: number) {
@@ -1339,7 +1341,7 @@ describe('igxCombo', () => {
13391341
combo.toggle();
13401342
tick();
13411343
fixture.detectChanges();
1342-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1344+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
13431345
clickItemCheckbox(dropdownList, 8);
13441346
fixture.detectChanges();
13451347
expect(fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_CLEARBUTTON)).length).toEqual(1);
@@ -1387,7 +1389,7 @@ describe('igxCombo', () => {
13871389
combo.toggle();
13881390
tick();
13891391
fixture.detectChanges();
1390-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1392+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
13911393
let selectedItemIndex = 0;
13921394

13931395
const verifySelectedItem = function (itemIndex: number) {
@@ -1432,7 +1434,7 @@ describe('igxCombo', () => {
14321434
combo.toggle();
14331435
tick();
14341436
fixture.detectChanges();
1435-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1437+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
14361438
const verifyOnSelectionChangeEventIsFired = function (itemIndex: number) {
14371439
const dropdownItems = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DROPDOWNLISTITEM));
14381440
const checkbox = dropdownItems[itemIndex];
@@ -1467,7 +1469,7 @@ describe('igxCombo', () => {
14671469
combo.toggle();
14681470
tick();
14691471
fixture.detectChanges();
1470-
const dropdown = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1472+
const dropdown = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
14711473
let selectedItemIndex = -1;
14721474

14731475
const verifySelectedItem = function (dropdownItemIndex: number, dataItemIndex: number) {
@@ -1533,7 +1535,7 @@ describe('igxCombo', () => {
15331535
combo.toggle();
15341536
tick();
15351537
fixture.detectChanges();
1536-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1538+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
15371539
let selectedItemIndex = 0;
15381540

15391541
clickItemCheckbox(dropdownList, 3);
@@ -1703,9 +1705,10 @@ describe('igxCombo', () => {
17031705
expect(dropDownElement.childElementCount).toEqual(1);
17041706

17051707
const dropDownList = dropDownElement.children[0];
1708+
const dropDownScrollList = dropDownElement.children[0].children[0];
17061709
expect(dropDownList.classList.contains(CSS_CLASS_DROPDOWNLIST)).toBeTruthy();
17071710
expect(dropDownList.classList.contains('igx-toggle--hidden')).toBeTruthy();
1708-
expect(dropDownList.childElementCount).toEqual(0);
1711+
expect(dropDownScrollList.childElementCount).toEqual(0);
17091712
});
17101713
it('Should render aria attribute properly', fakeAsync(() => {
17111714
const fix = TestBed.createComponent(IgxComboSampleComponent);
@@ -1871,7 +1874,7 @@ describe('igxCombo', () => {
18711874
dropDownButton.click();
18721875
tick();
18731876
fixture.detectChanges();
1874-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1877+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
18751878
const dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
18761879
selectedItem = dropdownItems[4];
18771880
expect(selectedItem.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
@@ -1905,7 +1908,7 @@ describe('igxCombo', () => {
19051908
dropdown.navigateItem(2);
19061909
fixture.detectChanges();
19071910

1908-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1911+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
19091912
const dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
19101913
const focusedItem_1 = dropdownItems[2];
19111914
expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
@@ -1930,7 +1933,7 @@ describe('igxCombo', () => {
19301933
dropdown.navigateItem(2); // Componenent is virtualized, so this will focus the ACTUAL 3rd item
19311934
fixture.detectChanges();
19321935

1933-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1936+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
19341937
const dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
19351938
const focusedItem_1 = dropdownItems[1];
19361939
expect(focusedItem_1.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
@@ -1961,7 +1964,7 @@ describe('igxCombo', () => {
19611964
fixture.detectChanges();
19621965
tick();
19631966
const inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_WRAPPER)).nativeElement;
1964-
const dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1967+
const dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
19651968
containerElementWidth = containerElement.getBoundingClientRect().width;
19661969
wrapperWidth = comboWrapper.getBoundingClientRect().width;
19671970
const inputWidth = inputElement.getBoundingClientRect().width;
@@ -1990,7 +1993,7 @@ describe('igxCombo', () => {
19901993
fixture.detectChanges();
19911994

19921995
let inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_WRAPPER)).nativeElement;
1993-
let dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
1996+
let dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
19941997
containerElementWidth = containerElement.style.width;
19951998
wrapperWidth = comboWrapper.style.width;
19961999
let inputWidth = inputElement.getBoundingClientRect().width + 'px';
@@ -2014,7 +2017,7 @@ describe('igxCombo', () => {
20142017

20152018
comboWrapper = fixture.debugElement.query(By.css(CSS_CLASS_COMBO)).nativeElement;
20162019
inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_WRAPPER)).nativeElement;
2017-
dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
2020+
dropDownElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
20182021
containerElementWidth = containerElement.style.width;
20192022
wrapperWidth = comboWrapper.style.width;
20202023
inputWidth = inputElement.getBoundingClientRect().width + 'px';
@@ -2145,7 +2148,7 @@ describe('igxCombo', () => {
21452148
for (let itemIndex = 0; itemIndex < 10; itemIndex++) {
21462149
expect(combo.data[itemIndex].id).toEqual(ind);
21472150
expect(combo.data[itemIndex].product).toEqual('Product ' + ind);
2148-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
2151+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
21492152
const dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
21502153
expect(dropdownItems[itemIndex].innerText.trim()).toEqual('Product ' + ind);
21512154
ind++;
@@ -2202,7 +2205,7 @@ describe('igxCombo', () => {
22022205
combo.toggle();
22032206
fixture.detectChanges();
22042207

2205-
dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
2208+
dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
22062209
dropdownItems = dropdownList.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
22072210
selectedItem = dropdownItems[0];
22082211
itemCheckbox = selectedItem.querySelector('.' + CSS_CLASS_CHECKBOX);
@@ -2317,7 +2320,7 @@ describe('igxCombo', () => {
23172320
combo.toggle();
23182321
tick();
23192322
fixture.detectChanges();
2320-
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
2323+
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
23212324
const dropdownItemsContainer = fixture.debugElement.query(By.css('.' + CSS_CLASS_CONTENT)).nativeElement;
23222325
const dropDownContainer = fixture.debugElement.query(By.css('.' + CSS_CLASS_CONTAINER)).nativeElement;
23232326
const listItems = dropDownContainer.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
@@ -2670,7 +2673,7 @@ describe('igxCombo', () => {
26702673
searchInputElement = searchInput.nativeElement;
26712674
UIInteractions.sendInput(searchInput, 'P', fixture);
26722675
fixture.detectChanges();
2673-
dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)).nativeElement;
2676+
dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST_SCROLL)).nativeElement;
26742677
dropDownContainer = fixture.debugElement.query(By.css('.' + CSS_CLASS_CONTAINER)).nativeElement;
26752678
listItems = dropDownContainer.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
26762679
expect(listItems.length).toEqual(5);

‎projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,17 @@
66
/// @requires {mixin} bem-mod
77
////
88

9-
/// @access private
10-
@mixin _igx-dd-wrapper{
11-
@include b(igx-drop-down-wrapper) {
12-
@extend %igx-drop-down-wrapper !optional;
13-
14-
@include e(header) {
15-
@extend %igx-drop-down-wrapper__header !optional;
16-
}
17-
18-
@include e(footer) {
19-
@extend %igx-drop-down-wrapper__footer !optional;
20-
}
21-
}
22-
}
23-
249
/// @access public
2510
@include b(igx-drop-down) {
2611
$this: bem--selector-to-string(&);
2712
@include register-component(str-slice($this, 2, -1));
2813

29-
@include _igx-dd-wrapper();
30-
31-
@extend %igx-drop-down !optional;
32-
3314
@include e(list) {
3415
@extend %igx-drop-down__list !optional;
3516
}
3617

37-
@include e(list, $m: select) {
38-
@extend %igx-drop-down__list !optional;
39-
@extend %igx-drop-down__list--select !optional;
18+
@include e(list-scroll) {
19+
@extend %igx-drop-down__list-scroll !optional;
4020
}
4121

4222
@include e(item) {

‎projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -210,23 +210,17 @@
210210
compact: 0 rem(8px)
211211
);
212212

213-
%igx-drop-down-wrapper {
214-
box-shadow: --var($theme, 'shadow');
215-
z-index: 1;
216-
}
217-
218-
%igx-drop-down {
219-
max-height: 100%;
220-
position: absolute;
221-
border-radius: --var($theme, 'border-radius');
222-
overflow: hidden;
223-
}
224-
225213
%igx-drop-down__list {
226-
overflow-y: auto;
214+
overflow: hidden;
215+
border-radius: --var($theme, 'border-radius');
227216
background: --var($theme, 'background-color');
228217
box-shadow: --var($theme, 'shadow');
229218
min-width: rem(128px);
219+
}
220+
221+
%igx-drop-down__list-scroll {
222+
overflow-y: auto;
223+
position: relative;
230224

231225
&:empty {
232226
box-shadow: none;
@@ -237,10 +231,6 @@
237231
}
238232
}
239233

240-
%igx-drop-down__list--select {
241-
box-shadow: none;
242-
}
243-
244234
%igx-drop-down__header,
245235
%igx-drop-down__item {
246236
display: flex;
@@ -374,11 +364,4 @@
374364
margin: 0;
375365
}
376366
}
377-
378-
%igx-drop-down__list--select {
379-
%igx-drop-down__item {
380-
@include igx-type-style($type-scale, $select-item);
381-
@include ellipsis()
382-
}
383-
}
384367
}

0 commit comments

Comments
 (0)