Merge branch 'master' into gedinakova/fix-3550

IgniteUI · Jan 16, 2019 · 5f5c2a8 · 5f5c2a8
2 parents f9b833b + 52fd9d9
commit 5f5c2a8
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 7 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
@@ -116,6 +116,11 @@
             }
         }
     }
+
+    igx-action-icon {
+        display: flex;
+        align-items: center;
+    }
 }
 
 /// Adds typography styles for the igx-navbar component.

diff --git a/projects/igniteui-angular/src/lib/list/list.component.html b/projects/igniteui-angular/src/lib/list/list.component.html
@@ -12,7 +12,7 @@
     </article>
 </ng-template>
 
-<ng-container *ngIf="!children || children.length === 0">
+<ng-container *ngIf="!children || children.length === 0 || isLoading">
     <ng-container *ngTemplateOutlet="template; context: context">
     </ng-container>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/list/list.component.spec.ts b/projects/igniteui-angular/src/lib/list/list.component.spec.ts
@@ -284,6 +284,25 @@ describe('List', () => {
         expect(noItemsParagraphEl.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
     });
 
+    it('Should show loading template when isLoading=\'true\' even when there are children.', () => {
+        const fixture = TestBed.createComponent(ListWithHeaderComponent);
+        const list = fixture.componentInstance.list;
+        list.isLoading = true;
+        const listLoadingItemsMessage = 'Loading data from the server...';
+
+        fixture.detectChanges();
+
+        verifyItemsCount(list, 3);
+
+        const noItemsParagraphEl = fixture.debugElement.query(By.css('p'));
+        expect(noItemsParagraphEl.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
+
+        list.isLoading = false;
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('p'))).toBeFalsy();
+    });
+
     it('Should have custom loading template.', () => {
         const fixture = TestBed.createComponent(ListCustomLoadingComponent);
         const list = fixture.componentInstance.list;

diff --git a/projects/igniteui-angular/src/lib/navbar/navbar.component.spec.ts b/projects/igniteui-angular/src/lib/navbar/navbar.component.spec.ts
@@ -2,8 +2,10 @@ import { Component, ViewChild } from '@angular/core';
 import { async, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxNavbarComponent, IgxNavbarModule } from './navbar.component';
+import { IgxIconModule } from '../icon/index';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { wait } from '../test-utils/ui-interactions.spec';
 
 const LEFT_AREA_CSS_CLAS = '.igx-navbar__left';
 
@@ -13,10 +15,12 @@ describe('IgxNavbar', () => {
         TestBed.configureTestingModule({
             declarations: [
                 NavbarIntializeTestComponent,
-                NavbarCustomActionIconTestComponent
+                NavbarCustomActionIconTestComponent,
+                NavbarCustomIgxIconTestComponent
             ],
             imports: [
-                IgxNavbarModule
+                IgxNavbarModule,
+                IgxIconModule
             ]
         }).compileComponents();
     }));
@@ -95,12 +99,10 @@ describe('IgxNavbar', () => {
     });
 
     describe('Custom Action Icon', () => {
-        beforeEach(() => {
+        it('should have custom action icon/content when user has provided one', () => {
             fixture = TestBed.createComponent(NavbarCustomActionIconTestComponent);
             fixture.detectChanges();
-        });
 
-        it('should have custom action icon/content when user has provided one', () => {
             const leftArea = fixture.debugElement.query(By.css(LEFT_AREA_CSS_CLAS));
 
             // Verify there is no default icon on the left.
@@ -114,6 +116,28 @@ describe('IgxNavbar', () => {
             const customContentLeft = (<HTMLElement>customContent.nativeElement).getBoundingClientRect().left;
             expect(leftAreaLeft).toBe(customContentLeft, 'Custom action icon content is not first on the left.');
         });
+
+        it('should have vertically-centered custom action icon content', (async() => {
+            fixture = TestBed.createComponent(NavbarCustomIgxIconTestComponent);
+            fixture.detectChanges();
+
+            await wait(100);
+
+            domNavbar = fixture.debugElement.query(By.css('igx-navbar'));
+            const customActionIcon = domNavbar.query(By.css('igx-action-icon'));
+            const customIcon = customActionIcon.query(By.css('igx-icon'));
+
+            // Verify custom igxIcon is vertically-centered within the igx-action-icon.
+            const navbarTop = (<HTMLElement>domNavbar.nativeElement).getBoundingClientRect().top;
+            const customIconTop = (<HTMLElement>customIcon.nativeElement).getBoundingClientRect().top;
+            const topOffset = customIconTop - navbarTop;
+
+            const navbarBottom = (<HTMLElement>domNavbar.nativeElement).getBoundingClientRect().bottom;
+            const customIconBottom = (<HTMLElement>customIcon.nativeElement).getBoundingClientRect().bottom;
+            const bottomOffset = navbarBottom - customIconBottom;
+
+            expect(topOffset).toBe(bottomOffset, 'Custom icon is not vertically-centered.');
+        }));
     });
 });
 @Component({
@@ -145,3 +169,18 @@ class NavbarIntializeTestComponent {
 class NavbarCustomActionIconTestComponent {
     @ViewChild(IgxNavbarComponent) public navbar: IgxNavbarComponent;
 }
+
+@Component({
+    selector: 'igx-navbar-custom-igxicon-component',
+    template: `<igx-navbar #navbar
+                            title="Test Title"
+                            actionButtonIcon="home"
+                            isActionButtonVisible="true">
+                    <igx-action-icon>
+                        <igx-icon fontSet="material">arrow_back</igx-icon>
+                    </igx-action-icon>
+               </igx-navbar>`
+})
+class NavbarCustomIgxIconTestComponent {
+    @ViewChild(IgxNavbarComponent) public navbar: IgxNavbarComponent;
+}
diff --git a/src/app/navbar/navbar.sample.html b/src/app/navbar/navbar.sample.html
@@ -39,7 +39,7 @@ <h4 class="sample-title">With custom nav icon and action icons</h4>
                     <igx-icon>more_vert</igx-icon>
 
                     <igx-action-icon>
-                        <igx-icon style="vertical-align: middle" fontSet="material">arrow_back</igx-icon>
+                        <igx-icon fontSet="material">arrow_back</igx-icon>
                     </igx-action-icon>
                 </igx-navbar>
             </div>