From ed98e2e1655d78f10a96d329d347df17efb72818 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Fri, 23 Oct 2026 17:02:58 +0300 Subject: [PATCH] feat(ui5-shellbar): add revealedItems to content-item-visibility-change event MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `content-item-visibility-change` event previously only carried `items` — the currently-hidden content-slot elements. Consumers had no explicit signal for which items transitioned from hidden back to visible (e.g. when the ShellBar grows wider or search closes), forcing them to maintain their own diff state. This adds `revealedItems: Array` to the event payload: the subset of previously-hidden items that are now visible again. Consumers can now react directly to `revealedItems` without tracking state across events, which closes the design gap reported by FLP where items hidden via the ShellBar's overflow were never explicitly told to reappear when space recovered — particularly when available space changes without a viewport resize (e.g. search field open/close). --- packages/fiori/src/ShellBar.ts | 11 ++++++++--- packages/fiori/test/pages/ShellBar_Features.html | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 60419f06116e2..8858d5ed659c5 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -132,7 +132,8 @@ type ShellBarMenuItemClickEventDetail = { }; type ShellBarContentItemVisibilityChangeEventDetail = { - items: Array + items: Array, + revealedItems: Array, }; type ShellBarSearchButtonEventDetail = { @@ -302,7 +303,8 @@ type ShellBarSearchFieldClearEventDetail = { * Fired, when an item from the content slot is hidden or shown. * **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change. * - * @param {Array} array of all the items that are hidden + * @param {Array} items array of all the items that are currently hidden + * @param {Array} revealedItems array of items that just became visible (were hidden in the previous state) * @public * @since 2.7.0 */ @@ -810,8 +812,11 @@ class ShellBar extends UI5Element { const newHiddenContentIds = filterContentIds(newHiddenItemsIds); if (!arraysAreEqual(oldHiddenContentIds, newHiddenContentIds)) { + const toElement = (id: string) => this.content.find(item => (item as any)._individualSlot as string === id)!; + const revealedContentIds = oldHiddenContentIds.filter(id => !newHiddenContentIds.includes(id)); this.fireDecoratorEvent("content-item-visibility-change", { - items: newHiddenContentIds.map(id => this.content.find(item => (item as any)._individualSlot as string === id)!), + items: newHiddenContentIds.map(toElement), + revealedItems: revealedContentIds.map(toElement), }); } } diff --git a/packages/fiori/test/pages/ShellBar_Features.html b/packages/fiori/test/pages/ShellBar_Features.html index 5538fd982ccac..bb8ad0141643a 100644 --- a/packages/fiori/test/pages/ShellBar_Features.html +++ b/packages/fiori/test/pages/ShellBar_Features.html @@ -658,7 +658,7 @@

ShellBar Feature Toggle

}); shellbar.addEventListener('ui5-content-item-visibility-change', (e) => { - console.log('Content visibility changed:', e.detail.items.length, 'items hidden'); + console.log('Content visibility changed:', e.detail.items.length, 'items hidden,', e.detail.revealedItems.length, 'items revealed'); }); shellbar.addEventListener('ui5-search-field-toggle', (e) => {