fix(core): toolbar bar horizon updates (#8051)

* fix(core,platform): shellbar breaking changes adoption * fix(core,platform): toolbar breaking changes adoption BREAKING CHANGE: * toolbar title now requires fd-toolbar__title class * fix(core,platform): table breaking changes adoption BREAKING CHANGE: * wrap text in table cell in fd-table-text directive to have the text-shadow * fix(core,platform): calendar breaking changes adoption * fix(core): shellbar action-sheet instead of list * test(core,platform): e2e fixes * fix(docs): fix button type * chore(core,platform): fund styles version bump to v0.24.0-rc.41 * fix(docs): fixed documentation sidebar background color * fix(docs): fixed documentation page compatibility with themes * chore(deps): bumped fundamental-styles * chore(e2e): updated selector for sidenav control * fix(core,platform): fixed split button missing class (#8034) * feat(platform): icon tab bar horizon theme adaptation (#8006) * fix(platform): removed unnecessary more(extra) button directive * fix(platform): fixed unit test * chore(e2e): fixed e2e * chore(core,platform): fund styles version bump to v0.24.0-rc.53 * fix(core,platform): calendar year & month items * test(core): e2e fixes * fix(core): vertical nav styles derivation from styles lib * test(core,platform): e2e fixes for calendar based comps * test(core,platform): e2e fixes for calendar based comps * fix(core,platform): calendar year & months items styling * fix(core): update toolbar and bar for horizon * fix(core,platform): adjust toolbar component for dynamic page (#8052) * feat(core): more toolbar updates * feat(core): more toolbar improvements allowing and documenting both title approaches * fix(core): title token * fix(core): accidental change Co-authored-by: Platon Rov <[email protected]> Co-authored-by: g-cheishvili <[email protected]> Co-authored-by: N1XUS <[email protected]>
SAP · May 20, 2022 · 6eb8e53 · 6eb8e53
1 parent 280de1d
commit 6eb8e53
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 22 deletions.
diff --git a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-title-example.component.html b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-title-example.component.html
@@ -1,3 +1,8 @@
-<fd-toolbar [hasTitle]="true">
-    <h4 class="fd-title fd-title--h4 fd-toolbar__title">H4 sized text</h4>
+<h5 fd-title>Title via Input Property</h5>
+<fd-toolbar title="H4 sized text"></fd-toolbar>
+<br />
+<h5 fd-title>Title via ng-content</h5>
+<fd-toolbar>
+    <h4 fd-title>H4 sized text with Icon</h4>
+    <fd-icon glyph="account"></fd-icon>
 </fd-toolbar>
diff --git a/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html b/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html
@@ -11,8 +11,10 @@
 
 <fd-docs-section-title id="title" componentName="toolbar"> Toolbar Title </fd-docs-section-title>
 <description>
-    When the text inside a Toolbar is set to h4, the <code class="code-snippet">[hasTitle]="true"</code> must be used as
-    seen in the exmaple below.
+    There are two ways to add a title to a toolbar component. The simplest way, when only text is needed, is to pass a
+    string to the <code>[title]</code> input. For more complex titles, such as those containing icons or other elements,
+    pass a <code>&lt;h4 fd-title&gt;</code> component along with the other elements inside the
+    <code>&lt;fd-toolbar&gt;</code> as shown in the second example below.
 </description>
 <component-example>
     <fd-toolbar-title-example></fd-toolbar-title-example>

diff --git a/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.module.ts b/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.module.ts
@@ -26,6 +26,7 @@ import { FormModule } from '@fundamental-ngx/core/form';
 import { FdDatetimeModule } from '@fundamental-ngx/core/datetime';
 import { DatetimePickerModule } from '@fundamental-ngx/core/datetime-picker';
 import { ToolbarOverflowExampleComponent } from './examples/toolbar-overflow-example.component';
+import { TitleModule } from '@fundamental-ngx/core/title';
 
 const examples = [
     ToolbarTypeExampleComponent,
@@ -62,7 +63,8 @@ const routes: Routes = [
         CheckboxModule,
         FormModule,
         FdDatetimeModule,
-        DatetimePickerModule
+        DatetimePickerModule,
+        TitleModule
     ],
     exports: [RouterModule],
     declarations: [ToolbarDocsComponent, ToolbarHeaderComponent, ...examples]

diff --git a/libs/core/src/lib/bar/directives/bar-element.directive.spec.ts b/libs/core/src/lib/bar/directives/bar-element.directive.spec.ts
@@ -49,11 +49,4 @@ describe('BarElementDirective', () => {
         fixture.detectChanges();
         expect(component.ref.nativeElement.className).toContain('fd-bar__element--full-width');
     });
-
-    it('should take into account the "isTitle" input property', () => {
-        expect(component.ref.nativeElement.className).not.toContain('fd-bar__element--title');
-        component.isTitle = true;
-        fixture.detectChanges();
-        expect(component.ref.nativeElement.className).toContain('fd-bar__element--title');
-    });
 });
diff --git a/libs/core/src/lib/bar/directives/bar-element.directive.ts b/libs/core/src/lib/bar/directives/bar-element.directive.ts
@@ -13,9 +13,8 @@ export class BarElementDirective {
     @HostBinding('class.fd-bar__element--full-width')
     fullWidth = false;
 
-    /** Whether the element is title. */
+    /** @deprecated */
     @Input()
-    @HostBinding('class.fd-bar__element--title')
     isTitle = false;
 
     /** @hidden */

diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions-mobile.component.html b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions-mobile.component.html
@@ -0,0 +1,24 @@
+<div class="fd-shellbar-collapse">
+    <fd-action-sheet placement="bottom-end">
+        <fd-action-sheet-control>
+            <button fd-button glyph="overflow" class="fd-shellbar__button" [attr.aria-label]="collapsedItemMenuLabel">
+                <span *ngIf="totalNotifications" class="fd-button__badge">
+                    {{ totalNotifications }}
+                </span>
+            </button>
+        </fd-action-sheet-control>
+
+        <fd-action-sheet-body>
+            <li
+                fd-action-sheet-item
+                *ngFor="let action of shellbarActions"
+                tabindex="-1"
+                [glyph]="action.glyph"
+                [label]="action.label"
+                (click)="actionClicked(action, $event)"
+            >
+                <span *ngIf="action.notificationCount" class="fd-button__badge">{{ action.notificationCount }}</span>
+            </li>
+        </fd-action-sheet-body>
+    </fd-action-sheet>
+</div>
diff --git a/libs/core/src/lib/title/title.component.ts b/libs/core/src/lib/title/title.component.ts
@@ -4,6 +4,10 @@ import { Nullable } from '@fundamental-ngx/core/shared';
 
 export type HeaderSizes = 1 | 2 | 3 | 4 | 5 | 6;
 
+export abstract class TitleToken {
+    abstract elementRef: ElementRef;
+}
+
 @Component({
     // eslint-disable-next-line
     selector: 'h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]',
@@ -15,9 +19,10 @@ export type HeaderSizes = 1 | 2 | 3 | 4 | 5 | 6;
     },
     styleUrls: ['./title.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: TitleToken, useExisting: TitleComponent }]
 })
-export class TitleComponent implements OnInit {
+export class TitleComponent extends TitleToken implements OnInit {
     /** The size of the header */
     _headerSize: Nullable<HeaderSizes> = null;
 
@@ -41,13 +46,20 @@ export class TitleComponent implements OnInit {
     private _appliedHeaderSize: number;
 
     /** @hidden */
-    constructor(private _elementRef: ElementRef) {}
+    constructor(private _elementRef: ElementRef) {
+        super();
+    }
 
     /** @hidden */
     ngOnInit(): void {
         this._setHeaderSize();
     }
 
+    /** returns the reference to the title element */
+    get elementRef(): ElementRef {
+        return this._elementRef;
+    }
+
     /** @hidden */
     private _setHeaderSize(): void {
         let headerSize;

diff --git a/libs/core/src/lib/toolbar/toolbar.component.html b/libs/core/src/lib/toolbar/toolbar.component.html
@@ -1,4 +1,5 @@
 <div #toolbar>
+    <h4 *ngIf="title" class="fd-title fd-title--h4 fd-toolbar__title">{{ title }}</h4>
     <ng-content></ng-content>
     <ng-container *ngIf="shouldOverflow">
         <span #overflowSpacer class="fd-toolbar__spacer"></span>

diff --git a/libs/core/src/lib/toolbar/toolbar.component.ts b/libs/core/src/lib/toolbar/toolbar.component.ts
@@ -1,9 +1,11 @@
 import {
+    AfterContentInit,
     AfterViewChecked,
     AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    ContentChild,
     ContentChildren,
     ElementRef,
     forwardRef,
@@ -30,6 +32,7 @@ import {
 import { fromEvent, Observable, of, Subscription } from 'rxjs';
 import { debounceTime, delay, distinctUntilChanged, filter, takeWhile } from 'rxjs/operators';
 import { ToolbarItemDirective } from './toolbar-item.directive';
+import { TitleToken } from '@fundamental-ngx/core/title';
 
 const ELEMENT_MARGIN = 8;
 const OVERFLOW_SPACE = 50 + 2 * ELEMENT_MARGIN;
@@ -54,7 +57,9 @@ export const enum OverflowPriorityEnum {
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy, AfterViewChecked, CssClassBuilder {
+export class ToolbarComponent
+    implements OnInit, AfterViewInit, OnDestroy, AfterViewChecked, CssClassBuilder, AfterContentInit
+{
     /** Property allows user to pass additional class
      */
     @Input()
@@ -80,12 +85,14 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy, After
     @Input()
     size: ToolbarSize = null;
 
-    /** Determines if toolbar contains text which size is equal to h4
-     * Default value: false
-     */
+    /** @deprecated */
     @Input()
     hasTitle = false;
 
+    /** The title for the toolbar. */
+    @Input()
+    title: string;
+
     /** Determines if toolbar should has active state (only when fdType == 'info')
      * Default value: false
      */
@@ -118,6 +125,10 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy, After
     @ContentChildren(forwardRef(() => ToolbarItemDirective))
     toolbarItems: QueryList<ToolbarItemDirective>;
 
+    /** @hidden */
+    @ContentChild(TitleToken)
+    titleComponent: TitleToken | null = null;
+
     /** @hidden */
     overflowVisibility: Observable<boolean> = of(false);
 
@@ -206,6 +217,14 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy, After
         this.buildComponentCssClass();
     }
 
+    /** @hidden */
+    ngAfterContentInit(): void {
+        if (this.titleComponent) {
+            this.titleComponent.elementRef?.nativeElement.classList.add('fd-toolbar__title');
+            this.buildComponentCssClass();
+        }
+    }
+
     /** @hidden */
     ngOnDestroy(): void {
         this._subscriptions.unsubscribe();
@@ -230,7 +249,7 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy, After
             `fd-toolbar--${this.fdType}`,
             `${this.active && this.fdType === 'info' ? 'fd-toolbar--active' : ''}`,
             `${this.size === 'cozy' ? 'fd-toolbar--cozy' : ''}`,
-            `${this.hasTitle ? 'fd-toolbar--title' : ''}`,
+            `${this.hasTitle || this.title || this.titleComponent ? 'fd-toolbar--title' : ''}`,
             `${this.clearBorder ? 'fd-toolbar--clear' : ''}`,
             `${this._dynamicPageHeader ? 'fd-dynamic-page__toolbar' : ''}`
         ];