fix(ui5-shellbar): preserve insertion order for ShellBarItems (#13590)

ShellBarItems with icon="feedback" or icon="sys-help" were always displayed at the end of the actions area, ignoring their position in the DOM. Items now appear in the same order they are declared.

Remove PREDEFINED_PLACE_ITEMS, sortItems(), and all call sites, passing this.items directly instead.

JIRA: BGSOFUIPIRIN-7070

Author: NakataCode

packages/fiori/cypress/specs/ShellBar.cy.tsx

@@ -7,6 +7,7 @@ import sysHelp from "@ui5/webcomponents-icons/dist/sys-help.js";
 import da from "@ui5/webcomponents-icons/dist/da.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/feedback.js";
 import "@ui5/webcomponents-icons/dist/disconnected.js";
 import "@ui5/webcomponents-icons/dist/incoming-call.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
@@ -1813,6 +1814,23 @@ describe("Component Behavior", () => {
 			cy.get("@alertClick")
 				.should("have.been.calledOnce");
 		});
+
+		it("renders items in insertion order regardless of icon name", () => {
+			cy.mount(
+				<ShellBar>
+					<ShellBarItem id="item-feedback" icon="feedback" text="Feedback" stable-dom-ref="item-feedback" />
+					<ShellBarItem id="item-accept" icon="accept" text="Accept" stable-dom-ref="item-accept" />
+					<ShellBarItem id="item-alert" icon="alert" text="Alert" stable-dom-ref="item-alert" />
+				</ShellBar>
+			);
+
+			cy.get("[ui5-shellbar]").shadow().find(".ui5-shellbar-custom-item").then($items => {
+				// feedback was inserted first, so its wrapper must be the first custom item in the DOM
+				expect($items[0].getAttribute("data-ui5-stable")).to.equal("item-feedback");
+				expect($items[1].getAttribute("data-ui5-stable")).to.equal("item-accept");
+				expect($items[2].getAttribute("data-ui5-stable")).to.equal("item-alert");
+			});
+		});
 	});
 
 	it("Test disabled slotted button does not show hover styles", () => {

packages/fiori/src/ShellBar.ts

@@ -71,9 +71,6 @@ import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 
 type ShellBarBreakpoint = "S" | "M" | "L" | "XL" | "XXL";
 
-// actions always visible in lean mode, order is important
-const PREDEFINED_PLACE_ITEMS = ["feedback", "sys-help"];
-
 const ShellBarActions = {
 	Search: "search",
 	Profile: "profile",
@@ -767,7 +764,7 @@ class ShellBar extends UI5Element {
 		const result = this.overflow.updateOverflow({
 			actions: this.actions,
 			content: this.sortContent(this.content),
-			customItems: this.sortItems(this.items),
+			customItems: this.items,
 			hiddenItemsIds: this.hiddenItemsIds,
 			showSearchField: this.enabledFeatures.search && this.showSearchField,
 			overflowOuter: this.overflowOuter!,
@@ -865,7 +862,7 @@ class ShellBar extends UI5Element {
 	get overflowItems() {
 		return this.overflow.getOverflowItems({
 			actions: this.actions,
-			customItems: this.sortItems(this.items),
+			customItems: this.items,
 			hiddenItemsIds: this.hiddenItemsIds,
 		});
 	}
@@ -1060,14 +1057,6 @@ class ShellBar extends UI5Element {
 
 	/* =================== Items Management =================== */
 
-	sortItems(items: readonly ShellBarItem[]) {
-		return items.toSorted((a, b) => {
-			const aIndex = PREDEFINED_PLACE_ITEMS.indexOf(a.icon || "");
-			const bIndex = PREDEFINED_PLACE_ITEMS.indexOf(b.icon || "");
-			return aIndex - bIndex;
-		});
-	}
-
 	/* =================== Accessibility =================== */
 
 	get actionsAccessibilityInfo(): ShellBarAccessibilityInfo {

packages/fiori/src/ShellBarTemplate.tsx

@@ -153,7 +153,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 						)}
 
 						{/* Custom Items */}
-						{this.sortItems(this.items).map(item => (
+						{this.items.map(item => (
 							<div
 								key={item._id}
 								class={{