fix: refactor Action Bar title to follow the latest fund-styles (#3466)

BREAKING CHANGE:
fd-action-bar-title directive is now a component.

apps/docs/src/app/core/api-files.ts

@@ -7,12 +7,12 @@
 export const API_FILES = {
     actionBar: [
         'ActionBarComponent',
+        'ActionBarTitleComponent',
         'ActionBarActionsDirective',
         'ActionBarBackDirective',
         'ActionBarDescriptionDirective',
         'ActionBarHeaderDirective',
-        'ActionBarMobileDirective',
-        'ActionBarTitleDirective'
+        'ActionBarMobileDirective'
     ],
     alert: ['AlertComponent', 'AlertConfig', 'AlertService', 'AlertRef'],
     avatar: ['AvatarComponent'],

apps/docs/src/app/core/component-docs/action-bar/examples/action-bar-back-example.component.html

@@ -9,7 +9,7 @@
                 [glyph]="navigationArrow$ | async"
             ></button>
         </div>
-        <h3 fd-action-bar-title>Page Title</h3>
+        <div fd-action-bar-title>Page Title</div>
         <div fd-action-bar-actions>
             <button fd-button label="Cancel" [compact]="true"></button>
             <button fd-button label="Save" [compact]="true" [fdType]="'emphasized'"></button>

apps/docs/src/app/core/component-docs/action-bar/examples/action-bar-contextual-menu-example.component.html

@@ -1,8 +1,7 @@
 <div fd-action-bar>
     <div fd-action-bar-header>
-        <h3 fd-action-bar-title>Page Title</h3>
+        <div fd-action-bar-title>Page Title</div>
         <div fd-action-bar-actions>
-
             <button
                 fd-button
                 aria-label="More"

apps/docs/src/app/core/component-docs/action-bar/examples/action-bar-long-string-title-truncation-example.component.html

@@ -9,10 +9,10 @@
                 [glyph]="navigationArrow$ | async"
             ></button>
         </div>
-        <h3 fd-action-bar-title>
+        <div fd-action-bar-title>
             Page Title Demo for very very very very very very very very very very very very very very very very very
             very very long text
-        </h3>
+        </div>
         <div fd-action-bar-actions>
             <button fd-button label="Cancel" [compact]="true"></button>
             <button fd-button label="Save" [compact]="true" [fdType]="'emphasized'"></button>

apps/docs/src/app/core/component-docs/action-bar/examples/action-bar-mobile-example.component.html

@@ -9,9 +9,8 @@
                 [glyph]="navigationArrow$ | async"
             ></button>
         </div>
-        <h3 fd-action-bar-title>Page Title</h3>
+        <div fd-action-bar-title>Page Title</div>
         <div fd-action-bar-actions>
-
             <button
                 fd-button
                 aria-label="More"
@@ -87,7 +86,6 @@ <h3 fd-action-bar-title>Page Title</h3>
                     </div>
                 </li>
             </fd-menu>
-
         </div>
     </div>
     <p fd-action-bar-description [withBackBtn]="true">Action bar Description</p>

apps/docs/src/app/core/component-docs/action-bar/examples/action-bar-no-back-example.component.html

@@ -1,6 +1,6 @@
 <div fd-action-bar>
     <div fd-action-bar-header>
-        <h3 fd-action-bar-title>Page Title</h3>
+        <div fd-action-bar-title>Page Title</div>
         <div fd-action-bar-actions>
             <button fd-button label="Cancel" [compact]="true"></button>
             <button fd-button label="Save" [compact]="true" [fdType]="'emphasized'"></button>

libs/core/src/lib/action-bar/action-bar-title/action-bar-title.directive.spec.ts → libs/core/src/lib/action-bar/action-bar-title/action-bar-title.component.spec.ts

@@ -1,17 +1,16 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import { ActionBarTitleDirective } from './action-bar-title.directive';
 import { ActionBarModule } from '../action-bar.module';
 
 @Component({
-    template: ` <h1 #directiveElement fd-action-bar-title>Action Bar Title Test Text</h1> `
+    template: `<div #componentElement fd-action-bar-title>Action Bar Title Test Text</div> `
 })
 class TestComponent {
-    @ViewChild('directiveElement')
+    @ViewChild('componentElement', { read: ElementRef })
     ref: ElementRef;
 }
 
-describe('ActionBarTitleDirective', () => {
+describe('ActionBarTitleComponent', () => {
     let component: TestComponent;
     let fixture: ComponentFixture<TestComponent>;
 

libs/core/src/lib/action-bar/action-bar-title/action-bar-title.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * The action bar title component.
+ *
+ * ```html
+ * <fd-action-bar>
+ *     <div fd-action-bar-header>
+ *         <div fd-action-bar-title>Page Title</div>
+ *     </div>
+ * <fd-action-bar>
+ * ```
+ */
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: '[fd-action-bar-title]',
+    template: `
+        <h2 class="fd-title fd-title--h3">
+            <ng-content></ng-content>
+        </h2>
+    `,
+    host: {
+        class: 'fd-action-bar__title'
+    },
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionBarTitleComponent {}

libs/core/src/lib/action-bar/action-bar.component.scss

@@ -1 +1,2 @@
 @import '~fundamental-styles/dist/action-bar';
+@import '~fundamental-styles/dist/title';

libs/core/src/lib/action-bar/action-bar.component.ts

@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
  * <div fd-action-bar-description>
  * <div fd-action-bar-header>
  * <div fd-action-bar-mobile>
- * <h1 fd-action-bar-title>
+ * <div fd-action-bar-title>
  * ```
  */
 @Component({

libs/core/src/lib/action-bar/action-bar.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ActionBarComponent } from './action-bar.component';
-import { ActionBarTitleDirective } from './action-bar-title/action-bar-title.directive';
+import { ActionBarTitleComponent } from './action-bar-title/action-bar-title.component';
 import { ActionBarDescriptionDirective } from './action-bar-description/action-bar-description.directive';
 import { ActionBarHeaderDirective } from './action-bar-header/action-bar-header.directive';
 import { ActionBarActionsDirective } from './action-bar-actions/action-bar-actions.directive';
@@ -12,7 +12,7 @@ import { ActionBarMobileDirective } from './action-bar-mobile/action-bar-mobile.
 @NgModule({
     declarations: [
         ActionBarComponent,
-        ActionBarTitleDirective,
+        ActionBarTitleComponent,
         ActionBarDescriptionDirective,
         ActionBarHeaderDirective,
         ActionBarActionsDirective,
@@ -22,7 +22,7 @@ import { ActionBarMobileDirective } from './action-bar-mobile/action-bar-mobile.
     imports: [CommonModule],
     exports: [
         ActionBarComponent,
-        ActionBarTitleDirective,
+        ActionBarTitleComponent,
         ActionBarDescriptionDirective,
         ActionBarHeaderDirective,
         ActionBarActionsDirective,

libs/core/src/lib/action-bar/public_api.ts

@@ -1,8 +1,8 @@
 export * from './action-bar.module';
 export * from './action-bar.component';
+export * from './action-bar-title/action-bar-title.component';
 export * from './action-bar-actions/action-bar-actions.directive';
 export * from './action-bar-description/action-bar-description.directive';
 export * from './action-bar-header/action-bar-header.directive';
-export * from './action-bar-title/action-bar-title.directive';
 export * from './action-bar-back/action-bar-back.directive';
 export * from './action-bar-mobile/action-bar-mobile.directive';