Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NakataCode merged 2 commits into from
Mar 26, 2026
+40 −11
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78478c1
fix(ui5-dynamic-page): hide pin button on mobile devices
NakataCode Mar 26, 2026
4dffc2d
fix: address comments
NakataCode Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 35 additions & 10 deletions packages/fiori/cypress/specs/DynamicPage.mobile.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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");
});
});
4 changes: 4 additions & 0 deletions packages/fiori/src/DynamicPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/src/DynamicPageTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading