@ui5/webcomponents-fiori 2.8.0-rc.1 → 2.8.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
+
+
+### Bug Fixes
+
+* **ui5-flexible-column-layout:** correct focus outline styles ([#10788](https://github.com/SAP/ui5-webcomponents/issues/10788)) ([59710df](https://github.com/SAP/ui5-webcomponents/commit/59710df6e37776531d09d285705ce99e3feb883c)), closes [#10670](https://github.com/SAP/ui5-webcomponents/issues/10670)
+
+
+
+
+
 # [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
 
 

package/cypress/specs/ShellBar.cy.tsx

@@ -11,13 +11,15 @@ import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import Switch from "@ui5/webcomponents/dist/Switch.js";
 
+const RESIZE_THROTTLE_RATE = 300; // ms
+
 describe("Responsiveness", () => {
 	function basicTemplate() {
 		return <ShellBar
 			id="shellbar"
 			primaryTitle="Product Title"
 			secondaryTitle="Solution name"
-			notifications-count="99+"
+			notificationsCount="99+"
 			showNotifications={true}
 			showProductSwitch={true}
 		>
@@ -92,75 +94,131 @@ describe("Responsiveness", () => {
 	beforeEach(() => {
 		cy.mount(basicTemplate()).as("html");
 
+		// breakpoints are set on resize event
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(RESIZE_THROTTLE_RATE);
+
 		cy.get("#shellbar")
 			.as("shellbar");
 	});
 
-	afterEach(() => {
+	it("tests XL Breakpoint 1920px", () => {
 		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").should("have.prop", "breakpointSize", "XL");
 
-		cy.get("@shellbar")
-			.shadow()
-			.find(".ui5-shellbar-title")
-			.as("primaryTitle");
+		cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
+		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-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")
-			.shadow()
-			.find(".ui5-shellbar-secondary-title")
-			.as("secondaryTitle");
+		cy.get("@assistant").should("be.visible");
+		cy.get("@overflowButton").should("not.be.visible");
+		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("@shellbar")
-			.shadow()
-			.find(".ui5-shellbar-search-button")
-			.as("searchButton");
+	it("tests M Breakpoint and overflow 500px", () => {
+		cy.viewport(500, 1680);
 
-		cy.get("@shellbar")
-			.shadow()
-			.find(".ui5-shellbar-custom-item")
-			.as("customActionIcon1");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
 
-		cy.get("@shellbar")
-			.shadow()
-			.find(".ui5-shellbar-bell-button")
-			.as("notificationsIcon");
+		cy.get("@searchIcon").should("be.visible");
+		cy.get("@overflowButton").should("be.visible");
+	});
 
-		cy.get("@shellbar")
-			.shadow()
-			.find(".ui5-shellbar-image-button")
-			.as("profileIcon");
+	it("tests XL Breakpoint 1820px", () => {
+		cy.viewport(1820, 1680);
 
-		cy.get("@shellbar")
-			.shadow()
-			.find(".ui5-shellbar-button-product-switch")
-			.as("productSwitchIcon");
+		cy.get("@shellbar").should("have.prop", "breakpointSize", "L");
+	});
 
-		cy.get("@shellbar")
-			.find("ui5-toggle-button[slot='assistant']")
-			.as("assistant");
+	it("tests L Breakpoint 1400px", () => {
+		cy.viewport(1400, 1680);
+
+		cy.get("@shellbar").should("have.prop", "breakpointSize", "L");
+
+		cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
+		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("searchIcon");
+		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("@assistant").should("be.visible");
+		cy.get("@overflowButton").should("not.be.visible");
 		cy.get("@backButton").should("be.visible");
 		cy.get("@primaryTitle").should("be.visible");
 		cy.get("@secondaryTitle").should("be.visible");
+		cy.get("@searchIcon").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");
+	});
+
+	it("tests M Breakpoint 870px", () => {
+		cy.viewport(870, 1680);
+
+		cy.get("@shellbar").should("have.prop", "breakpointSize", "M");
+
+		cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
+		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-search-button").as("searchIcon");
+		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("@assistant").should("be.visible");
+		cy.get("@backButton").should("be.visible");
+		cy.get("@primaryTitle").should("be.visible");
+		cy.get("@searchIcon").should("be.visible");
+		cy.get("@notificationsIcon").should("be.visible");
+		cy.get("@profileIcon").should("be.visible");
+		cy.get("@productSwitchIcon").should("be.visible");
+	});
 
-		cy.get("@searchButton").click();
+	it("tests S Breakpoint and overflow 510px", () => {
+		cy.viewport(510, 1680);
 
-		cy.get("@shellbar")
-			.find("ui5-input[slot='searchField']")
-			.as("searchField").should("be.visible");
+		cy.get("@shellbar").should("have.prop", "breakpointSize", "S");
+
+		cy.get("@shellbar").find("[slot='assistant']").as("assistant");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
+		cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
+		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").shadow().find(".ui5-shellbar-overflow-popover").as("overflowPopover");
+
+		cy.get("@assistant").should("be.visible");
+		cy.get("@overflowButton").should("be.visible");
+		cy.get("@backButton").should("be.visible");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-title").should("not.exist");
+		cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").should("not.exist");
+		cy.get("@searchIcon").should("be.visible");
+		cy.get("@notificationsIcon").should("be.visible");
+		cy.get("@profileIcon").should("be.visible");
+		cy.get("@productSwitchIcon").should("be.visible");
 
-		cy.get("@searchButton").click();
+		cy.get("@overflowPopover").find("ui5-li").should("have.length", 2);
 	});
 
 	it("tests S Breakpoint 320px", () => {