@ui5/webcomponents-fiori 2.7.0-rc.0 → 2.7.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+
+### Bug Fixes
+
+* **ui5-side-navigation-item:** correct color for actions in overflow menu ([#10678](https://github.com/SAP/ui5-webcomponents/issues/10678)) ([a96d5ff](https://github.com/SAP/ui5-webcomponents/commit/a96d5ff937807c895b8956882c8f4995fcda8aa1))
+* **ui5-side-navigation:** don't toggle expanded state of items in popover ([#10691](https://github.com/SAP/ui5-webcomponents/issues/10691)) ([4c49c96](https://github.com/SAP/ui5-webcomponents/commit/4c49c96317159fbde9a69c09e8454be99a14a8c8))
+* **ui5-timeline-item:** correct wrapping on long text ([#10483](https://github.com/SAP/ui5-webcomponents/issues/10483)) ([bf4c816](https://github.com/SAP/ui5-webcomponents/commit/bf4c816a38d2206b0c472c05846d74c81edc9e6e))
+
+
+### Features
+
+* **ui5-side-navigation:** add actions and unselectable items ([#10482](https://github.com/SAP/ui5-webcomponents/issues/10482)) ([9fb9bae](https://github.com/SAP/ui5-webcomponents/commit/9fb9bae3ce086320aed83117aa8641fc06ad5587))
+* **ui5-timeline:** introduce "growing" property ([#10470](https://github.com/SAP/ui5-webcomponents/issues/10470)) ([c39c0e8](https://github.com/SAP/ui5-webcomponents/commit/c39c0e845dceadb1383c49ea8d2f60cd98df3fc0))
+* **ui5-user-menu:** introduce `show-edit-button` property ([#10619](https://github.com/SAP/ui5-webcomponents/issues/10619)) ([6adec46](https://github.com/SAP/ui5-webcomponents/commit/6adec468c2edf41df608d26511a9b7cbf58381f7))
+
+
+
+
+
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** prevent layout shift with container queries ([#10578](https://github.com/SAP/ui5-webcomponents/issues/10578)) ([c2c3608](https://github.com/SAP/ui5-webcomponents/commit/c2c36080b956312e04fa8231d86e1517a58bd811)), closes [#10564](https://github.com/SAP/ui5-webcomponents/issues/10564)
+* **ui5-dynamic-page:** remove redundant padding ([#10448](https://github.com/SAP/ui5-webcomponents/issues/10448)) ([491538b](https://github.com/SAP/ui5-webcomponents/commit/491538befe698e2c8957549be9d0eccf9014bd7e)), closes [#10413](https://github.com/SAP/ui5-webcomponents/issues/10413)
+* **ui5-page:** fix floating footer layout ([#10496](https://github.com/SAP/ui5-webcomponents/issues/10496)) ([19f7857](https://github.com/SAP/ui5-webcomponents/commit/19f7857ffed9672d3560e6f5a365436119061846)), closes [#10358](https://github.com/SAP/ui5-webcomponents/issues/10358)
+* **ui5-wizard:** replace resize observer with container query ([#7996](https://github.com/SAP/ui5-webcomponents/issues/7996)) ([475c293](https://github.com/SAP/ui5-webcomponents/commit/475c293fe5797aee9dd8a160d69c7baa118a6f07)), closes [#7666](https://github.com/SAP/ui5-webcomponents/issues/7666)
+
+
+### Features
+
+* **ui5-flexible-column-layout:** add arrow icon functionality ([#10362](https://github.com/SAP/ui5-webcomponents/issues/10362)) ([61b94ae](https://github.com/SAP/ui5-webcomponents/commit/61b94aece6b41fa438df9d0e9b5dc60f28bae55d))
+* **ui5-shellbar:** introduce content slot ([#10595](https://github.com/SAP/ui5-webcomponents/issues/10595)) ([c8b8696](https://github.com/SAP/ui5-webcomponents/commit/c8b86964a8dfe906176bf106f80d278d910f3f8f))
+* **ui5-timeline-item:** introduce `state` property ([#10277](https://github.com/SAP/ui5-webcomponents/issues/10277)) ([b378604](https://github.com/SAP/ui5-webcomponents/commit/b378604e008efbf71054e72583ff8fd9fd227275))
+
+
+
+
+
 # [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
 
 

package/cypress/specs/FCL.cy.ts

@@ -15,28 +15,65 @@ describe("Columns resize", () => {
 `);
 	});
 
-	it("toggles _resizing property during separator drag'n'drop", () => {
+	it("separator drag'n'drop", () => {
+		let oldWidthFirstCol: number;
+		let widthAfterMove: number;
+
 		cy.get("[ui5-flexible-column-layout]")
 			.as("fcl");
 
 		cy.get("[ui5-flexible-column-layout]")
 			.shadow()
 			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
 			.as("separator");
 
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.then($el => {
+				oldWidthFirstCol = $el.width()!;
+			});
+
 		// act: mock the user starting to drag the separator
 		cy.get("@separator")
 			.realMouseDown();
 
-		// assert that the property is set
-		cy.get("@fcl")
-			.should("have.prop", "_resizing", true);
+		// act: mock the user starting to drag the separator
+		cy.get("@separator")
+			.realMouseMove(200, 0);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should($el => {
+				widthAfterMove = $el.width()!;
+
+				expect(oldWidthFirstCol).to.be.lt(widthAfterMove);
+			});
 
 		// act: mock the user releasing the mouse button; use "then" to ensure it happens after the above check has completed
 		cy.get("@separator")
 			.realMouseUp();
-		// assert that the property is reset
-		cy.get("@fcl")
-			.should("have.prop", "_resizing", false);
+
+		for (let i = 0; i < 5; i++) {
+			cy.get("@separator")
+				.realMouseMove(i * 50, 0);
+		}
+
+		for (let i = 0; i < 5; i++) {
+			cy.get("@separator")
+				.realMouseMove(i * -100, 0);
+		}
+
+		cy.get("@separator")
+			.realMouseMove(-400, 0);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should($el => {
+				expect(widthAfterMove).to.be.equal($el.width()!);
+			});
 	});
 });

package/cypress/specs/ShellBar.cy.ts

@@ -0,0 +1,240 @@
+import { html } from "lit";
+import "@ui5/webcomponents-icons/dist/activities.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/da.js";
+import "@ui5/webcomponents/dist/ToggleButton.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Switch.js";
+import "@ui5/webcomponents/dist/Tag.js";
+import "@ui5/webcomponents/dist/Avatar.js";
+import "@ui5/webcomponents/dist/Input.js";
+import "@ui5/webcomponents/dist/SuggestionItem.js";
+import "@ui5/webcomponents/dist/SuggestionItemCustom.js";
+import "@ui5/webcomponents/dist/SuggestionItemGroup.js";
+import "@ui5/webcomponents/dist/List.js";
+import "../../src/ShellBar.js";
+import "../../src/ShellBarItem.js";
+
+describe("Responsiveness", () => {
+	const basicTemplate = html`
+	<ui5-shellbar
+			id="shellbar"
+			primary-title="Product Title"
+			secondary-title="Solution name"
+			notifications-count="99+"
+			show-notifications
+			show-product-switch
+	>
+
+		<ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant" text="Button3"></ui5-toggle-button>
+
+		<ui5-avatar slot="profile">
+			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+		</ui5-avatar>
+
+		<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+
+		<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
+
+		<ui5-shellbar-item id="disc" icon="activities" text="Disconnect"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="sys-help" text="Incoming Calls"></ui5-shellbar-item>
+
+		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
+			<div slot="valueStateMessage">Instructions</div>
+		</ui5-input>
+
+		<ui5-switch design="Textual" text-on="PR0" text-off="PR0" slot="startContent"></ui5-switch>
+		<ui5-toggle-button slot="endContent" text="PR2" data-hide-order="2">PR2</ui5-toggle-button>
+	</ui5-shellbar>`;
+
+	const templateWithMenuItems = html`
+	<ui5-shellbar
+			id="shellbar"
+			primary-title="Product Title"
+			secondary-title="Solution name"
+			notifications-count="99+"
+			show-notifications
+			show-product-switch
+	>
+
+		<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
+		<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
+		<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
+		<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
+		<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
+		<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
+		<ui5-avatar slot="profile">
+			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+		</ui5-avatar>
+
+		<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+
+		<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
+
+		<ui5-shellbar-item id="disc" icon="activities" text="Disconnect"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="sys-help" text="Incoming Calls"></ui5-shellbar-item>
+
+		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
+			<div slot="valueStateMessage">Instructions</div>
+		</ui5-input>
+	</ui5-shellbar>`;
+
+	const templateWithOnlyOneAction = html`<ui5-shellbar
+					id="shellbar"
+					primary-title="Product Title"
+					secondary-title="Solution name"
+					notifications-count="99+"
+					show-notifications
+					show-product-switch
+			>
+				<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+			</ui5-shellbar>`;
+	beforeEach(() => {
+		cy.mount(basicTemplate).as("html");
+
+		cy.get("#shellbar")
+			.as("shellbar");
+	});
+
+	afterEach(() => {
+		cy.viewport(1920, 1080);
+	});
+
+	it("tests XXL Breakpoint 1920px", () => {
+		cy.viewport(1920, 1080);
+		cy.get("@shellbar")
+			.find("ui5-button[slot='startButton']")
+			.as("backButton");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-title")
+			.as("primaryTitle");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-secondary-title")
+			.as("secondaryTitle");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-search-button")
+			.as("searchButton");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-custom-item")
+			.as("customActionIcon1");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-bell-button")
+			.as("notificationsIcon");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-image-button")
+			.as("profileIcon");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-button-product-switch")
+			.as("productSwitchIcon");
+
+		cy.get("@shellbar")
+			.find("ui5-toggle-button[slot='assistant']")
+			.as("assistant");
+
+		cy.get("@backButton").should("be.visible");
+		cy.get("@primaryTitle").should("be.visible");
+		cy.get("@secondaryTitle").should("be.visible");
+		cy.get("@customActionIcon1").should("be.visible");
+		cy.get("@notificationsIcon").should("be.visible");
+		cy.get("@profileIcon").should("be.visible");
+		cy.get("@productSwitchIcon").should("be.visible");
+		cy.get("@assistant").should("be.visible");
+
+		cy.get("@searchButton").click();
+
+		cy.get("@shellbar")
+			.find("ui5-input[slot='searchField']")
+			.as("searchField").should("be.visible");
+
+		cy.get("@searchButton").click();
+	});
+
+	it("tests S Breakpoint 320px", () => {
+		cy.get("html").viewport("iphone-x");
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-overflow-button")
+			.should("exist");
+		cy.get("@shellbar")
+			.shadow()
+			.get("ui5-switch")
+			.should("be.hidden");
+	});
+
+	it("tests items visibility in Lean mode", () => {
+		cy.get("@shellbar")
+			.find("ui5-button[slot='startButton']")
+			.as("backButton");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-search-button")
+			.as("searchButton");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-bell-button")
+			.as("notificationsIcon");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-image-button")
+			.as("profileIcon");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-button-product-switch")
+			.as("productSwitchIcon");
+	});
+
+	it("tests logo and Primary title when no menuItems are presented", () => {
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-logo-area")
+			.as("logoLink");
+
+		cy.get("@logoLink").should("exist");
+	});
+
+	it("tests Primary title when menuItems are presented", () => {
+		cy.mount(templateWithMenuItems).as("html1");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-menu-button")
+			.as("menuButton");
+
+		cy.get("@menuButton").should("be.visible");
+	});
+
+	it("tests XXL Breakpoint Search bar", () => {
+		cy.get("@shellbar").invoke("attr", "show-open-search-field", "true");
+		cy.viewport(2560, 1080);
+		cy.get("[slot='searchField']")
+			.should("exist");
+	});
+
+	it("Test overflow button not showing, when only one action is presented", () => {
+		cy.mount(templateWithOnlyOneAction).as("html1");
+
+		cy.get("html").viewport("iphone-6");
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-overflow-button")
+			.should("be.hidden");
+	});
+});