diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index a9846f5814ee..2a918463e009 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -48,6 +48,7 @@ import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement import type ShellBarItem from "./ShellBarItem.js"; import type { ShellBarItemAccessibilityAttributes } from "./ShellBarItem.js"; import type ShellBarBranding from "./ShellBarBranding.js"; +import type ShellBarSearch from "./ShellBarSearch.js"; // Templates import ShellBarTemplate from "./ShellBarTemplate.js"; @@ -987,6 +988,13 @@ class ShellBar extends UI5Element { item.classList.add("ui5-shellbar-hidden-button"); } + if (hiddenItems.length === 1) { + return { + itemsInfo: this._itemsInfo, + contentInfo: this._contentInfo, + }; + } + if (hiddenItems.length === 1 && !this.showSearchField) { const nextItemToHide = hidableDomElements[++lastHiddenIndex]; if (nextItemToHide) { diff --git a/packages/fiori/test/pages/ShellBar_content_button_overflow.html b/packages/fiori/test/pages/ShellBar_content_button_overflow.html new file mode 100644 index 000000000000..9795b40b9082 --- /dev/null +++ b/packages/fiori/test/pages/ShellBar_content_button_overflow.html @@ -0,0 +1,288 @@ + + + + + + Shell Bar - Content Button Overflow + + + + + + + + + + + + + +
+ Hidden Items +
+ +
+
+ + + + + + + + + + + + + + + + Analytics Dashboard + + + + + + + + North + America + + Refresh + + Filters + +
+ Live Updates + +
+ + Actions + + Export + + + +
+ Report Date: + +
+ + + + + + + + + + + +
+
+ ShellBar Content Button Overflow Management + Uses a button in the content area that appears when items are hidden. Resize the browser + window to see how overflow management works. +
+ All items visible +
+
+
+ + + + + + diff --git a/packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html b/packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html new file mode 100644 index 000000000000..8cf256c22b19 --- /dev/null +++ b/packages/fiori/test/pages/ShellBar_shellbar_item_overflow.html @@ -0,0 +1,267 @@ + + + + + + Shell Bar - ShellBar Item Overflow + + + + + + + + + + + + + +
+ Hidden Items +
+ +
+
+ + + + + + + + + + + + + Project Management + + + + + + + + Project + Alpha + + New Task + + Kanban View + +
+ High Priority + 5 +
+ + Team + + Reports + + + +
+ Deadline: + +
+ + + + + + + +
+
+ ShellBar Item Overflow Management + Uses a ui5-shellbar-item that appears when content items are hidden. This provides a more + integrated look in the actions area. +
+ All items visible +
+
+
+ + + + + +