refactor(navbar): Update the theme to fit the indigo ui design

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss

@@ -23,6 +23,10 @@
             @extend %igx-navbar-left !optional;
         }
 
+        @include e(middle) {
+            @extend %igx-navbar-middle !optional;
+        }
+
         @include e(right) {
             @extend %igx-navbar-right !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -91,14 +91,13 @@
     $navbar-padding: rem(16px);
     $navbar-title-fz: rem(18px, 16px);
     $navbar-title-lh: rem(18px, 16px);
-    $navbar-title-margin: 0;
 
     %igx-navbar-display {
         display: flex;
         position: relative;
         flex-flow: row nowrap;
         align-items: center;
-        justify-content: space-between;
+        gap: rem(16px);
         width: 100%;
         min-height: rem(56px);
         max-height: rem(128px);
@@ -108,9 +107,17 @@
         box-shadow: var-get($theme, 'shadow');
         z-index: 4;
         overflow: hidden;
-
-        @if $variant == 'bootstrap' {
-            border-bottom: rem(1px) solid var-get($theme, 'border-color');
+        border-bottom: rem(1px) solid var-get($theme, 'border-color');
+
+        igx-avatar,
+        igx-input-group,
+        [igxButton],
+        [igxIconButton],
+        igc-avatar,
+        igc-input,
+        igc-button,
+        igc-icon-button {
+            --ig-size: 1;
         }
     }
 
@@ -121,47 +128,65 @@
 
     %igx-navbar-title {
         @include line-clamp(4, true, true);
-        margin: $navbar-title-margin;
+        margin: 0;
         flex-grow: 1;
         user-select: text;
         display: flex;
         flex-direction: row;
     }
 
-    %igx-navbar-bundle {
-        @extend %igx-navbar-part;
-        user-select: none;
+    %igx-navbar-left {
+        &:not(:empty) {
+            @if $variant != 'indigo-design' {
+                margin-inline-end: rem(16px)
+            }
+        }
+    }
 
-        > * + * {
-            margin-inline-start: rem(16px);
+    %igx-navbar-middle {
+        flex-grow: 1;
+    }
+
+    %igx-navbar-right {
+        gap: if($variant == 'indigo-design', rem(8px), rem(16px));
+    }
+
+    %igx-navbar-left,
+    %igx-navbar-right {
+        &:empty {
+            display: none;
         }
     }
 
-    %igx-navbar-icon-display,
-    %igx-navbar-part {
-        igx-icon,
-        [igxIconButton] {
+    %igx-navbar-left,
+    %igx-navbar-middle,
+    %igx-navbar-right {
+        display: flex;
+        align-items: center;
+
+        > igx-icon,
+        > igc-icon {
             --component-size: 3;
 
             cursor: pointer;
-            color: var-get($theme, 'idle-icon-color');
             transition: color .15s $out-quad;
+            color: var-get($theme, 'idle-icon-color');
 
             &:hover {
                 color: var-get($theme, 'hover-icon-color');
             }
-        }
-    }
 
-    %igx-navbar-left {
-        @extend %igx-navbar-bundle;
-        @extend %igx-navbar-icon-display;
-        flex-grow: 1;
-    }
+            user-select: none;
+        }
 
-    %igx-navbar-right {
-        @extend %igx-navbar-bundle;
-        @extend %igx-navbar-icon-display;
+        @if $variant == 'indigo-design' {
+            igx-icon {
+                --size: rem(16px);
+                padding: rem(6px);
+                width: auto;
+                height: auto;
+            }
+        }
     }
 
     igx-navbar-action,

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

@@ -81,7 +81,9 @@
         title: 'subtitle-1',
         subtitle: 'body-2'
     ));
-    @include navbar-typography();
+    @include navbar-typography($categories: (
+        title: 'h5',
+    ));
     @include navdrawer-typography($categories: (
         item: 'subtitle-2',
         header: 'overline'

projects/igniteui-angular/src/lib/navbar/navbar.component.html

@@ -6,6 +6,8 @@
             {{actionButtonIcon}}
         </igx-icon>
         <ng-content select="igx-navbar-action, [igxNavbarAction]"></ng-content>
+    </div>
+    <div class="igx-navbar__middle">
         <h1
             *ngIf="!isTitleContentVisible"
             class="igx-navbar__title"

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

@@ -164,28 +164,28 @@ describe('IgxNavbar', () => {
             fixture = TestBed.createComponent(NavbarCustomTitleTestComponent);
             fixture.detectChanges();
 
-            const leftArea = fixture.debugElement.query(By.css(LEFT_AREA_CSS_CLAS));
+            const midArea = fixture.debugElement.query(By.css('.igx-navbar__middle'));
 
             // Verify there is no default icon on the left.
-            const customTitle = leftArea.query(By.css('igx-navbar-title'));
+            const customTitle = midArea.query(By.css('igx-navbar-title'));
             expect(customTitle.nativeElement.textContent).toBe('Custom Title', 'Custom title is missing');
 
-            const defaultTitle = leftArea.query(By.css('igx-navbar__title'));
+            const defaultTitle = midArea.query(By.css('igx-navbar__title'));
             expect(defaultTitle).toBeNull('Default title should not be present');
         });
 
         it('Custom content should override the default title property', () => {
             fixture = TestBed.createComponent(NavbarCustomTitleDirectiveTestComponent);
             fixture.detectChanges();
 
-            const leftArea = fixture.debugElement.query(By.css(LEFT_AREA_CSS_CLAS));
+            const midArea = fixture.debugElement.query(By.css('.igx-navbar__middle'));
 
             // Verify there is no default icon on the left.
-            const customTitle = leftArea.query(By.directive(IgxNavbarTitleDirective));
+            const customTitle = midArea.query(By.directive(IgxNavbarTitleDirective));
             expect(customTitle.nativeElement.children[0].textContent).toBe('Custom', 'Custom title is missing');
             expect(customTitle.nativeElement.children[1].textContent).toBe('Title', 'Custom title is missing');
 
-            const defaultTitle = leftArea.query(By.css('igx-navbar__title'));
+            const defaultTitle = midArea.query(By.css('igx-navbar__title'));
             expect(defaultTitle).toBeNull('Default title should not be present');
         });
     });

src/app/navbar/navbar.sample.html

@@ -1,7 +1,30 @@
 <section class="sample-content">
+
+    <article class="sample-column">
+        <h4 class="sample-title">Nav icon</h4>
+        <div class="navbar-sample">
+            <igx-navbar actionButtonIcon="menu"></igx-navbar>
+        </div>
+    </article>
+
     <article class="sample-column">
-        <h4 class="sample-title">With nav and action icons</h4>
-        <div class="navbar-sample dark-navbar">
+        <h4 class="sample-title">Title</h4>
+        <div class="navbar-sample">
+            <igx-navbar [title]="currentView" [isActionButtonVisible]="false">
+            </igx-navbar>
+        </div>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">Title + nav icon</h4>
+        <div class="navbar-sample">
+            <igx-navbar title="Sample App" actionButtonIcon="menu"></igx-navbar>
+        </div>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">Title, nav and action icons</h4>
+        <div class="navbar-sample">
             <igx-navbar title="Sample App" actionButtonIcon="menu">
                 <igx-icon>search</igx-icon>
                 <igx-icon>favorite</igx-icon>
@@ -11,40 +34,45 @@ <h4 class="sample-title">With nav and action icons</h4>
     </article>
 
     <article class="sample-column">
-        <h4 class="sample-title">With nav icon</h4>
+        <h4 class="sample-title">No title</h4>
         <div class="navbar-sample">
-            <igx-navbar [title]="currentView" actionButtonIcon="arrow_back" [isActionButtonVisible]="true"
-                (onAction)="navigateBack()">
+            <igx-navbar actionButtonIcon="menu">
+                <igx-icon>search</igx-icon>
+                <igx-icon>favorite</igx-icon>
+                <igx-icon>more_vert</igx-icon>
             </igx-navbar>
         </div>
     </article>
 
     <article class="sample-column">
-        <h4 class="sample-title">Without nav icon</h4>
+        <h4 class="sample-title">Only action icons</h4>
         <div class="navbar-sample">
-            <igx-navbar [title]="currentView" [isActionButtonVisible]="false">
+            <igx-navbar>
+                <igx-icon>search</igx-icon>
+                <igx-icon>favorite</igx-icon>
+                <igx-icon>more_vert</igx-icon>
             </igx-navbar>
         </div>
     </article>
 
     <article class="sample-column">
-        <h4 class="sample-title">With custom nav icon and action icons</h4>
-        <div class="navbar-sample dark-navbar">
+        <h4 class="sample-title">With custom nav icon</h4>
+        <div class="navbar-sample">
             <igx-navbar title="Sample App" actionButtonIcon="menu">
-                <igx-icon>search</igx-icon>
-                <igx-icon>favorite</igx-icon>
-                <igx-icon>more_vert</igx-icon>
-
                 <igx-navbar-action>
                     <igx-icon class="bidirectional-icon">arrow_back</igx-icon>
                 </igx-navbar-action>
+
+                <igx-icon>search</igx-icon>
+                <igx-icon>favorite</igx-icon>
+                <igx-icon>more_vert</igx-icon>
             </igx-navbar>
         </div>
     </article>
 
     <article class="sample-column">
-        <h4 class="sample-title">Navbar with title directive</h4>
-        <div class="navbar-sample dark-navbar">
+        <h4 class="sample-title">Directives override</h4>
+        <div class="navbar-sample">
             <igx-navbar title="Title sample">
                 <igx-icon igxNavbarAction>home</igx-icon>
 
@@ -58,18 +86,46 @@ <h4 class="sample-title">Navbar with title directive</h4>
     </article>
 
     <article class="sample-column">
-        <h4 class="sample-title">With icon buttons</h4>
-        <div class="navbar-sample dark-navbar">
-            <igx-navbar title="Sample App">
-                <igx-navbar-action>
-                    <button igxIconButton="flat">
-                        <igx-icon family="fa" name="fa-home"></igx-icon>
-                    </button>
-                </igx-navbar-action>
+        <h4 class="sample-title">icon buttons (flat, outlined, contained)</h4>
+        <div class="navbar-sample">
+            <igx-navbar actionButtonIcon="menu">
                 <button igxIconButton="flat"><igx-icon>search</igx-icon></button>
-                <button igxIconButton="flat"><igx-icon>favorite</igx-icon></button>
-                <button igxIconButton="flat"><igx-icon>more_vert</igx-icon></button>
+                <button igxIconButton="outlined"><igx-icon>favorite</igx-icon></button>
+                <button igxIconButton="contained"><igx-icon>more_vert</igx-icon></button>
+            </igx-navbar>
+        </div>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">buttons (flat, outlined, contained)</h4>
+        <div class="navbar-sample">
+            <igx-navbar actionButtonIcon="menu">
+                <button igxButton>button</button>
+                <button igxButton="outlined">button</button>
+                <button igxButton="contained">button</button>
+            </igx-navbar>
+        </div>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">Avatar and Progressbar</h4>
+        <div class="navbar-sample">
+            <igx-navbar actionButtonIcon="menu">
+                <igx-avatar initials="MP"></igx-avatar>
+                <igx-circular-bar indeterminate></igx-circular-bar>
             </igx-navbar>
         </div>
     </article>
+
+    <article class="sample-column" style="min-width: 100%">
+        <h4 class="sample-title">Search input</h4>
+        <div class="navbar-sample">
+            <igx-navbar actionButtonIcon="menu">
+                <igx-input-group type="search">
+                    <input name="inputSearchTest" #input igxInput placeholder="Search"/>
+                </igx-input-group>
+            </igx-navbar>
+        </div>
+    </article>
+
 </section>

src/app/navbar/navbar.sample.scss

@@ -4,10 +4,15 @@
         0 1px 1px 0 rgba(0, 0, 0, .14),
         0 2px 1px -1px rgba(0, 0, 0, .12);
     border-radius: 2px;
-    background: url('/assets/images/rsrcs/sample-background.svg') no-repeat;
+    background: url('/assets/images/rsrcs/sample-background.svg') no-repeat bottom;
     background-size: 100%;
 }
 
 [dir='rtl'] .bidirectional-icon {
     transform: scaleX(-1);
 }
+
+#igniteui-demo-app .sample-title {
+    font-size: 16px;
+    margin-bottom: 10px;
+}

src/app/navbar/navbar.sample.ts

@@ -1,6 +1,15 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { Location } from '@angular/common';
-import { IGX_NAVBAR_DIRECTIVES, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';
+import {Location} from '@angular/common';
+import {
+    IGX_NAVBAR_DIRECTIVES,
+    IGX_INPUT_GROUP_DIRECTIVES,
+    IgxAvatarComponent,
+    IgxButtonDirective,
+    IGX_PROGRESS_BAR_DIRECTIVES,
+    IgxIconButtonDirective,
+    IgxIconComponent,
+} from 'igniteui-angular';
+import {FormsModule} from "@angular/forms";
 
 
 const CURRENT_VIEW = 'Ignite UI for Angular Samples';
@@ -11,7 +20,7 @@ const CURRENT_VIEW = 'Ignite UI for Angular Samples';
     styleUrls: ['navbar.sample.scss'],
     templateUrl: 'navbar.sample.html',
     standalone: true,
-    imports: [IGX_NAVBAR_DIRECTIVES, IgxIconComponent, IgxButtonDirective, IgxIconButtonDirective]
+    imports: [IGX_NAVBAR_DIRECTIVES, IgxIconComponent, IgxButtonDirective, IgxIconButtonDirective, IgxAvatarComponent, IGX_PROGRESS_BAR_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, FormsModule]
 })
 export class NavbarSampleComponent implements OnInit {
     public currentView: string;