feat(navbar): Change the title content of navbar #7377

Author: astaev

projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json

@@ -25,14 +25,6 @@
                 "selector": "igx-grid",
                 "type": "component"
             }
-        },
-        {
-            "name": "<igx-action-icon",
-            "replaceWith": "<igx-icon igxActionIcon"
-        },
-        {
-            "name": "IgxActionIconDirective",
-            "replaceWith": "IgxNavbarActionDirective"
         }
     ]
 }

projects/igniteui-angular/migrations/update-9_1_0/changes/selectors.json

@@ -3,8 +3,8 @@
     "changes": [
         {
             "type": "component",
-            "selector": "<igx-action-icon",
-            "replaceWith": "<igx-icon igxNavbarAction"
+            "selector": "<igx-action-icon>",
+            "replaceWith": "<igx-navbar-action>"
         }
     ]
 }

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

@@ -137,16 +137,14 @@
         }
     }
 
-    [igxNavbarAction] {
+    igx-navbar-action, [igxNavbarAction] {
         display: flex;
         align-items: center;
     }
 
-    [igxNavbarTitle] {
+    igx-navbar-title, [igxNavbarTitle] {
         display: flex;
         align-items: center;
-        font-size: $navbar-title-fz;
-        line-height: $navbar-title-lh;
         user-select: none;
     }
 }

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

@@ -2,11 +2,9 @@
     <div class="igx-navbar__left">
         <igx-icon (click)="_triggerAction()" fontSet="material" *ngIf="isActionButtonVisible">{{actionButtonIcon}}
         </igx-icon>
-        <ng-content select="[igxNavbarAction]"></ng-content>
+        <ng-content select="igx-navbar-action,[igxNavbarAction]"></ng-content>
         <h1 *ngIf="!isTitleContentVisible" class="igx-navbar__title" [attr.id]="titleId">{{ title }}</h1>
-    </div>
-    <div class="igx-navbar__middle">
-        <ng-content select="[igxNavbarTitle]"></ng-content>
+        <ng-content select="igx-navbar-title,[igxNavbarTitle]"></ng-content>
     </div>
     <div class="igx-navbar__right">
         <ng-content></ng-content>

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

@@ -17,12 +17,12 @@ import { IgxIconModule } from '../icon/public_api';
  */
 @Directive({
     // tslint:disable-next-line:directive-selector
-    selector: '[igxNavbarAction]'
+    selector: 'igx-navbar-action,[igxNavbarAction]'
 })
 export class IgxNavbarActionDirective { }
 
 @Directive({
-    selector: '[igxNavbarTitle]',
+    selector: 'igx-navbar-title,[igxNavbarTitle]',
 
 })
 export class IgxNavbarTitleDirective { }

src/app/navbar/navbar.sample.html

@@ -39,7 +39,9 @@ <h4 class="sample-title">With custom nav icon and action icons</h4>
                     <igx-icon>favorite</igx-icon>
                     <igx-icon>more_vert</igx-icon>
 
-                    <igx-icon igxNavbarAction fontSet="material" class="bidirectional-icon">arrow_back</igx-icon>
+                    <igx-navbar-action>
+                        <igx-icon fontSet="material" class="bidirectional-icon">arrow_back</igx-icon>
+                    </igx-navbar-action>
                 </igx-navbar>
             </div>
         </article>
@@ -49,7 +51,6 @@ <h4 class="sample-title">Navbar with title directive</h4>
             <div class="navbar-sample dark-navbar">
                 <igx-navbar title="Title sample">
                     <igx-icon igxNavbarAction>home</igx-icon>
-                    <div igxNavbarAction>IG</div>
 
                     <div igxNavbarTitle>IG Title</div>