@ui5/webcomponents 2.7.0-rc.1 → 2.7.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+
+### Bug Fixes
+
+* **f6navigation:** fast navigation in certain container only ([#10485](https://github.com/SAP/ui5-webcomponents/issues/10485)) ([4b2ab63](https://github.com/SAP/ui5-webcomponents/commit/4b2ab63cae9b175f07d266e4150a587756cd7f6c))
+* **ui5-button-badge:** align template ([#10705](https://github.com/SAP/ui5-webcomponents/issues/10705)) ([cacdf54](https://github.com/SAP/ui5-webcomponents/commit/cacdf542c594e8e6e168c77c7622647041e27cd2))
+* **ui5-multi-combobox:** fix valueState background set while typing ([#10586](https://github.com/SAP/ui5-webcomponents/issues/10586)) ([06243e4](https://github.com/SAP/ui5-webcomponents/commit/06243e494715e01230d6efab79b1b3f1212c9ac5)), closes [#10454](https://github.com/SAP/ui5-webcomponents/issues/10454)
+* **ui5-rating-indicator:** allow tab next/prev when readonly ([#10584](https://github.com/SAP/ui5-webcomponents/issues/10584)) ([ad01c1a](https://github.com/SAP/ui5-webcomponents/commit/ad01c1a384f3788c3a14c1ed77de41e4072cd7b9)), closes [#10580](https://github.com/SAP/ui5-webcomponents/issues/10580)
+* **ui5-select:** custom value state message is now visible ([#10647](https://github.com/SAP/ui5-webcomponents/issues/10647)) ([f5d1a8f](https://github.com/SAP/ui5-webcomponents/commit/f5d1a8f89c2b14cc6e753f6e12e1f805e859ac7f)), closes [#10323](https://github.com/SAP/ui5-webcomponents/issues/10323)
+* **ui5-switch:** apply focus only on root element click ([#10588](https://github.com/SAP/ui5-webcomponents/issues/10588)) ([6ff93c5](https://github.com/SAP/ui5-webcomponents/commit/6ff93c5afc4f4320eca0449f91e7a29ba306d05a))
+* **ui5-table:** fix selector column width ([#10640](https://github.com/SAP/ui5-webcomponents/issues/10640)) ([cdcb599](https://github.com/SAP/ui5-webcomponents/commit/cdcb599775c01f562965dcf2343242c8a5fb4aca))
+* **ui5-timepicker:** adapt new private component with internal logic ([#10684](https://github.com/SAP/ui5-webcomponents/issues/10684)) ([d0a45ab](https://github.com/SAP/ui5-webcomponents/commit/d0a45abb899811d549c08cfe1ad40b8f66b7a728))
+
+
+### Features
+
+* **ui5-button:** add badge to ui5-button ([#10642](https://github.com/SAP/ui5-webcomponents/issues/10642)) ([1e693fd](https://github.com/SAP/ui5-webcomponents/commit/1e693fd5b1fc80a5eb7b82a43cf34bd33eccb9fb))
+* **ui5-button:** introduce CSS Shadow parts ([#10628](https://github.com/SAP/ui5-webcomponents/issues/10628)) ([cda7d8b](https://github.com/SAP/ui5-webcomponents/commit/cda7d8b30abf013ea98932ed20848123b025aeaa)), closes [#10611](https://github.com/SAP/ui5-webcomponents/issues/10611)
+* **ui5-colorpicker:** adjust visual design ([#10495](https://github.com/SAP/ui5-webcomponents/issues/10495)) ([600ab25](https://github.com/SAP/ui5-webcomponents/commit/600ab25a0ccf2e69d97bc40f44ac94f4a7e740eb))
+* **ui5-menu:** Enhance keyboard navigation ([#10243](https://github.com/SAP/ui5-webcomponents/issues/10243)) ([34d604d](https://github.com/SAP/ui5-webcomponents/commit/34d604d3e63a4d2a15cdc0a1222c568f379ed333))
+* **ui5-split-button, etc:** introduce new parameters ([#10680](https://github.com/SAP/ui5-webcomponents/issues/10680)) ([af32326](https://github.com/SAP/ui5-webcomponents/commit/af32326a551d5be858e470e374e1c0f6e07c75d1))
+* **ui5-time-picker:** Improve component based on user testing ([#10577](https://github.com/SAP/ui5-webcomponents/issues/10577)) ([e687547](https://github.com/SAP/ui5-webcomponents/commit/e687547045d2d58b91a165f4ef27bcc0c74dbf47))
+* update sap/icons to v5.11.1 & 4.23 ([#10692](https://github.com/SAP/ui5-webcomponents/issues/10692)) ([4545ef7](https://github.com/SAP/ui5-webcomponents/commit/4545ef7998bbd52782d476486957debd633ec1af))
+
+
+
+
+
 # [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)
 
 

package/README.md

@@ -16,6 +16,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Tag                      | `ui5-tag`                   | `import "@ui5/webcomponents/dist/Tag.js";`                 |
 | Busy Indicator           | `ui5-busy-indicator`        | `import "@ui5/webcomponents/dist/BusyIndicator.js";`       |
 | Button                   | `ui5-button`                | `import "@ui5/webcomponents/dist/Button.js";`              |
+| ButtonBadge              | `ui5-button-badge`          | `import "@ui5/webcomponents/dist/ButtonBadge.js";`         |
 | Calendar                 | `ui5-calendar`              | `import "@ui5/webcomponents/dist/Calendar.js";`            |
 | Calendar Date            | `ui5-date`                  | comes with `ui5-calendar`                                  |
 | Calendar Date Range      | `ui5-date-range`            | comes with `ui5-calendar`                                  |
@@ -93,37 +94,41 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 
 ## Provided features
 
-```js
-import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
-```
-
-| Affects                                           | Feature Import                                                       | Description                                                                                             |
-|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Support for "more colors dialog" for the color palette component                                        |
-| `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Support for input suggestions while typing                                                              |
+| Feature name             | Affects                                               | Triggered by                            | Description                                                                                             |
+|--------------------------|-------------------------------------------------------|-----------------------------------------|---------------------------------------------------------------------------------------------------------|
+| More Colors Dialog       | `ui5-color-palette`, `ui5-color-palette-popover`      | Setting `showMoreColors` to `true`      | Support for "more colors dialog" for the color palette component                                        |
+| Input Suggestions        | `ui5-input`, `ui5-multi-input`                        | Setting `showSuggestions` to `true`     | Support for input suggestions while typing                                                              |
 
 ### Color Palette "More Colors" Feature
 
+The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
+Since this functionality is not always needed, the "More colors" dialog and its children are not direct dependencies of the component by default,
+and are only loaded dynamically when `showMoreColors` is set to `true`.
+
+Feature import (optional as of `2.7.0`): 
+
 ```js
 import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
 ```
 
-The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
-Since this is not always needed, in order to use this dialog, you must import the above feature.
+You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so. 
 
 ### Input Suggestions Feature
 
-```js
-import "@ui5/webcomponents/dist/features/InputSuggestions.js";
-```
-
 The `<ui5-input>` element acts as an `<input>` with the Fiori design and added functionality, such as value state.
 
 The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing.
 Since input suggestions may not always be needed, they do not come as part of the `<ui5-input>` itself.
 
-To enable the functionality, import the above module into your app. This will also automatically import `ui5-suggestion-item`
-for your convenience.
+Setting the `showSuggestions` property to `true` loads the suggestions feature dynamically (as well as the `ui5-suggestion-item` component) for your convenience.
+
+Feature import (optional as of `2.7.0`):  
+
+```js
+import "@ui5/webcomponents/dist/features/InputSuggestions.js";
+```
+
+You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.
 
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)

package/cypress/specs/Button.cy.ts

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../../src/Button.js";
+import "../../src/ButtonBadge.js";
 import type Button from "../../src/Button.js";
 import "@ui5/webcomponents-icons/dist/download.js";
 import "@ui5/webcomponents-icons/dist/employee.js";
@@ -359,4 +360,25 @@ describe("Accessibility", () => {
 		cy.get("@button")
 			.should("have.attr", "aria-description", "A long description.");
 	});
+
+	it("button with a badge", () => {
+		cy.mount(html`<ui5-button design="Emphasized" icon="employee">Emphasized
+				<ui5-button-badge design="OverlayText" text="999+" slot="badge"></ui5-button-badge>
+			</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.find("ui5-button-badge")
+			.as("badge");
+
+		cy.get("@badge")
+			.shadow()
+			.find("ui5-tag")
+			.as("tag");
+
+		cy.get("@tag")
+			.should("have.attr", "design", "Critical");
+
+		cy.get("@tag")
+			.should("have.text", "999+");
+	});
 });

package/cypress/specs/ColorPalette.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/ColorPalette.js";
 import "../../src/ColorPaletteItem.js";
-import "../../src/features/ColorPaletteMoreColors.js";
 
 describe("Color Palette tests", () => {
 	it("internal color picker should have selected color set on open", () => {

package/cypress/specs/Dialog.cy.ts

@@ -0,0 +1,42 @@
+import { html } from "lit";
+import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
+import "../../src/Dialog.js";
+
+describe("Keyboard", () => {
+	it("F6 navigation", () => {
+		cy.mount(html`
+	<button data-sap-ui-fastnavgroup="true" id="test"></button>
+	<ui5-dialog open>
+			<div data-sap-ui-fastnavgroup="true">
+				<button id="first">First group focusable</button>
+			</div>
+			<div data-sap-ui-fastnavgroup="true">
+				<button id="second">Second group focusable</button>
+			</div>
+	</ui5-dialog>
+	<button data-sap-ui-fastnavgroup="true"></button>`);
+
+		cy.get("#first")
+			.should("be.focused");
+
+		cy.realPress(["Shift", "F6"]);
+
+		cy.get("#second")
+			.should("be.focused");
+
+		cy.realPress(["Shift", "F6"]);
+
+		cy.get("#first")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		cy.get("#second")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		cy.get("#first")
+			.should("be.focused");
+	});
+});

package/cypress/specs/ExpandableText.cy.ts

@@ -376,7 +376,8 @@ describe("ExpandableText", () => {
 
 			cy.get("@rpo")
 				.contains("[slot=footer] [ui5-button]", EXPANDABLE_TEXT_CLOSE.defaultText)
-				.should("exist");
+				.should("exist")
+				.and("be.visible");
 
 			cy.get("@rpo")
 				.contains("[slot=footer] [ui5-button]", EXPANDABLE_TEXT_CLOSE.defaultText)

package/cypress/specs/F6.cy.ts

@@ -27,7 +27,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -94,7 +94,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -149,7 +149,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -421,7 +421,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -488,7 +488,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -543,7 +543,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -790,4 +790,72 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 	});
+
+	describe("Groups in container", () => {
+		it("tests forward navigation", () => {
+			cy.mount(html`<div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+		<div data-sap-ui-fastnavgroup-container="true" data-sap-ui-fastnavgroup="true">
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="first">First group focusable</ui5-button>
+			</div>
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="second">Second group focusable</ui5-button>
+			</div>
+		</div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+	</div>`);
+
+			// act
+			cy.get("#first")
+				.realClick();
+
+			cy.realPress("F6");
+
+			cy.get("#second")
+				.should("be.focused");
+
+			cy.realPress("F6");
+
+			cy.get("#first")
+				.should("be.focused");
+		});
+
+		it("tests backward navigation", () => {
+			cy.mount(html`<div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+		<div data-sap-ui-fastnavgroup-container="true">
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="first">First group focusable</ui5-button>
+			</div>
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="second">Second group focusable</ui5-button>
+			</div>
+		</div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+	</div>`);
+
+			// act
+			cy.get("#first")
+				.realClick();
+
+			cy.realPress(["Shift", "F6"]);
+
+			cy.get("#second")
+				.should("be.focused");
+
+			cy.realPress(["Shift", "F6"]);
+
+			cy.get("#first")
+				.should("be.focused");
+		});
+	});
 });

package/cypress/specs/Input.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/Input.js";
 import type Input from "../../src/Input.js";
-import "../../src/features/InputSuggestions.js";
 import "../../src/SuggestionItem.js";
 import "../../src/SuggestionItemCustom.js";
 import "../../src/SuggestionItemGroup.js";

package/cypress/specs/Menu.cy.ts

@@ -495,5 +495,41 @@ describe("Menu interaction", () => {
 				.find("[ui5-responsive-popover]")
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
+
+		it("Menu items - navigation in endContent", () => {
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			<ui5-menu id="menu" opener="btnOpen">
+				<ui5-menu-item id="item2" text="Item 2">
+					<ui5-button id="newLock" slot="endContent" icon="locked" design="Transparent"></ui5-button>
+					<ui5-button id="newFavorite" slot="endContent" icon="favorite" design="Transparent"></ui5-button>
+				</ui5-menu-item>
+				<ui5-menu-item text="Item3" additional-text="Ctrl+F" icon="add-folder" ></ui5-menu-item>
+			</ui5-menu>`);
+
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
+			cy.get("[ui5-menu] > [ui5-menu-item]").as("items");
+			cy.get("[ui5-menu] [ui5-button]").as("buttons");
+			cy.get("@items").first().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").last().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").last().should("be.focused");
+
+			cy.realPress("ArrowLeft");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowLeft");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.get("@items").last().should("be.focused");
+		});
 	});
 });

package/cypress/specs/MultiComboBox.cy.ts

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type MultiComboBox from "../../src/MultiComboBox.js";
 
 describe("Security", () => {
 	it("tests setting malicious text to items", () => {
@@ -20,3 +21,40 @@ describe("Security", () => {
 			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
 	});
 });
+
+describe("Value State", () => {
+	it("should be able to change value states upon typing", () => {
+		cy.mount(html`
+			<ui5-multi-combobox no-validation>
+				<ui5-mcb-item text="Item 1"></ui5-mcb-item>
+				<ui5-mcb-item text="Item 2"></ui5-mcb-item>
+			</ui5-multi-combobox>
+		`);
+
+		// add event listener
+		cy.get("ui5-multi-combobox")
+			.then(mcb => {
+				mcb.get(0).addEventListener("input", e => {
+					(mcb.get(0) as MultiComboBox).valueState = (e.target as MultiComboBox).value.length ? "Negative" : "Information";
+				});
+			});
+
+		// type "f"
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.type("f");
+
+		cy.realPress("Backspace");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.realPress("f");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find(".ui5-valuestatemessage--information")
+			.should("not.exist");
+	});
+});

package/cypress/specs/MultiInput.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/MultiInput.js";
 import "../../src/Tokenizer.js";
-import "../../src/features/InputSuggestions.js";
 import "../../src/SuggestionItem.js";
 
 describe("MultiInput Web Component", () => {

package/cypress/specs/RatingIndicator.cy.ts

@@ -63,4 +63,29 @@ describe("RatingIndicator", () => {
 				.should("have.css", "height", "24px");
 		});
 	});
+
+	describe("RatingIndicator Accessibility", () => {
+		it("should be able to tab after and before readonly element", () => {
+			cy.mount(html`
+				<button>Before</button>
+				<ui5-rating-indicator value="3" readonly></ui5-rating-indicator>
+				<button>after</button>
+			`);
+
+			cy.get("button:first").realClick();
+			cy.focused().should("contain", "Before");
+
+			// press tab
+			cy.realPress("Tab");
+			cy.realPress("Tab");
+
+			cy.focused().should("contain", "after");
+
+			// press shift + tab
+			cy.realPress(["Shift", "Tab"]);
+			cy.realPress(["Shift", "Tab"]);
+
+			cy.focused().should("contain", "Before");
+		});
+	});
 });

package/cypress/specs/Select.cy.ts

@@ -37,3 +37,22 @@ describe("Select - Accessibility", () => {
 			.should("have.attr", "title", EXPECTED_TOOLTIP);
 	});
 });
+
+describe("Select - Popover", () => {
+	it("Popover should render custom value state", () => {
+		cy.mount(html`
+			<ui5-select id="warningSelect" value-state="Critical">
+				<ui5-option>This option has text bigger than ui5-select's width</ui5-option>
+				<div slot="valueStateMessage">Custom message</div>
+
+			</ui5-select>
+		`);
+
+		cy.get("#warningSelect").realClick().realPress("Escape");
+
+		cy.get("#warningSelect")
+			.find("[slot=\"valueStateMessage\"]")
+			.should("be.visible")
+			.should("have.text", "Custom message");
+	});
+});

package/cypress/specs/base/Events.cy.ts

@@ -4,7 +4,6 @@ import "../../../src/Select.js";
 import "../../../src/Option.js";
 import "../../../src/Input.js";
 import "../../../src/SuggestionItem.js";
-import "../../../src/features/InputSuggestions.js";
 import "../../../src/MessageStrip.js";
 import "../../../src/MultiComboBox.js";
 import "../../../src/MultiComboBoxItem.js";

package/cypress/support/commands/ColorPalette.commands.ts

@@ -42,8 +42,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 	cy.get("@colorPalette")
 		.shadow()
 		.find("ui5-dialog")
-		.find("ui5-button")
-		.should("have.attr", "design", "Emphasized") // The OK button is Emphasized (the Cancel button is Transparent)
+		.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
 	cy.get("@redColor")
@@ -59,6 +58,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 		.should("have.attr", "value", values.a);
 
 	cy.get("@okButton")
+		.should("be.visible") // Make sure the OK button is rendered before clicking it
 		.realClick();
 
 	cy.get("@colorPalette")