From b4e2464e2a1e2ea708ee2383b110e6ee220c621d Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Wed, 18 Feb 2026 23:44:56 +0200 Subject: [PATCH] feat(ui5-shellbar): add application-level overflow sample - Add website sample demonstrating content-item-visibility-change event - Add test page with data-driven state sync between shellbar and popover - Add cozy mode CSS styling for buttons in content slot --- packages/fiori/src/themes/ShellBar.css | 10 + .../fiori/test/pages/ShellBar_Overflow.html | 186 ++++++++++++++++++ .../fiori/ShellBar/ShellBar.mdx | 8 +- .../fiori/ShellBar/Overflow/Overflow.md | 4 + .../_samples/fiori/ShellBar/Overflow/main.js | 59 ++++++ .../fiori/ShellBar/Overflow/sample.html | 50 +++++ 6 files changed, 316 insertions(+), 1 deletion(-) create mode 100644 packages/fiori/test/pages/ShellBar_Overflow.html create mode 100644 packages/website/docs/_samples/fiori/ShellBar/Overflow/Overflow.md create mode 100644 packages/website/docs/_samples/fiori/ShellBar/Overflow/main.js create mode 100644 packages/website/docs/_samples/fiori/ShellBar/Overflow/sample.html diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index d0a7f6735818..5820a66678a3 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -79,6 +79,16 @@ --_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border); } +/* ============================================================================ + CONTENT SLOT BUTTONS + ============================================================================ */ + +::slotted([ui5-button][slot^="content"]), +::slotted([ui5-toggle-button][slot^="content"]) { + height: 2.25rem; + min-width: 2.25rem; +} + /* ============================================================================ ACTION BUTTONS (Items & Internal Actions) ============================================================================ */ diff --git a/packages/fiori/test/pages/ShellBar_Overflow.html b/packages/fiori/test/pages/ShellBar_Overflow.html new file mode 100644 index 000000000000..92901df7395d --- /dev/null +++ b/packages/fiori/test/pages/ShellBar_Overflow.html @@ -0,0 +1,186 @@ + + + + + + Shell Bar - Application-Level Overflow + + + + + + + + + + + +
+ + +
+ + + + Analytics Dashboard + + + + +
+ +
+ Resize ShellBar: + +
+ + + + + + diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx index c48200d2bef4..ffcec3748a36 100644 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx +++ b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx @@ -4,6 +4,7 @@ import EmbeddedBackNavigation from "../../../_samples/fiori/ShellBar/EmbeddedBac import MultipleNonProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md"; import MultipleProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md"; import TrialExample from "../../../_samples/fiori/ShellBar/TrialExample/TrialExample.md"; +import Overflow from "../../../_samples/fiori/ShellBar/Overflow/Overflow.md"; <%COMPONENT_OVERVIEW%> @@ -39,4 +40,9 @@ ShellBar setup for multiple productive system instances with region indicators. ### Multiple Non-Productive Instances ShellBar setup for multiple non-productive system instances with system and region tags. - \ No newline at end of file + + +### Application-Level Overflow +This sample demonstrates how applications can implement custom overflow handling for content items. When the ShellBar becomes narrow, content items are hidden and the application renders them in a custom popover. The sample listens to the `content-item-visibility-change` event and manages its own overflow button and popover. Use the slider to resize and observe the overflow behavior. + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/Overflow/Overflow.md b/packages/website/docs/_samples/fiori/ShellBar/Overflow/Overflow.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/Overflow/Overflow.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/fiori/ShellBar/Overflow/main.js b/packages/website/docs/_samples/fiori/ShellBar/Overflow/main.js new file mode 100644 index 000000000000..7b989db78080 --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/Overflow/main.js @@ -0,0 +1,59 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Tag.js"; +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Slider.js"; +import "@ui5/webcomponents/dist/Popover.js"; + +import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarBranding.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; + +import "@ui5/webcomponents/dist/Icon.js"; + +import "@ui5/webcomponents-icons/dist/menu2.js"; +import "@ui5/webcomponents-icons/dist/slim-arrow-down.js"; +import "@ui5/webcomponents-icons/dist/example.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; + +const shellbar = document.getElementById("shellbar"); +const popover = document.getElementById("popover"); +const popoverContent = document.getElementById("popover-content"); + +// Create overflow button (added to shellbar when items are hidden) +const overflowBtn = document.createElement("ui5-button"); +overflowBtn.icon = "slim-arrow-down"; +overflowBtn.slot = "content"; +overflowBtn.dataset.hideOrder = "999"; // Never hide the overflow button +overflowBtn.addEventListener("click", () => { + popover.opener = overflowBtn; + popover.open = !popover.open; +}); + +// Listen for content items becoming hidden/visible +shellbar.addEventListener("content-item-visibility-change", (e) => { + const hiddenItems = e.detail.items; + + // Update popover with clones of hidden items + popoverContent.innerHTML = ""; + hiddenItems.forEach(item => { + const clone = item.cloneNode(true); + clone.removeAttribute("slot"); + popoverContent.appendChild(clone); + }); + + // Show/hide overflow button based on whether items are hidden + if (hiddenItems.length > 0) { + shellbar.prepend(overflowBtn); + } else { + overflowBtn.remove(); + popover.open = false; + } +}); + +// Slider to resize shellbar container +document.getElementById("slider").addEventListener("input", (e) => { + document.getElementById("container").style.width = `${e.target.value}%`; +}); diff --git a/packages/website/docs/_samples/fiori/ShellBar/Overflow/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Overflow/sample.html new file mode 100644 index 000000000000..6fdbcfe4747b --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/Overflow/sample.html @@ -0,0 +1,50 @@ + + + + + + + + Sample + + + + + + +
+ + +
+ + + + Product + + + + + Customer Rainbird + + + Development - System 1 + + + + + + + + +
+ +
+ Resize: + + + + + + + + \ No newline at end of file