From 6b0c4f2d37320ce9a61360cc85c6c8a0b3aebfea Mon Sep 17 00:00:00 2001
From: Diana Pazheva <diana.pazheva@sap.com>
Date: Tue, 14 Nov 2023 13:50:54 +0200
Subject: [PATCH] feat(ui5-dynamic-page): ensure visibility of title content
 that never overflows

---
 packages/fiori/src/DynamicPageTitle.hbs    |  9 +++++---
 packages/fiori/src/DynamicPageTitle.ts     | 23 ++++++++++++++++++++
 packages/fiori/test/pages/DynamicPage.html |  8 +++----
 packages/main/src/Toolbar.ts               | 25 +++++++++++++++++++++-
 4 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs
index 81ce52ac1e1c..e0ce990f9006 100644
--- a/packages/fiori/src/DynamicPageTitle.hbs
+++ b/packages/fiori/src/DynamicPageTitle.hbs
@@ -11,16 +11,19 @@
     {{/if}}
   </div>
 
-  <div class="{{classes.wrapper}}">
+  <div class="{{classes.wrapper}}"
+  @ui5-_minContentWidthChange={{onMinContentWidthChange}}>
     <div class="{{classes.heading}}">
       <slot name="{{headingSlotName}}"></slot>
     </div>
 
-    <div class="{{classes.content}}">
+   <div class="{{classes.content}}"
+      style="{{styles.content}}">
       <slot></slot>
     </div>
 
-    <div class="{{classes.actions}}">
+    <div class="{{classes.actions}}"
+      style="{{styles.content}}">
       <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 85a8cbd8be19..4dace82465a3 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();
@@ -129,6 +132,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);
 	}
@@ -155,6 +169,15 @@ class DynamicPageTitle extends UI5Element {
 	handleResize() {
 		this.mobileNavigationActions = this.offsetWidth < 1280;
 	}
+
+	onMinContentWidthChange(event: CustomEvent<ToolbarMinWidthChangeEventDetail>) {
+		const container = (<HTMLElement>event.target)?.assignedSlot?.parentElement;
+		if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--content")) {
+			this.minContentWidth = event.detail.minWidth;
+		} else if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--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 26e6eb8883f4..1e61e692e950 100644
--- a/packages/fiori/test/pages/DynamicPage.html
+++ b/packages/fiori/test/pages/DynamicPage.html
@@ -56,15 +56,15 @@
                 </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 icon="edit"></ui5-toolbar-button>
-                    <ui5-toolbar-button icon="delete"></ui5-toolbar-button>
-                    <ui5-toolbar-button icon="copy"></ui5-toolbar-button>
+                    <ui5-toolbar-button text="Edit" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+                    <ui5-toolbar-button text="Delete"></ui5-toolbar-button>
+                    <ui5-toolbar-button text="Copy"></ui5-toolbar-button>
                     <ui5-toolbar-button icon="share"></ui5-toolbar-button>
                 </ui5-toolbar>
 
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 17eca059464c..5cc71bb55cb3 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,30 @@ 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) {
+			this.fireEvent<ToolbarMinWidthChangeEventDetail>("_minContentWidthChange", {
+				minWidth,
+			});
+		}
+
 		this.itemsWidth = totalWidth;
+		this.minContentWidth = minWidth;
 	}
 
 	distributeItems(overflowSpace = 0) {
@@ -621,3 +641,6 @@ class Toolbar extends UI5Element {
 Toolbar.define();
 
 export default Toolbar;
+export type {
+	ToolbarMinWidthChangeEventDetail,
+};