Merge branch 'dynamic-page' into dynamic-page-petya

SAP · Nov 21, 2023 · 551a290 · 551a290
2 parents 13d66e1 + d488bd3
commit 551a290
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs
@@ -1,7 +1,7 @@
 <div class="{{classes.root}}">
-  <div class="{{classes.breadcrumbs}}">
+  <div class="{{classes.topArea}}">
     {{#if hasBreadcrumb}}
-      <div>
+      <div class="{{classes.breadcrumbs}}">
         <slot name="breadcrumbs"></slot>
       </div>
     {{/if}}
@@ -16,9 +16,11 @@
       <slot name="{{headingSlotName}}"></slot>
     </div>
 
-    <div class="{{classes.content}}">
+   {{#if hasContent}}
+    <div class="{{classes.content}}"
       <slot></slot>
     </div>
+    {{/if}}
 
     <div class="{{classes.actions}}">
       <slot name="actions"></slot>

diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts
@@ -85,6 +85,10 @@ class DynamicPageTitle extends UI5Element {
 		return !!this.breadcrumbs.length;
 	}
 
+	get hasContent() {
+		return !!this.content.length;
+	}
+
 	get hasHeading() {
 		return !!this.heading.length;
 	}
@@ -108,6 +112,9 @@ class DynamicPageTitle extends UI5Element {
 			root: {
 				"ui5-dynamic-page-title-root": true,
 			},
+			topArea: {
+				"ui5-dynamic-page-title--top-area": true,
+			},
 			breadcrumbs: {
 				"ui5-dynamic-page-title--breadcrumbs": true,
 			},

diff --git a/packages/fiori/src/themes/DynamicPageTitle.css b/packages/fiori/src/themes/DynamicPageTitle.css
@@ -111,8 +111,12 @@
     flex: 0 1;
 }
 
-.ui5-dynamic-page-title--breadcrumbs {
+.ui5-dynamic-page-title--top-area {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
+
+.ui5-dynamic-page-title--breadcrumbs {
+    width: 100%;
+}
diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html
@@ -70,8 +70,8 @@
                 </ui5-toolbar>
 
                 <ui5-toolbar slot="navigationActions">
-                    <ui5-toolbar-button icon="edit"></ui5-toolbar-button>
-                    <ui5-toolbar-button icon="delete"></ui5-toolbar-button>
+                    <ui5-toolbar-button icon="full-screen"></ui5-toolbar-button>
+                    <ui5-toolbar-button icon="decline"></ui5-toolbar-button>
                 </ui5-toolbar>
             </ui5-dynamic-page-title>
             <ui5-dynamic-page-header slot="headerArea">

diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
@@ -7,6 +7,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
 	isEnter,
 	isSpace,
@@ -252,7 +253,9 @@ class Breadcrumbs extends UI5Element {
 		this._preprocessItems();
 	}
 
-	onAfterRendering() {
+	async onAfterRendering() {
+		await renderFinished();
+
 		this._cacheWidths();
 		this._updateOverflow();
 	}