@ui5/webcomponents-fiori 2.6.3 → 2.7.0-rc.1

package/CHANGELOG.md

@@ -3,12 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.6.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.6.3) (2025-01-29)
+# [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-*:** fix jsx templates boolean checks ([#10516](https://github.com/SAP/ui5-webcomponents/issues/10516)) ([b31c7b5](https://github.com/SAP/ui5-webcomponents/commit/b31c7b5de74272f69287985763f4f01ef46169db)), closes [#10509](https://github.com/SAP/ui5-webcomponents/issues/10509)
+* **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)
+
+
+### Bug Fixes
+
+* i18n decorator property definition ([#10521](https://github.com/SAP/ui5-webcomponents/issues/10521)) ([d19f4e9](https://github.com/SAP/ui5-webcomponents/commit/d19f4e99bad74432bff21587da43a5844f17f8cf))
+* **ui5-view-settings-dialog:** adjust reset button announcement ([#10320](https://github.com/SAP/ui5-webcomponents/issues/10320)) ([42b29f3](https://github.com/SAP/ui5-webcomponents/commit/42b29f3eb6c435959ee67551d5f9f450995370ce)), closes [#10191](https://github.com/SAP/ui5-webcomponents/issues/10191)
+
+
+### Features
+
+* **ui5-side-navigation:** update existing design for Horizon theme ([#10337](https://github.com/SAP/ui5-webcomponents/issues/10337)) ([d5eff51](https://github.com/SAP/ui5-webcomponents/commit/d5eff51f56042d5fbf94e87d6bd94cdbe2d55982))
 
 
 

package/cypress/specs/ShellBar.cy.ts

@@ -0,0 +1,241 @@
+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/features/InputSuggestions.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");
+	});
+});

package/cypress/specs/Timeline.cy.ts

@@ -0,0 +1,55 @@
+import { html } from "lit";
+import "../../src/Timeline.js";
+import "../../src/TimelineItem.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/message-information.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/message-warning.js";
+
+describe("Accessibility", () => {
+	beforeEach(() => {
+		cy.mount(html`
+			<ui5-timeline id="test-timeline">
+				<ui5-timeline-group-item group-name="Build">
+					<ui5-timeline-item
+						id="item1"
+						title="Compile"
+						subtitle="Testing suite A"
+						icon="sap-icon://accept"
+						name="Testing suite A"
+						state="Positive"
+					>
+						Compilation succeeded.
+					</ui5-timeline-item>
+					<ui5-timeline-item
+						id="item2"
+						title="Lint"
+						subtitle="Testing suite B"
+						icon="sap-icon://message-information"
+						name="Testing suite B"
+					>
+						Lint completed with minor issues.
+					</ui5-timeline-item>
+				</ui5-timeline-group-item>
+			</ui5-timeline>
+		`);
+
+		cy.get("#test-timeline").as("timeline");
+	});
+
+	it("item with state attribute has aria-description, item without state does not", () => {
+		cy.get(`ui5-timeline-item[state="Positive"]`).each($itemWithState => {
+			cy.wrap($itemWithState)
+				.shadow()
+				.find(".ui5-tli-bubble")
+				.should("have.attr", "aria-description");
+		});
+
+		cy.get(`ui5-timeline-item:not([state="Positive"])`).each($itemWithoutState => {
+			cy.wrap($itemWithoutState)
+				.shadow()
+				.find(".ui5-tli-bubble")
+				.should("not.have.attr", "aria-description");
+		});
+	});
+});