diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index 3a242d3f09f7..10593b3193c0 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/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(
+
+
+
+
+
+ );
+
+ 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", () => {
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 6c95b88b8a07..3061e6069183 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/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 {
diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx
index 885e03aae131..c77aea90fc98 100644
--- a/packages/fiori/src/ShellBarTemplate.tsx
+++ b/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 => (