fix: (Platform) fix tabChange event not emitting in Dynamic Page (#4515)

* fix: (Platform) fix tabChange event not emitting in Dynamic Page - also fix disable header example background inherit on hover - few a11y fixes for disable header example * add correct log value to display on console
SAP · Feb 3, 2021 · d6fc7e0 · d6fc7e0
1 parent f8cfda6
commit d6fc7e0
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 16 deletions.
diff --git a/...platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.ts b/...platform-dynamic-page-examples/platform-dynamic-page-flexible-column-example.component.ts
@@ -89,7 +89,7 @@ export class PlatformDynamicPageFlexibleColumnExampleComponent {
     }
 
     onTabChanged(event: DynamicPageTabChangeEvent): void {
-        console.log('tab changed to ' + event.payload);
+        console.log('tab changed to ' + event.payload.id);
     }
 
     onLayoutChanged(layout: FlexibleColumnLayout): void {

diff --git a/...atform-dynamic-page-examples/platform-dynamic-page-non-collapsible-example.component.html b/...atform-dynamic-page-examples/platform-dynamic-page-non-collapsible-example.component.html
@@ -4,7 +4,7 @@
         <div class="overlay-content">
             <fdp-dynamic-page size="large" ariaLabel="Example Dynamic Page">
                 <fdp-dynamic-page-title
-                    title="Balenciaga Tripple S Trainers"
+                    [title]="pageTitle"
                     subtitle="Oversized multimaterial sneakers with quilted effect"
                 >
                     <!-- breadcrumb content -->
@@ -37,6 +37,7 @@
                                 fdType="positive"
                                 (click)="closePage($event)"
                                 label="Accept"
+                                title="Accept"
                             ></button>
                             <button
                                 fd-toolbar-item
@@ -45,25 +46,27 @@
                                 fdType="negative"
                                 (click)="closePage($event)"
                                 label="Reject"
+                                title="Reject"
                             ></button>
                             <fd-toolbar-separator></fd-toolbar-separator>
                         </fd-toolbar>
                     </fdp-dynamic-page-global-actions>
                     <fdp-dynamic-page-layout-actions>
                         <!-- layout actions -->
                         <fd-toolbar fdType="transparent" [clearBorder]="true">
-                            <button fd-button fdType="transparent" aria-label="Resize" (click)="resizeClicked($event)">
+                            <button fd-button fdType="transparent" aria-label="Resize" (click)="resizeClicked($event)" title="Resize">
                                 <i class="sap-icon--resize"></i>
                             </button>
                             <button
                                 fd-button
                                 fdType="transparent"
                                 aria-label="Exit Fullscreen"
                                 (click)="closePage($event)"
+                                title="Exit Fullscreen"
                             >
                                 <i class="sap-icon--exitfullscreen"></i>
                             </button>
-                            <button fd-button fdType="transparent" aria-label="Close" (click)="closePage($event)">
+                            <button fd-button fdType="transparent" aria-label="Close" (click)="closePage($event)" title="Close">
                                 <i class="sap-icon--decline"></i>
                             </button>
                         </fd-toolbar>

diff --git a/...platform-dynamic-page-examples/platform-dynamic-page-non-collapsible-example.component.ts b/...platform-dynamic-page-examples/platform-dynamic-page-non-collapsible-example.component.ts
@@ -13,6 +13,8 @@ export class PlatformDynamicPageNonCollapsibleExampleComponent {
 
     fullscreen = false;
 
+    pageTitle = 'Balenciaga Tripple S Trainers';
+
     onCollapseChange(event: DynamicPageCollapseChangeEvent): void {
         console.log('collapse changed');
     }

diff --git a/...mic-page/platform-dynamic-page-examples/platform-dynamic-page-tabbed-example.component.ts b/...mic-page/platform-dynamic-page-examples/platform-dynamic-page-tabbed-example.component.ts
@@ -32,6 +32,6 @@ export class PlatformDynamicPageTabbedExampleComponent {
     }
 
     onTabChanged(event: DynamicPageTabChangeEvent): void {
-        console.log('tab changed to ' + event.payload);
+        console.log('tab changed to ' + event.payload.id);
     }
 }
diff --git a/...rm/src/lib/components/dynamic-page/dynamic-page-content/dynamic-page-content.component.ts b/...rm/src/lib/components/dynamic-page/dynamic-page-content/dynamic-page-content.component.ts
@@ -11,13 +11,14 @@ import {
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
+import { TabPanelComponent } from '@fundamental-ngx/core';
 
 import { DynamicPageBackgroundType, CLASS_NAME, DynamicPageResponsiveSize } from '../constants';
 import { addClassNameToElement } from '../utils';
 
 /** Dynamic Page tab change event */
 export class DynamicPageTabChangeEvent {
-    constructor(public source: DynamicPageContentComponent, public payload: number) {}
+    constructor(public source: DynamicPageContentComponent, public payload: TabPanelComponent) {}
 }
 @Component({
     selector: 'fdp-dynamic-page-content',

diff --git a/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.html b/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.html
@@ -9,7 +9,7 @@
     </header>
 
     <div class="fd-dynamic-page__tabs--overflow" *ngIf="isTabbed" #contentContainer>
-        <fd-tab-list (selectedIndexChange)="_handleTabChange($event)">
+        <fd-tab-list (selectedTabChange)="_handleTabChange($event)">
             <ng-container *ngFor="let tab of tabs; let i = index">
                 <fd-tab [title]="tab.tabLabel">
                     <fdp-dynamic-page-tabbed-content

diff --git a/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.scss b/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.scss
@@ -9,15 +9,8 @@
 }
 
 .fd-dynamic-page__header--not-collapsible {
-
-    .fd-dynamic-page__title-area.is-focus,
-    .fd-dynamic-page__title-area:focus {
-        outline: none;
-    }
-
     .fd-dynamic-page__title-area.is-hover,
     .fd-dynamic-page__title-area:hover {
-        background: inherit;
         cursor: default;
     }
 }

diff --git a/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.ts b/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.ts
@@ -16,6 +16,7 @@ import {
     ViewChildren,
     ViewEncapsulation
 } from '@angular/core';
+import { TabPanelComponent } from '@fundamental-ngx/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime, startWith, throttleTime } from 'rxjs/operators';
 import { BaseComponent } from '../base';
@@ -441,8 +442,8 @@ export class DynamicPageComponent extends BaseComponent implements AfterContentI
     /** @hidden
      * handle tab changes and emit event
      */
-    _handleTabChange(index: number): void {
-        const event = new DynamicPageTabChangeEvent(this.contentComponent, index);
+    _handleTabChange(tabPanel: TabPanelComponent): void {
+        const event = new DynamicPageTabChangeEvent(this.contentComponent, tabPanel);
         this.contentComponent.tabChange.emit(event);
         this._cd.detectChanges();
     }