@ui5/webcomponents 2.5.0-rc.0 → 2.5.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+
+### Bug Fixes
+
+* **ui5-input:** set value after preventDefault of input event ([#10196](https://github.com/SAP/ui5-webcomponents/issues/10196)) ([e2a6c94](https://github.com/SAP/ui5-webcomponents/commit/e2a6c94d6b4d88db61d85313f2776a092152478d)), closes [#9988](https://github.com/SAP/ui5-webcomponents/issues/9988)
+* **ui5-radio-button:** fix aria-disabled and focus of the read-only radio buttons ([#10111](https://github.com/SAP/ui5-webcomponents/issues/10111)) ([3bcfd1d](https://github.com/SAP/ui5-webcomponents/commit/3bcfd1d26b8520b73be336558f590e1b89c4d0c3)), closes [#10025](https://github.com/SAP/ui5-webcomponents/issues/10025)
+* **ui5-tokenizer:** adjust touch area for cozy and compact ([#10215](https://github.com/SAP/ui5-webcomponents/issues/10215)) ([ee90aea](https://github.com/SAP/ui5-webcomponents/commit/ee90aeaae00a3a888a8dafae73cb7dba1bf8e51f))
+
+
+### Features
+
+* **ui5-combobox:** adjust arrow-down behavior ([#10166](https://github.com/SAP/ui5-webcomponents/issues/10166)) ([74616dc](https://github.com/SAP/ui5-webcomponents/commit/74616dc7ea533ecbd18265878c90339e10eb9d1b))
+* **ui5-form:** add new `emptySpan` property ([#10194](https://github.com/SAP/ui5-webcomponents/issues/10194)) ([48b0cc8](https://github.com/SAP/ui5-webcomponents/commit/48b0cc89b36dd859dd07c17021eedf7a99375150)), closes [#9963](https://github.com/SAP/ui5-webcomponents/issues/9963)
+* **ui5-list:** add Home and End key handling for Load More button ([#10206](https://github.com/SAP/ui5-webcomponents/issues/10206)) ([7059e09](https://github.com/SAP/ui5-webcomponents/commit/7059e0987960f62cd5b8740594b907fa98e1f11c))
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+
+### Bug Fixes
+
+* **ui5-dialog:** width on mobile is not bigger than the phone width ([#10199](https://github.com/SAP/ui5-webcomponents/issues/10199)) ([77af592](https://github.com/SAP/ui5-webcomponents/commit/77af592c238ad53502c09f142d33f7c66c6b0715)), closes [#10000](https://github.com/SAP/ui5-webcomponents/issues/10000)
+
+
+### Features
+
+* **ui5-form:** enable vertical alignment of form items ([#10165](https://github.com/SAP/ui5-webcomponents/issues/10165)) ([13b571b](https://github.com/SAP/ui5-webcomponents/commit/13b571baf0b225dfabc4739be64dd64a34cc5506))
+* **ui5-toolbar:** fixed spacer behavior ([#10177](https://github.com/SAP/ui5-webcomponents/issues/10177)) ([b3625ac](https://github.com/SAP/ui5-webcomponents/commit/b3625ac7426aa592b80f50e15147c18ccc7d2abd)), closes [#10104](https://github.com/SAP/ui5-webcomponents/issues/10104)
+
+
+
+
+
 # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
 
 

package/cypress/specs/Form.cy.ts

@@ -8,7 +8,7 @@ import "../../src/Text.js";
 import "../../src/Input.js";
 
 describe("General API", () => {
-	it("tests calculated state of Form with default layout and label-span", () => {
+	it("tests calculated state of Form with default layout, label-span and empty-span", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
 			<ui5-form-group header-text="Address">
 				<ui5-form-item>
@@ -36,28 +36,18 @@ describe("General API", () => {
 			.as("form");
 
 		cy.get("@form")
-			.should("have.prop", "columnsS", 1);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanS", 12);
-
-		cy.get("@form")
-			.should("have.prop", "columnsM", 1);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanM", 4);
-
-		cy.get("@form")
-			.should("have.prop", "columnsL", 2);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanL", 4);
-
-		cy.get("@form")
-			.should("have.prop", "columnsXl", 3);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanXl", 4);
+			.should("have.prop", "columnsS", 1)
+			.and("have.prop", "labelSpanS", 12)
+			.and("have.prop", "emptySpanS", 0)
+			.and("have.prop", "columnsM", 1)
+			.and("have.prop", "labelSpanM", 4)
+			.and("have.prop", "emptySpanM", 0)
+			.and("have.prop", "columnsL", 2)
+			.and("have.prop", "labelSpanL", 4)
+			.and("have.prop", "emptySpanL", 0)
+			.and("have.prop", "columnsXl", 3)
+			.and("have.prop", "emptySpanXl", 0)
+			.and("have.prop", "labelSpanXl", 4);
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
@@ -175,6 +165,40 @@ describe("General API", () => {
 			.should("have.prop", "labelSpanXl", 12);
 	});
 
+	it("tests calculated state of Form empty-span='S0 M0 L1 XL1'", () => {
+		cy.mount(html`<ui5-form empty-span="L1 XL1">
+			<ui5-form-group header-text="Address">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup2" header-text="Contact">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Twitter</ui5-label>
+					<ui5-text>@sap</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup3" header-text="Other info">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.should("have.prop", "emptySpanS", 0)
+			.and("have.prop", "emptySpanM", 0)
+			.and("have.prop", "emptySpanL", 1)
+			.and("have.prop", "emptySpanXl", 1);
+	});
+
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup4" header-text="Address">
@@ -386,6 +410,247 @@ describe("General API", () => {
 		cy.get("@formGr3")
 			.should("have.prop", "colsXl", 1);
 	});
+
+	describe("tests items ordering within a group", () => {
+		beforeEach(() => {
+			cy.mount(html`<ui5-form layout="S3 M4 L5 XL6">
+	<ui5-form-group>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>1</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>2</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>3</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>4</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>5</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>6</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>7</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>8</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>9</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>10</span>
+		</ui5-form-item>
+	</ui5-form-group>
+</ui5-form>`);
+		});
+
+		it("10 items in 6 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 1500);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "7");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "8");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "9");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "5");
+		});
+
+		it("10 items in 5 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 1300);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "5");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "7");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "8");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "9");
+		});
+
+		it("10 items in 4 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 800);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "8");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "5");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "9");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "7");
+		});
+
+		it("10 items in 3 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 500);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "9");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "7");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "5");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "8");
+		});
+	});
 });
 
 describe("Accessibility", () => {

package/cypress/specs/Input.cy.ts

@@ -0,0 +1,32 @@
+import { html } from "lit";
+import "../../src/Input.js";
+import type Input from "../../src/Input.js";
+
+describe("Input Tests", () => {
+	it("tets input event prevention", () => {
+		cy.mount(html`
+			<ui5-input></ui5-input>
+		`);
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("input", e => {
+					e.preventDefault();
+					(e.target as Input).value = "test";
+				});
+			});
+
+		cy.get<Input>("@input")
+			.realClick();
+
+		cy.realPress("a");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.should("have.value", "test");
+	});
+});

package/cypress/specs/Toolbar.cy.ts

@@ -4,6 +4,7 @@ import "../../src/ToolbarButton.js";
 import "../../src/ToolbarSelect.js";
 import "../../src/ToolbarSelectOption.js";
 import "../../src/ToolbarSeparator.js";
+import "../../src/ToolbarSpacer.js";
 import "../../src/Popover.js";
 import type ToolbarItem from "../../src/ToolbarItem.js";
 import "@ui5/webcomponents-icons/dist/add.js";
@@ -65,4 +66,29 @@ describe("Toolbar general interaction", () => {
 		cy.get("#popup")
 			.should("be.visible");
 	});
+
+	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
+		cy.mount(html`
+			<ui5-toolbar id="otb_spacer">
+				<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
+				<ui5-toolbar-spacer></ui5-toolbar-spacer>
+				<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("#otb_spacer")
+			.as("toolbar");
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });