Merge branch '18.2.x' into igniteui-angular-15002-18-2-x

Author: ChronosSF

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

@@ -1745,71 +1745,60 @@ describe('igxCombo', () => {
                     expect(dropdown).toBeDefined();
                     expect(dropdown.focusedItem).toBeFalsy();
                     expect(combo.virtualScrollContainer).toBeDefined();
+                    combo.allowCustomValues = true;
                     const mockClick = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
                     const virtualMockUP = spyOn<any>(dropdown, 'navigatePrev').and.callThrough();
                     const virtualMockDOWN = spyOn<any>(dropdown, 'navigateNext').and.callThrough();
                     expect(dropdown.focusedItem).toEqual(null);
                     expect(combo.collapsed).toBeTruthy();
                     combo.toggle();
-                    await wait(30);
+                    await wait();
                     fixture.detectChanges();
                     expect(combo.collapsed).toBeFalsy();
                     combo.virtualScrollContainer.scrollTo(51);
-                    await wait(30);
+                    await firstValueFrom(combo.virtualScrollContainer.chunkLoad);
                     fixture.detectChanges();
                     let items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
                     let lastItem = items[items.length - 1].componentInstance;
                     expect(lastItem).toBeDefined();
                     lastItem.clicked(mockClick);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(dropdown.focusedItem).toEqual(lastItem);
                     dropdown.navigateItem(-1);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(virtualMockDOWN).toHaveBeenCalledTimes(0);
                     lastItem.clicked(mockClick);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(dropdown.focusedItem).toEqual(lastItem);
                     dropdown.navigateNext();
-                    await wait(30);
                     fixture.detectChanges();
                     expect(virtualMockDOWN).toHaveBeenCalledTimes(1);
                     combo.searchValue = 'New';
                     combo.handleInputChange();
                     fixture.detectChanges();
-                    await wait(30);
-                    items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
-                    lastItem = items[items.length - 1].componentInstance;
-                    (lastItem as IgxComboAddItemComponent).clicked(mockClick);
-                    await wait(30);
+                    await firstValueFrom(combo.virtualScrollContainer.chunkLoad);
+                    const addItemButton = fixture.debugElement.query(By.directive(IgxComboAddItemComponent));
+                    addItemButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                     fixture.detectChanges();
                     // After `Add Item` is clicked, the input is focused and the item is added to the list
-                    // expect(dropdown.focusedItem).toEqual(null);
+                    expect(dropdown.focusedItem).toEqual(null);
                     expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
                     expect(combo.customValueFlag).toBeFalsy();
                     expect(combo.searchInput.nativeElement.value).toBeTruthy();
 
                     // TEST move from first item
-                    combo.virtualScrollContainer.scrollTo(0);
-                    await wait();
-                    fixture.detectChanges();
                     const firstItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[0].componentInstance;
                     firstItem.clicked(mockClick);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(dropdown.focusedItem).toEqual(firstItem);
                     expect(dropdown.focusedItem.itemIndex).toEqual(0);
-                    // spyOnProperty(dropdown, 'focusedItem', 'get').and.returnValue(firstItem);
                     dropdown.navigateFirst();
-                    await wait(30);
                     fixture.detectChanges();
                     dropdown.navigatePrev();
-                    await wait(30);
                     fixture.detectChanges();
-                    // Called once before the `await` and called once more, because item @ index 0 is a header
+                    // Called once manually and called once more, because item @ index 0 is a header
                     expect(virtualMockUP).toHaveBeenCalledTimes(2);
+                    expect(dropdown.focusedItem).toBeNull();
                 }));
                 it('should properly get the first focusable item when focusing the component list', () => {
                     const expectedItemText = 'State: MichiganRegion: East North Central';

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

@@ -404,16 +404,16 @@
     }
 }
 
-/// Adds typography styles for the igx-list component.
-/// Uses the 'caption' and 'subtitle-2'
+/// Adds typography styles for the igx-drop-down component.
+/// Uses the 'overline', 'body-2', 'subtitle-1'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(header: 'overline', item: 'body-2', select-item: 'body-2')] - The categories from the typographic scale used for type styles.
 @mixin drop-down-typography(
     $categories: (
         header: 'overline',
         item: 'body-2',
-        select-item: 'subtitle-1'
+        select-item: 'body-2'
     )
 ) {
     $header: map.get($categories, 'header');
@@ -432,4 +432,10 @@
             margin: 0;
         }
     }
+
+    %igx-drop-down__item--selected {
+        @include type-style($select-item) {
+            margin: 0;
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -64,9 +64,9 @@
     ));
     @include dock-manager-typography();
     @include drop-down-typography($categories: (
-        header: 'body-1',
-        item: 'body-1',
-        select-item: 'body-1'
+        header: 'overline',
+        item: 'body-2',
+        select-item: 'body-2'
     ));
     @include expansion-panel-typography($categories: (
         title: 'h5',

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -66,7 +66,11 @@
         content: 'body-2'
     ));
     @include dock-manager-typography();
-    @include drop-down-typography();
+    @include drop-down-typography($categories: (
+        header: 'subtitle-2',
+        item: 'body-2',
+        select-item: 'body-2'
+    ));
     @include expansion-panel-typography($categories: (
         title: 'subtitle-1',
         description: 'body-2',