From d2439e085acba571b1e4c3ff4bf92359b766e552 Mon Sep 17 00:00:00 2001
From: Diana Pazheva <diana.pazheva@sap.com>
Date: Tue, 21 Nov 2023 11:14:12 +0200
Subject: [PATCH] feat(ui5-dynamic-page): ensure visibility of content outside
 overflow (#7845)

* feat(ui5-dynamic-page): ensure visibility of title content that never overflows

* feat(ui5-dynamic-page) actions style corrected

Co-authored-by: Dobrin Dimchev <dobrin.yonkov1@gmail.com>

* feat(ui5-dynamic-page): sizing of toolbar wrappers corrected

* feat(ui5-dynamic-page): apply review feedback

---------

Co-authored-by: Dobrin Dimchev <dobrin.yonkov1@gmail.com>
---
 packages/fiori/src/DynamicPageTitle.hbs    | 15 ++++++++-----
 packages/fiori/src/DynamicPageTitle.ts     | 23 +++++++++++++++++++
 packages/fiori/test/pages/DynamicPage.html |  4 ++--
 packages/main/src/Toolbar.ts               | 26 +++++++++++++++++++++-
 4 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs
index d16f77714045..d7e8686feece 100644
--- a/packages/fiori/src/DynamicPageTitle.hbs
+++ b/packages/fiori/src/DynamicPageTitle.hbs
@@ -11,18 +11,21 @@
     {{/if}}
   </div>
 
-  <div class="{{classes.wrapper}}">
+  <div class="{{classes.wrapper}}"
+  @ui5-_min-content-width-change={{onMinContentWidthChange}}>
     <div class="{{classes.heading}}">
       <slot name="{{headingSlotName}}"></slot>
     </div>
 
-   {{#if hasContent}}
-    <div class="{{classes.content}}"
-      <slot></slot>
-    </div>
+    {{#if hasContent}}
+      <div class="{{classes.content}}"
+        style="{{styles.content}}">
+        <slot></slot>
+      </div>
     {{/if}}
 
-    <div class="{{classes.actions}}">
+    <div class="{{classes.actions}}"
+      style="{{styles.actions}}">
       <slot name="actions"></slot>
       {{#unless mobileNavigationActions}}
         <div class="{{classes.actionsSeparator}}"></div>
diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts
index 0319361d55b8..9566942b9913 100644
--- a/packages/fiori/src/DynamicPageTitle.ts
+++ b/packages/fiori/src/DynamicPageTitle.ts
@@ -8,6 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
 
 // Template
 import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js";
@@ -75,6 +76,8 @@ class DynamicPageTitle extends UI5Element {
 	mobileNavigationActions!: boolean;
 
 	_handleResize: ResizeObserverCallback;
+	minContentWidth?: number;
+	minActionsWidth?: number;
 
 	constructor() {
 		super();
@@ -136,6 +139,17 @@ class DynamicPageTitle extends UI5Element {
 		};
 	}
 
+	get styles() {
+		return {
+			content: {
+				"min-width": `${this.minContentWidth || 0}px`,
+			},
+			actions: {
+				"min-width": `${this.minActionsWidth || 0}px`,
+			},
+		};
+	}
+
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResize);
 	}
@@ -162,6 +176,15 @@ class DynamicPageTitle extends UI5Element {
 	handleResize() {
 		this.mobileNavigationActions = this.offsetWidth < 1280;
 	}
+
+	onMinContentWidthChange(event: CustomEvent<ToolbarMinWidthChangeEventDetail>) {
+		const slotName = (<HTMLElement>event.target)?.assignedSlot?.name;
+		if (!slotName || slotName === "content") {
+			this.minContentWidth = event.detail.minWidth;
+		} else if (slotName === "actions") {
+			this.minActionsWidth = event.detail.minWidth;
+		}
+	}
 }
 
 DynamicPageTitle.define();
diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
index 726576c99892..7b8935a3a97d 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -56,14 +56,14 @@
                 </div>
 
                 <ui5-toolbar style="border: none" align-content="Start">
-                    <ui5-toolbar-button
+                    <ui5-toolbar-button overflow-priority="NeverOverflow"
                         text="KPI Generic tag"
                     ></ui5-toolbar-button>
                 </ui5-toolbar>
 
                 <ui5-toolbar slot="actions">
                     <ui5-toolbar-button id="toggleFooterBtn" text="Toggle Footer"></ui5-toolbar-button>
-                    <ui5-toolbar-button icon="edit"></ui5-toolbar-button>
+                    <ui5-toolbar-button text="Edit" overflow-priority="NeverOverflow"></ui5-toolbar-button>
                     <ui5-toolbar-button icon="delete"></ui5-toolbar-button>
                     <ui5-toolbar-button icon="copy"></ui5-toolbar-button>
                     <ui5-toolbar-button icon="share"></ui5-toolbar-button>
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 17eca059464c..a9795ee382c2 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -41,6 +41,10 @@ import {
 import Button from "./Button.js";
 import Popover from "./Popover.js";
 
+type ToolbarMinWidthChangeEventDetail = {
+	minWidth: number,
+};
+
 function calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number {
 	return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
 }
@@ -167,6 +171,7 @@ class Toolbar extends UI5Element {
 	_onInteract!: EventListener;
 	itemsToOverflow: Array<ToolbarItem> = [];
 	itemsWidth = 0;
+	minContentWidth = 0;
 	popoverOpen = false;
 	itemsWidthMeasured = false;
 
@@ -410,15 +415,31 @@ class Toolbar extends UI5Element {
 	}
 
 	storeItemsWidth() {
-		let totalWidth = 0;
+		let totalWidth = 0,
+			minWidth = 0;
 
 		this.items.forEach((item: ToolbarItem) => {
 			const itemWidth = this.getItemWidth(item);
 			totalWidth += itemWidth;
+			if (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) {
+				minWidth += itemWidth;
+			}
 			this.ITEMS_WIDTH_MAP.set(item._id, itemWidth);
 		});
 
+		if (minWidth && totalWidth > minWidth) {
+			minWidth += this.overflowButtonSize;
+		}
+
+		if (minWidth !== this.minContentWidth) {
+			const spaceAroundContent = this.offsetWidth - this.getDomRef()!.offsetWidth;
+			this.fireEvent<ToolbarMinWidthChangeEventDetail>("_min-content-width-change", {
+				minWidth: minWidth + spaceAroundContent,
+			});
+		}
+
 		this.itemsWidth = totalWidth;
+		this.minContentWidth = minWidth;
 	}
 
 	distributeItems(overflowSpace = 0) {
@@ -621,3 +642,6 @@ class Toolbar extends UI5Element {
 Toolbar.define();
 
 export default Toolbar;
+export type {
+	ToolbarMinWidthChangeEventDetail,
+};