Merge remote-tracking branch 'origin/main' into radio_button_fontsize

Author: TeodorTaushanov

packages/base/src/asset-registries/Icons.ts

@@ -19,6 +19,7 @@ type CollectionData = {
 		path?: string,
 		paths?: Array<string>,
 		ltr?: boolean,
+		viewBox?: string,
 		acc?: I18nText,
 	}>,
 };
@@ -70,6 +71,7 @@ const _fillRegistry = (bundleData: CollectionData) => {
 		registerIcon(iconName, {
 			pathData: (iconData.path || iconData.paths)!,
 			ltr: iconData.ltr,
+			viewBox: iconData.viewBox,
 			accData: iconData.acc,
 			collection: bundleData.collection,
 			packageName: bundleData.packageName,

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}