feat(ui5-dynamic-page-title): streamline snapped title handling on mo…

…bile Refactored the implementation to pass the "snappedTitleOnMobile" state from parent to child. This change ensures proper state management, addressing previous review comments.
SAP · Sep 26, 2024 · 982ec0a · 982ec0a
1 parent 5aaa5f6
commit 982ec0a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
@@ -224,6 +224,7 @@ class DynamicPage extends UI5Element {
 		if (this.dynamicPageTitle) {
 			this.dynamicPageTitle.snapped = this._headerSnapped;
 			this.dynamicPageTitle.interactive = this.hasHeading;
+			this.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;
 		}
 	}
 

diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts
@@ -12,7 +12,7 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
 import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
 import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js";
-import { isDesktop, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 
@@ -113,6 +113,13 @@ class DynamicPageTitle extends UI5Element {
 	@property({ type: Number })
 	minActionsWidth?: number;
 
+	/**
+	 * Indicates whether the title has snapped on mobile devices.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	hasSnappedTitleOnMobile = false;
+
 	/**
 	 * Defines the content of the Heading of the Dynamic Page.
 	 *
@@ -148,7 +155,7 @@ class DynamicPageTitle extends UI5Element {
 	 * @public
 	 * @since 2.3.0
 	 */
-	@slot({ type: Title })
+	@slot({ type: HTMLElement })
 	snappedTitleOnMobile!: Array<Title>;
 
 	/**
@@ -231,12 +238,6 @@ class DynamicPageTitle extends UI5Element {
 
 	onBeforeRendering() {
 		this.prepareLayoutActions();
-
-		if (this.hasSnappedTitleOnMobile) {
-			this.setAttribute("_snapped-title-on-mobile", "");
-		} else {
-			this.removeAttribute("_snapped-title-on-mobile");
-		}
 	}
 
 	get styles() {
@@ -269,10 +270,6 @@ class DynamicPageTitle extends UI5Element {
 		return this.interactive ? "0" : undefined;
 	}
 
-	get hasSnappedTitleOnMobile() {
-		return isPhone() && this.snapped && this.snappedTitleOnMobile.length;
-	}
-
 	get _headerExpanded() {
 		return !this.snapped;
 	}

diff --git a/packages/fiori/src/themes/DynamicPageTitle.css b/packages/fiori/src/themes/DynamicPageTitle.css
@@ -35,7 +35,7 @@
     box-shadow: var(--sapContent_HeaderShadow);
 }
 
-:host([snapped][_snapped-title-on-mobile]) {
+:host([has-snapped-title-on-mobile]) {
 	min-height: var(--_ui5_dynamic_page_snapped_title_on_mobile_min_height);
 	line-height: var(--_ui5_dynamic_page_snapped_title_on_mobile_line_height);
 }