@ui5/webcomponents 2.2.0-rc.2 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.3...v2.2.0) (2024-09-03)
+
+
+### Bug Fixes
+
+* **ui5-*:** make ui5-content-native-scrollbar to take effect ([#9751](https://github.com/SAP/ui5-webcomponents/issues/9751)) ([a4b4028](https://github.com/SAP/ui5-webcomponents/commit/a4b4028e344fb9546687cec0efbed065dde47b29)), closes [#9720](https://github.com/SAP/ui5-webcomponents/issues/9720) [#9695](https://github.com/SAP/ui5-webcomponents/issues/9695)
+* **ui5-color-picker:** adjust hue slider update ([#9735](https://github.com/SAP/ui5-webcomponents/issues/9735)) ([e046755](https://github.com/SAP/ui5-webcomponents/commit/e046755de48881edf77d8868974d79443af3e562)), closes [#9693](https://github.com/SAP/ui5-webcomponents/issues/9693)
+* **ui5-menu-item:** add hover and active styles ([#9774](https://github.com/SAP/ui5-webcomponents/issues/9774)) ([55a4179](https://github.com/SAP/ui5-webcomponents/commit/55a41793467a8594401103bff35a3ae46445deb6))
+
+
+
+
+
+# [2.2.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.2...v2.2.0-rc.3) (2024-08-29)
+
+
+### Bug Fixes
+
+* **ui5-breadcrumbs:** current link aria-current ([#9668](https://github.com/SAP/ui5-webcomponents/issues/9668)) ([87732a1](https://github.com/SAP/ui5-webcomponents/commit/87732a151562d6e387dcf85baefca23b265774ac))
+* **ui5-calendar:** adjust aria-disabled attribute ([#9732](https://github.com/SAP/ui5-webcomponents/issues/9732)) ([29a30f9](https://github.com/SAP/ui5-webcomponents/commit/29a30f9b21f5a978e2b1163d0484de2df859d907)), closes [#9719](https://github.com/SAP/ui5-webcomponents/issues/9719)
+* **ui5-color-palette-popover:** set opener attribute ([#9746](https://github.com/SAP/ui5-webcomponents/issues/9746)) ([6d20dcd](https://github.com/SAP/ui5-webcomponents/commit/6d20dcd186d04d52783cf4083b4d8f014cd07a1e)), closes [#9708](https://github.com/SAP/ui5-webcomponents/issues/9708)
+* **ui5-multi-combobox:** correct submit event ([#9731](https://github.com/SAP/ui5-webcomponents/issues/9731)) ([0405c2b](https://github.com/SAP/ui5-webcomponents/commit/0405c2b4e0273649a2c110471b55d480d37c2db2))
+* **ui5-multi-combobox:** remove VS header after setting VH to None ([#9744](https://github.com/SAP/ui5-webcomponents/issues/9744)) ([287d3a6](https://github.com/SAP/ui5-webcomponents/commit/287d3a65054ef9e081ed9f627420af03007ea7e9)), closes [#9736](https://github.com/SAP/ui5-webcomponents/issues/9736)
+
+
+### Features
+
+* **ui5-calendar:** implement calendar week numbering ([#9694](https://github.com/SAP/ui5-webcomponents/issues/9694)) ([efc8053](https://github.com/SAP/ui5-webcomponents/commit/efc8053e756156cca5e239f1886469c6b92c2cf7))
+* **ui5-daterange-picker:** implement month and year range selection ([#9680](https://github.com/SAP/ui5-webcomponents/issues/9680)) ([0a150dd](https://github.com/SAP/ui5-webcomponents/commit/0a150dd6808dbd7ec7e4e599eab2ff4abf9396f0)), closes [#8177](https://github.com/SAP/ui5-webcomponents/issues/8177) [#8187](https://github.com/SAP/ui5-webcomponents/issues/8187)
+
+
+
+
+
 # [2.2.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.1...v2.2.0-rc.2) (2024-08-22)
 
 

package/cypress/specs/Button.cy.ts

@@ -0,0 +1,361 @@
+import { html } from "lit";
+import "../../src/Button.js";
+import type Button from "../../src/Button.js";
+import "@ui5/webcomponents-icons/dist/download.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
+
+describe("Button general interaction", () => {
+	it("tests button's text rendering", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get<Button>("[ui5-button]")
+			.shadow()
+			.find(".ui5-button-text>bdi>slot")
+			.should("have.length", 1, "Button text is not rendered");
+	});
+
+	it("tests button's icon rendering", () => {
+		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("icon", "add");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("exist", "icon is present");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("icon", "");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.exist", "icon is not present");
+	});
+
+	it("tests button's endIon rendering", () => {
+		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("end-icon", "add");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-end-icon")
+			.should("exist", "endIon is present");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("end-icon", "");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-end-icon")
+			.should("not.exist", "endIon is not present");
+	});
+
+	it("tests click event", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@button")
+			.realClick();
+
+		cy.realPress("Space");
+
+		cy.realPress("Enter");
+
+		cy.get("@clicked")
+			.should("have.been.calledThrice");
+	});
+
+	it("tests keyboard shortcuts used to prevent a click event", () => {
+		cy.mount(html`<ui5-button>Text</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.realPress(["Space", "Shift"]);
+		cy.realPress(["Space", "Escape"]);
+
+		cy.get("@clicked")
+			.should("not.been.called");
+	});
+
+	it("aria-expanded is properly applied on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "true",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.invoke("attr", "aria-expanded")
+			.should("be.equal", "true");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "false",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.invoke("attr", "aria-expanded")
+			.should("be.equal", "false");
+	});
+
+	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.invoke("attr", "role")
+			.should("be.equal", "button");
+	});
+
+	it("tests button's icon only rendering", () => {
+		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.invoke("attr", "icon-only")
+			.should("exist");
+	});
+
+	it("tests button's icon only rendering", () => {
+		cy.mount(html`<ui5-button icon="text"> </ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.invoke("attr", "icon-only")
+			.should("exist");
+	});
+
+	it("tests button's slot rendering", () => {
+		cy.mount(html`
+	<ui5-button>
+		<ui5-avatar id="btnImage" size="XS">
+			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+		</ui5-avatar>
+	</ui5-button>`);
+		cy.get("[ui5-button]")
+			.should("be.visible", "Btn image is rendered");
+	});
+
+	it("tests clicking on disabled button", () => {
+		cy.mount(html`<ui5-button disabled>Inactive</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		// don't test space and enter, as wdio always fires a click but the browser not.
+		// await button.keys("Space");
+		// await button.keys("Enter");
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.as("nativeButton");
+
+		cy.get("@nativeButton")
+			.should("have.attr", "disabled");
+
+		cy.get("@nativeButton")
+			.should("not.have.attr", "tabindex");
+	});
+
+	it("tests clicking on disabled button with Icon", () => {
+		cy.mount(html`<ui5-button icon="employee" disabled></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@button")
+			.scrollIntoView();
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+
+		cy.get("@button")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("be.visible")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+	});
+
+	it("tests button with text icon role", () => {
+		cy.mount(html`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.shadow()
+			.find("[ui5-icon]")
+			.invoke("attr", "mode")
+			.should("be.equal", "Decorative");
+	});
+
+	it("aria-describedby properly applied on the button tag", () => {
+		const hiddenTextTypeId = "ui5-button-hiddenText-type";
+
+		cy.mount(html`<ui5-button design="Attention">Content</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.invoke("attr", "aria-describedby")
+			.should("be.equal", hiddenTextTypeId);
+
+		cy.get("@button")
+			.shadow()
+			.find(`span[id="${hiddenTextTypeId}"]`)
+			.should("exist");
+	});
+
+	it("setting accessible-name-ref on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
+		<ui5-label id="1download-text">Download Application</ui5-label>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.invoke("attr", "aria-label")
+			.should("be.equal", "Download Application");
+	});
+
+	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
+		cy.mount(html`<ui5-button>Show Registration Dialog</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					hasPopup: "dialog",
+					controls: "registration-dialog",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.invoke("attr", "aria-haspopup")
+			.should("be.equal", "dialog");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.invoke("attr", "aria-controls")
+			.should("be.equal", "registration-dialog");
+	});
+
+	it("setting tooltip on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.invoke("attr", "title")
+			.should("be.equal", "Go home");
+	});
+
+	it("tooltip from inner icon is propagated", () => {
+		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.invoke("attr", "title")
+			.should("be.equal", "Download");
+	});
+
+	it("setting accessible-role on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.invoke("attr", "role")
+			.should("be.equal", "link");
+	});
+});

package/cypress/specs/List.cy.ts

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import "../../src/List.js";
+import type List from "../../src/List.js";
+
+describe("List Tests", () => {
+	it("tests 'loadMore' event fired upon infinite scroll", () => {
+		cy.mount(html`
+		<ui5-list style="height: 300px;"  growing="Scroll">
+			<ui5-li>Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li>Audio cabel</ui5-li>
+			<ui5-li>DVD set</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li>Audio cabel</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>`);
+
+		cy.get("[ui5-list]")
+			.as("list");
+
+		cy.get<List>("@list")
+			.then(list => {
+				list.get(0).addEventListener("ui5-load-more", cy.stub().as("loadMore"));
+			})
+			.shadow()
+			.find(".ui5-list-scroll-container")
+			.as("scrollContainer")
+			.scrollTo("bottom", { duration: 100 });
+
+		cy.get("@loadMore")
+			.should("have.been.calledOnce");
+	});
+});