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

… overflows
SAP · Nov 14, 2023 · 57d6ac7 · 57d6ac7
1 parent 0b42d7d
commit 57d6ac7
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 8 deletions.
diff --git 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-_minWidthChange={{onContentMinWidthChange}}>
     <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
@@ -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 { MinWidthChangeEventDetail } 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;
 	}
+
+	onContentMinWidthChange(event: CustomEvent<MinWidthChangeEventDetail>) {
+		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
@@ -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
@@ -41,6 +41,10 @@ import {
 import Button from "./Button.js";
 import Popover from "./Popover.js";
 
+type MinWidthChangeEventDetail = {
+	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;
+	minRequiredWidth = 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.minRequiredWidth) {
+			this.fireEvent<MinWidthChangeEventDetail>("_minWidthChange", {
+				minWidth,
+			});
+		}
+
 		this.itemsWidth = totalWidth;
+		this.minRequiredWidth = minWidth;
 	}
 
 	distributeItems(overflowSpace = 0) {
@@ -621,3 +641,6 @@ class Toolbar extends UI5Element {
 Toolbar.define();
 
 export default Toolbar;
+export type {
+	MinWidthChangeEventDetail,
+};