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

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
+
+
+### Bug Fixes
+
+* **ui5-shellbar:** correct matching content check ([#10921](https://github.com/SAP/ui5-webcomponents/issues/10921)) ([8782951](https://github.com/SAP/ui5-webcomponents/commit/87829511dd2057b3cf7ff1f28fb04ce00df19ffc))
+* **ui5-shellbar:** menu-item-click click event is now properly fired ([#10983](https://github.com/SAP/ui5-webcomponents/issues/10983)) ([27c8bb7](https://github.com/SAP/ui5-webcomponents/commit/27c8bb7ba6e9d153d3da2ad2d976e7ab4cc13714)), closes [#10950](https://github.com/SAP/ui5-webcomponents/issues/10950)
+* **user-menu:** focus on user menu when it is opened ([#10967](https://github.com/SAP/ui5-webcomponents/issues/10967)) ([a9e2868](https://github.com/SAP/ui5-webcomponents/commit/a9e28689eb80c225244ee5a1f7587fdd6ec48319))
+
+
+### Features
+
+* **framework:** add `.currentTarget` to the type of event handler in TSX and UI5CustomEvent ([#10957](https://github.com/SAP/ui5-webcomponents/issues/10957)) ([f56753c](https://github.com/SAP/ui5-webcomponents/commit/f56753c5142d6e817b05d7e33bd160f09c2d5205))
+* **ui5-side-navigation:** improve interaction of unselectable parent items in collapsed mode ([#10939](https://github.com/SAP/ui5-webcomponents/issues/10939)) ([20507fa](https://github.com/SAP/ui5-webcomponents/commit/20507fa405c1af2469d98905d6b499e55067c7a6))
+* **user-menu:** change api name from showAddAccount to showEditAccounts ([#10966](https://github.com/SAP/ui5-webcomponents/issues/10966)) ([aa9cf2d](https://github.com/SAP/ui5-webcomponents/commit/aa9cf2d55af42ec6880d98452f6a627fc76e9b3b))
+
+
+
+
+
+# [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
+
+
+### Bug Fixes
+
+* **ui5-illustrated-message:** update title font styles ([#10912](https://github.com/SAP/ui5-webcomponents/issues/10912)) ([6a85a53](https://github.com/SAP/ui5-webcomponents/commit/6a85a53f58bf0780975a5e41a1db69d05c9d1059)), closes [#10879](https://github.com/SAP/ui5-webcomponents/issues/10879)
+* **ui5-notification-list:** improve keyboard accessibility for the "More" button ([#10822](https://github.com/SAP/ui5-webcomponents/issues/10822)) ([b659fe2](https://github.com/SAP/ui5-webcomponents/commit/b659fe2faeb42eb052dafcc0c16215a3bf1f1926))
+* **ui5-shellbar:** adjust focus style of startButton ([#10908](https://github.com/SAP/ui5-webcomponents/issues/10908)) ([cc0be62](https://github.com/SAP/ui5-webcomponents/commit/cc0be62a675d22d6f63471c57d71964d395fd5d6)), closes [#10598](https://github.com/SAP/ui5-webcomponents/issues/10598)
+
+
+### Features
+
+* **ui5-search-field:** introduce base component ([#10922](https://github.com/SAP/ui5-webcomponents/issues/10922)) ([f4489c0](https://github.com/SAP/ui5-webcomponents/commit/f4489c0cecd8c0f2f7916b39e2183193f171f725))
+* **ui5-side-navigation:** visual design enhancements ([#10839](https://github.com/SAP/ui5-webcomponents/issues/10839)) ([09e3f35](https://github.com/SAP/ui5-webcomponents/commit/09e3f35f5973aca5b2104508a3f8d452d8380a76))
+* **ui5-user-settings-dialog:** introduce new components `UserSettingsDialog`, `UserSettingsItem`, and `UserSettingsView` ([#10832](https://github.com/SAP/ui5-webcomponents/issues/10832)) ([8b50b13](https://github.com/SAP/ui5-webcomponents/commit/8b50b134af44cb9b83a223bb1d0d9e3478f47c77))
+
+
+
+
+
 # [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)
 
 

package/README.md

@@ -36,6 +36,9 @@ such as a common header (ShellBar).
 | User Menu                                 | `ui5-user-menu`                | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";`                 |
 | User Menu Account                         | `ui5-user-menu-account`        | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";`          |
 | User Menu Item                            | `ui5-user-menu-item`           | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";`             |
+| User Settings Dialog                      | `ui5-user-settings-dialog`     | `import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";`       |
+| User Settings Item                        | `ui5-user-settings-item`       | `import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";`         |
+| User Settings View                        | `ui5-user-settings-view`       | `import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";`         |
 | View Settings Dialog                      | `ui5-view-settings-dialog`     | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";`       |
 | View Settings Dialog - Sort Item          | `ui5-sort-item`                | `import "@ui5/webcomponents-fiori/dist/SortItem.js";`                 |
 | View Settings Dialog - Filter Item        | `ui5-filter-item`              | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";`               |

package/cypress/specs/NotificationList.cy.tsx

@@ -0,0 +1,154 @@
+import NotificationList from "../../src/NotificationList.js";
+import NotificationListGroupItem from "../../src/NotificationListGroupItem.js";
+import NotificationListItem from "../../src/NotificationListItem.js";
+
+function Sample() {
+	return <NotificationList id="nl1">
+		<NotificationListGroupItem
+			title-text="Group 1"
+			id="group1"
+			growing="Button">
+			<NotificationListItem id="item11" show-close>
+				Group 1 Item 1
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 1 Item 2
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 1 Item 3
+			</NotificationListItem>
+			<NotificationListItem id="item1last" show-close>
+				Group 1 Item 4
+			</NotificationListItem>
+		</NotificationListGroupItem>
+		<NotificationListGroupItem
+			id="group2"
+			title-text="Group 2">
+			<NotificationListItem id="item21" show-close>
+				Group 2 Item 1
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 2 Item 2
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 2 Item 3
+			</NotificationListItem>
+			<NotificationListItem id="item2last" show-close>
+				Group 2 Item 4
+			</NotificationListItem>
+		</NotificationListGroupItem>
+		<NotificationListGroupItem
+			growing="Button"
+			title-text="Group 3">
+			<NotificationListItem show-close>
+				Group 3 Item 1
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 3 Item 2
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 3 Item 3
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 3 Item 4
+			</NotificationListItem>
+		</NotificationListGroupItem>
+	</NotificationList>;
+}
+
+describe("Keyboard Navigation", () => {
+	beforeEach(() => {
+		cy.mount(<Sample />);
+	});
+
+	it("tests Arrows and Space keys", () => {
+		cy.get("#group1")
+			.shadow()
+			.find("[ui5-notification-group-list]")
+			.shadow()
+			.find("[ui5-busy-indicator] .ui5-growing-button-inner")
+			.as("growingButton");
+
+		cy.realPress("Tab");
+		cy.get("#item11").realClick();
+		cy.get("#item11").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+		cy.get("#item1last").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.get("#item21").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("#item1last").should("be.focused");
+
+		cy.realPress("ArrowRight");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowRight");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("Space");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowLeft");
+		cy.get("#item1last").should("be.focused");
+	});
+
+	it("tests Home and End", () => {
+		cy.get("#group1")
+			.shadow()
+			.find("[ui5-notification-group-list]")
+			.shadow()
+			.find("[ui5-busy-indicator] .ui5-growing-button-inner")
+			.as("growingButton");
+
+		cy.realPress("Tab");
+		cy.get("#item11").realClick();
+		cy.get("#item11").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("#item1last").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.realPress("End");
+		cy.get("#item2last").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("#item2last").should("be.focused");
+
+		cy.realPress("Home");
+		cy.realPress("ArrowUp");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.realPress("Home");
+		cy.get("#item11").should("be.focused");
+
+		cy.realPress("Home");
+		cy.get("#item11").should("be.focused");
+	});
+});

package/cypress/specs/SearchField.cy.tsx

@@ -0,0 +1,445 @@
+import SearchField from "../../src/SearchField.js";
+import SearchFieldScopeOption from "../../src/SearchFieldScopeOption.js";
+import {
+	SEARCH_FIELD_SCOPE_SELECT_LABEL,
+	SEARCH_FIELD_CLEAR_ICON,
+	SEARCH_FIELD_SEARCH_ICON,
+	SEARCH_FIELD_SEARCH_COLLAPSED,
+	SEARCH_FIELD_SEARCH_EXPANDED,
+} from "../../src/generated/i18n/i18n-defaults.js";
+import SearchMode from "../../src/types/SearchMode.js";
+
+describe("SearchField general interaction", () => {
+	describe("Attribute propagation", () => {
+		it("should pass placeholder to inner input", () => {
+			const attributeValue = "test";
+
+			cy.mount(<SearchField placeholder={attributeValue} expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "placeholder", attributeValue);
+		});
+
+		it("Value attribute is propagated properly", () => {
+			const attributeValue = "test";
+
+			cy.mount(<SearchField value={attributeValue} expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.value", attributeValue);
+		});
+
+		it("accessibleName to aria-label", () => {
+			const attributeValue = "test";
+
+			cy.mount(<SearchField accessibleName={attributeValue} expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-label", attributeValue);
+		});
+	});
+
+	describe("Collapsed Search Field", () => {
+		it("icon only button should be rendered as a collapsed search field", () => {
+			cy.mount(<SearchField placeholder="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-button]")
+				.should("exist");
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("not.exist");
+		});
+
+		it("collapsed search field button accessibility", () => {
+			cy.mount(<SearchField placeholder="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-button]")
+				.shadow()
+				.find("button")
+				.as("inner-button");
+
+			cy.get("@inner-button")
+				.should("have.attr", "aria-expanded", "false");
+
+			cy.get("@inner-button")
+				.should("have.attr", "title", SEARCH_FIELD_SEARCH_COLLAPSED.defaultText);
+
+			cy.get("@inner-button")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_COLLAPSED.defaultText);
+		});
+
+		it("should expand search field on search icon click", () => {
+			cy.mount(<SearchField></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-button]")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("have.attr", "expanded");
+		});
+	});
+
+	describe("Expanded Search Field", () => {
+		it("input field should be rendered as an expanded search field", () => {
+			cy.mount(<SearchField placeholder="test" expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-button]")
+				.should("not.exist");
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("exist");
+		});
+
+		it("expanded empty search field button accessibility", () => {
+			cy.mount(<SearchField placeholder="test" expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon]")
+				.shadow()
+				.find("svg")
+				.as("search-icon");
+
+			cy.get("@search-icon")
+				.find("title")
+				.should("contain.text", SEARCH_FIELD_SEARCH_EXPANDED.defaultText);
+
+			cy.get("@search-icon")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_EXPANDED.defaultText);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find(".ui5-search-field-root")
+				.should("have.attr", "role", "search");
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "role", "searchbox");
+		});
+
+		it("expanded search field button accessibility", () => {
+			cy.mount(<SearchField value="text" expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon]")
+				.shadow()
+				.find("svg")
+				.as("search-icon");
+
+			cy.get("@search-icon")
+				.find("title")
+				.should("contain.text", SEARCH_FIELD_SEARCH_ICON.defaultText);
+
+			cy.get("@search-icon")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_ICON.defaultText);
+		});
+
+		it("should collapse empty search field on search icon click", () => {
+			cy.mount(<SearchField expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-icon][name='search']")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("not.have.attr", "expanded");
+		});
+	});
+
+	describe("Expanded Search Field with clear icon", () => {
+		it("clear icon should not be visible when input value is empty", () => {
+			cy.mount(<SearchField placeholder="test" expanded={true} showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.should("not.exist");
+		});
+
+		it("clear icon should be visible when input value is not empty", () => {
+			cy.mount(<SearchField value="test" expanded={true} showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.should("exist");
+		});
+
+		it("clear icon accessibility", () => {
+			cy.mount(<SearchField value="test" expanded={true} showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.shadow()
+				.find("svg")
+				.as("clear-icon");
+
+			cy.get("@clear-icon")
+				.find("title")
+				.should("contain.text", SEARCH_FIELD_CLEAR_ICON.defaultText);
+
+			cy.get("@clear-icon")
+				.should("have.attr", "aria-label", SEARCH_FIELD_CLEAR_ICON.defaultText);
+		});
+	});
+
+	describe("Events", () => {
+		it("fires search event on Enter", () => {
+			cy.mount(<SearchField value="test" expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("be.focused");
+
+			cy.get("@searchfield")
+				.realPress("Enter");
+
+			cy.get("@searched")
+				.should("have.been.calledOnce");
+		});
+
+		it("fires search event search icon click", () => {
+			cy.mount(<SearchField value="test" expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-icon][name='search']")
+				.realClick();
+
+			cy.get("@searched")
+				.should("have.been.calledOnce");
+		});
+
+		it("should not fire search event when value is empty", () => {
+			cy.mount(<SearchField expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("be.focused");
+
+			cy.get("@searchfield")
+				.realPress("Enter");
+
+			cy.get("@searched")
+				.should("not.be.called");
+		});
+
+		it("fires input event on typing", () => {
+			cy.mount(<SearchField expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-input", cy.stub().as("input"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("be.focused");
+
+			cy.get("@searchfield")
+				.realPress("a")
+				.realPress("b")
+				.realPress("c");
+
+			cy.get("@input")
+				.should("have.been.calledThrice");
+		});
+
+		it("fires input event on clear icon press", () => {
+			cy.mount(<SearchField value="test" expanded={true} showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-input", cy.stub().as("input"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.realClick();
+
+			cy.get("@input")
+				.should("have.been.calledOnce");
+		});
+	});
+
+	describe("Scoped Search Field", () => {
+		it("ui5-select should not be rendered on Default Search Field", () => {
+			cy.mount(<SearchField value="test" expanded={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-select]")
+				.should("not.exist");
+		});
+
+		it("ui5-select should be rendered on Scoped Search Field", () => {
+			cy.mount(<SearchField value="test" expanded={true} mode={SearchMode.Scoped}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-select]")
+				.should("exist");
+		});
+
+		it("ui5-select accessibility", () => {
+			cy.mount(<SearchField value="test" expanded={true} mode={SearchMode.Scoped}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.shadow()
+				.find("[role='combobox']")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SCOPE_SELECT_LABEL.defaultText);
+
+			cy.get("@scope")
+				.shadow()
+				.find(".ui5-select-root")
+				.should("have.attr", "title", SEARCH_FIELD_SCOPE_SELECT_LABEL.defaultText);
+		});
+
+		it("Two options should be rendered in the scope", () => {
+			cy.mount(<SearchField value="test" expanded={true} mode={SearchMode.Scoped}>
+				<SearchFieldScopeOption text="Apps" slot="scopeOptions"></SearchFieldScopeOption>
+				<SearchFieldScopeOption text="Products" slot="scopeOptions"></SearchFieldScopeOption>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.find("[ui5-option]")
+				.should("have.length", 2);
+		});
+
+		it("scope-change event should be fired, when a scope option is selected", () => {
+			cy.mount(<SearchField value="test" expanded={true} mode={SearchMode.Scoped}>
+				<SearchFieldScopeOption text="Apps" slot="scopeOptions"></SearchFieldScopeOption>
+				<SearchFieldScopeOption text="Products" slot="scopeOptions"></SearchFieldScopeOption>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-scope-change", cy.stub().as("scopeChanged"));
+				});
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.realClick();
+
+			cy.get("@scope")
+				.realPress("ArrowDown");
+
+			cy.get("@scope")
+				.realPress("Enter");
+
+			cy.get("@scopeChanged")
+				.should("have.been.calledOnce");
+		});
+	});
+});