fix(ui5-dynamic-page): hide pin button on mobile devices (#13335)

The pin/unpin button is now automatically hidden on mobile devices in accordance with SAP Fiori guidelines, which state that the Pin Header action should not be provided on small screens as the pinned header would take up too much screen real estate.

- Additionally, introduced PAGE_HEIGHT constant in DynamicPage.mobile.cy to reduce repetition of hardcoded "600px" values.

Fixes #13320

Author: NakataCode

packages/fiori/cypress/specs/DynamicPage.mobile.cy.tsx

@@ -2,13 +2,15 @@ import DynamicPage from "../../src/DynamicPage.js";
 import DynamicPageTitle from "../../src/DynamicPageTitle.js";
 import DynamicPageHeader from "../../src/DynamicPageHeader.js";
 
+const PAGE_HEIGHT = "600px";
+
 describe("DynamicPage Mobile Behaviour", () => {
   beforeEach(() => {
 		cy.ui5SimulateDevice("phone");
 	});
   it("should display snapped title on mobile when snappedTitleOnMobile slot has content and header is snapped", () => {    
     cy.mount(
-      <DynamicPage style={{ height: "600px" }}>
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
         <DynamicPageTitle slot="titleArea">
           <div slot="heading">Page Title</div>
           <div slot="snappedTitleOnMobile">Mobile Snapped Title</div>
@@ -30,7 +32,7 @@ describe("DynamicPage Mobile Behaviour", () => {
 
   it("the header content should not be rendered when snappedTitleOnMobile content is present", () => {    
     cy.mount(
-      <DynamicPage style={{ height: "600px" }}>
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
         <DynamicPageTitle slot="titleArea">
           <div slot="heading">Page Title</div>
           <div slot="snappedTitleOnMobile">Mobile Snapped Title</div>
@@ -60,7 +62,7 @@ describe("DynamicPage Mobile Behaviour", () => {
 
   it("should not display snapped title on mobile when snappedTitleOnMobile slot is empty", () => {    
     cy.mount(
-      <DynamicPage style={{ height: "600px" }}>
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
         <DynamicPageTitle slot="titleArea">
           <div slot="heading">Page Title</div>
           <div slot="snappedTitleOnMobile">Mobile Snapped Title</div>
@@ -94,7 +96,7 @@ describe("DynamicPage Mobile Behaviour", () => {
 
   it("should expand the header when clicked on the snapped title on mobile", () => {    
     cy.mount(
-      <DynamicPage style={{ height: "600px" }}>
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
         <DynamicPageTitle slot="titleArea">
           <div slot="heading">Page Title</div>
           <div slot="snappedTitleOnMobile">Mobile Snapped Title</div>
@@ -122,7 +124,7 @@ describe("DynamicPage Mobile Behaviour", () => {
 
   it("should not display snapped title on mobile when header is not snapped", () => {    
     cy.mount(
-      <DynamicPage style={{ height: "600px" }}>
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
         <DynamicPageTitle slot="titleArea">
           <div slot="heading">Page Title</div>
           <div slot="snappedTitleOnMobile">Mobile Snapped Title</div>
@@ -142,9 +144,9 @@ describe("DynamicPage Mobile Behaviour", () => {
     cy.contains("Mobile Snapped Title").should("not.be.visible");
   });
 
-  it("should focus the title focus area when header action is clicked to snap the header", () => {    
+  it("should focus the title focus area when header action is clicked to snap the header", () => {
     cy.mount(
-      <DynamicPage style={{ height: "600px" }}>
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
         <DynamicPageTitle slot="titleArea">
           <div slot="heading">Page Title</div>
           <div slot="snappedTitleOnMobile">Mobile Snapped Title</div>
@@ -160,21 +162,44 @@ describe("DynamicPage Mobile Behaviour", () => {
 
     cy.get("[ui5-dynamic-page]")
       .invoke("prop", "headerSnapped", false);
-  
+
     cy.get("[ui5-dynamic-page]")
       .shadow()
       .find("ui5-dynamic-page-header-actions")
       .shadow()
       .find(".ui5-dynamic-page-header-action")
       .first()
       .click();
-  
+
     cy.get("[ui5-dynamic-page]")
       .should("have.prop", "headerSnapped", true);
-  
+
     cy.get("[ui5-dynamic-page-title]")
       .shadow()
       .find(".ui5-dynamic-page-title-focus-area")
       .should("be.focused");
   });
+
+  it("should not display pin button on mobile devices", () => {
+    cy.mount(
+      <DynamicPage style={{ height: PAGE_HEIGHT }}>
+        <DynamicPageTitle slot="titleArea">
+          <div slot="heading">Page Title</div>
+        </DynamicPageTitle>
+        <DynamicPageHeader slot="headerArea">
+          <div>Header Content</div>
+        </DynamicPageHeader>
+        <div style={{ height: "1000px" }}>
+          Page content with enough height to enable scrolling
+        </div>
+      </DynamicPage>
+    );
+
+    cy.get("[ui5-dynamic-page]")
+      .shadow()
+      .find("ui5-dynamic-page-header-actions")
+      .shadow()
+      .find(".ui5-dynamic-page-header-action-pin")
+      .should("not.exist");
+  });
 });

packages/fiori/src/DynamicPage.ts

@@ -284,6 +284,10 @@ class DynamicPage extends UI5Element {
 		return this.hasHeading ? this._headerLabel : undefined;
 	}
 
+	get _hidePinButton() {
+		return this.hidePinButton || isPhone();
+	}
+
 	/**
 	 * Defines if the header is snapped.
 	 *

packages/fiori/src/DynamicPageTemplate.tsx

@@ -61,7 +61,7 @@ function headerActions(this: DynamicPage) {
 			<DynamicPageHeaderActions
 				snapped={this.headerSnapped}
 				pinned={this.headerPinned}
-				hidePinButton={this.hidePinButton}
+				hidePinButton={this._hidePinButton}
 				onui5-expand-button-click={this.onExpandClick}
 				onui5-pin-button-click={this.onPinClick}
 				onui5-expand-button-hover-in={this.onExpandHoverIn}