feat(ui5-dynamic-page): ensure visibility of content outside overflow

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>

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();

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>

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,
+};