@ui5/webcomponents-fiori 2.4.0-rc.3 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** improve scrolling smoothness ([#10093](https://github.com/SAP/ui5-webcomponents/issues/10093)) ([d1420b0](https://github.com/SAP/ui5-webcomponents/commit/d1420b0be2c40ca649503cca0715e4c529929f8f)), closes [#10011](https://github.com/SAP/ui5-webcomponents/issues/10011)
+* **ui5-dynamic-page:** prevent unwanted header toggle from scroll ([#10007](https://github.com/SAP/ui5-webcomponents/issues/10007)) ([7a7d00c](https://github.com/SAP/ui5-webcomponents/commit/7a7d00c0d615283d1a86d775b6c51db7feadfb42))
+* **ui5-media-gallery:** clear selected thumbnail on item removal ([#10087](https://github.com/SAP/ui5-webcomponents/issues/10087)) ([af4cadb](https://github.com/SAP/ui5-webcomponents/commit/af4cadbfb637c1a6440aa0bd1fc516629ae332ae))
+
+
+
+
+
+# [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
+
+
+### Features
+
+* **ui5-navigation-layout:** add ui5-navigation-layout component ([#9517](https://github.com/SAP/ui5-webcomponents/issues/9517)) ([463c780](https://github.com/SAP/ui5-webcomponents/commit/463c780df03e95eacf82075f9a47007a5a088b01))
+
+
+
+
+
 # [2.4.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.2...v2.4.0-rc.3) (2024-10-28)
 
 

package/cypress/specs/NavigationLayout.cy.ts

@@ -0,0 +1,128 @@
+import { html } from "lit";
+import "../../src/NavigationLayout.js";
+import "../../src/SideNavigation.js";
+import "../../src/SideNavigationGroup.js";
+import "../../src/SideNavigationItem.js";
+import "../../src/ShellBar.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents-icons/dist/home.js";
+import "@ui5/webcomponents-icons/dist/menu.js";
+
+const sampleCode = html`
+<ui5-navigation-layout id="nl1">
+	<ui5-shellbar
+		slot="header"
+		primary-title="UI5 Web Components"
+	>
+		<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
+	</ui5-shellbar>
+	<ui5-side-navigation id="sn1" slot="sideContent">
+		<!-- Items -->
+		<ui5-side-navigation-item text="Home" href="#home" icon="home"></ui5-side-navigation-item>
+		<ui5-side-navigation-group text="Group 1" expanded>
+			<ui5-side-navigation-item text="Item 1" href="#item1"
+									  icon="home"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Item 2" href="#item2"
+									  icon="home"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Item 3" href="#item3"
+									  icon="home"></ui5-side-navigation-item>
+		</ui5-side-navigation-group>
+		<!-- Fixed Items -->
+		<ui5-side-navigation-item slot="fixedItems"
+								  text="Legal"
+								  href="https://www.sap.com/about/legal/impressum.html"
+								  target="_blank"
+								  icon="home"></ui5-side-navigation-item>
+	</ui5-side-navigation>
+	<div>
+		Content
+	</div>
+</ui5-navigation-layout>`;
+
+describe("Rendering and interaction", () => {
+	beforeEach(() => {
+		cy.mount(sampleCode);
+	});
+
+	it("tests initial rendering", () => {
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-root")
+			.should("exist");
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-header")
+			.should("exist");
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-section")
+			.should("exist");
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-aside")
+			.should("exist");
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-content")
+			.should("exist");
+	});
+
+	it("tests collapsing", () => {
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", false);
+
+		cy.get("[ui5-navigation-layout]")
+			.invoke("prop", "sideCollapsed", true);
+
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", true);
+
+		cy.get("[ui5-navigation-layout]")
+			.invoke("prop", "sideCollapsed", false);
+
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", false);
+	});
+});
+
+describe("Navigation Layout on Phone", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+		cy.mount(sampleCode);
+	});
+
+	it("tests initial rendering", () => {
+		cy.get("[ui5-navigation-layout]")
+			.should("have.prop", "sideCollapsed", true);
+
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", false);
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-aside")
+			.should("not.be.visible");
+	});
+
+	it("tests collapsing", () => {
+		cy.get("[ui5-navigation-layout]")
+			.invoke("prop", "sideCollapsed", false);
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-aside")
+			.should("be.visible");
+
+		cy.get("[ui5-navigation-layout]")
+			.invoke("prop", "sideCollapsed", true);
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-aside")
+			.should("not.be.visible");
+	});
+});