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 => (