From cdce315d596dfff4c3755c9e2491e428094c1586 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 21 Jul 2026 14:38:53 +0300 Subject: [PATCH 1/2] fix(ui5-shellbar-item): render overflow badge via additionalText instead of CSS ::after Replace the fragile CSS pseudo-element approach for the count badge on ShellBarItem overflow list items with a proper semantic implementation: - ShellBarItemTemplate: pass `count` as `additionalText` on ListItemStandard instead of `data-count`; the component renders it inline after the title text, exactly matching the Figma spec placement (before the trailing arrow) - ShellBarItem.css: drop `[ui5-li]:after` / `[ui5-li][data-count]:after` rules; add `[ui5-li]::part(additional-text)` to style the badge pill using SAP design tokens (sapContent_BadgeBackground, sapFontBoldFamily, _ui5_shellbar_button_badge_border) - ShellBarPopover.css: remove duplicate `[ui5-li]:after` block ? it was dead code because ShellBar's shadow root cannot pierce two shadow levels into ListItemStandard's internals through ShellBarItem - ShellBar.html: add three Figma badge scenario samples ? badge visible in bar, one badged item overflowed (counter on overflow button), multiple badged items overflowed (attention dot on overflow button) --- packages/fiori/src/ShellBarItemTemplate.tsx | 2 +- packages/fiori/src/themes/ShellBarItem.css | 28 ++++++--------- packages/fiori/src/themes/ShellBarPopover.css | 26 -------------- packages/fiori/test/pages/ShellBar.html | 36 +++++++++++++++++++ 4 files changed, 48 insertions(+), 44 deletions(-) diff --git a/packages/fiori/src/ShellBarItemTemplate.tsx b/packages/fiori/src/ShellBarItemTemplate.tsx index 2f0231192625c..0b315df9b43c3 100644 --- a/packages/fiori/src/ShellBarItemTemplate.tsx +++ b/packages/fiori/src/ShellBarItemTemplate.tsx @@ -9,7 +9,7 @@ export default function ShellBarItemTemplate(this: ShellBarItem) { ShellBar in Compact + + +

Badge Scenarios

+ + + + Badge - Single Visible + + + + + + +
+ + Badge - Overflow Counter + + + + + + +
+ + +
+ + Badge - Attention Dot + + + + + + +
+ Custom Action Fired From 78bf2bd072180c93c5bcfa50afcbb07fb5977252 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 21 Jul 2026 18:00:04 +0300 Subject: [PATCH 2/2] fix(ui5-shellbar-item): render overflow badge as inline span after item text Replace the CSS ::after pseudo-element approach for the count badge on ShellBarItem overflow list items with a dedicated shadow DOM span that sits immediately after the item text ? matching the Figma spec placement. - ShellBarItemTemplate: render and as slotted children of ListItemStandard instead of using additionalText; the badge span lives in ShellBarItem's shadow DOM so ListItem.css active-state color overrides cannot reach it ? no !important needed - ShellBarItem.css: replace [ui5-li]:after / [ui5-li][data-count]:after rules with ::part(title) flex layout and .ui5-shellbar-item-badge pill styles using SAP badge design tokens - ShellBar.html: add three Figma badge scenario samples ? badges visible in bar, one badged item overflowed (counter on overflow button), multiple badged items overflowed (attention dot on overflow button) - ShellBar.cy.tsx: add two tests covering overflow badge span rendering and count update propagation; mount ShellBarItem standalone to prevent ShellBar overflow logic from resetting inOverflow mid-test --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 40 +++++++++++++++++ packages/fiori/src/ShellBarItemTemplate.tsx | 4 +- packages/fiori/src/themes/ShellBarItem.css | 15 ++++++- packages/fiori/test/pages/ShellBar.html | 45 +++++++++++--------- 4 files changed, 80 insertions(+), 24 deletions(-) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index a17625e7a83b1..005a2b06ef25d 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -1381,6 +1381,46 @@ describe("ButtonBadge in ShellBar", () => { .should("have.attr", "text", "3"); }); + it("Test if overflow list item renders badge span when count is set", () => { + cy.mount( + <> + + + + ); + + // Item with count: badge span exists with correct text + cy.get("#item-with-badge") + .shadow() + .find(".ui5-shellbar-item-badge") + .should("exist") + .should("have.text", "42"); + + // Item without count: no badge span rendered + cy.get("#item-no-badge") + .shadow() + .find(".ui5-shellbar-item-badge") + .should("not.exist"); + }); + + it("Test count updates propagate to overflow badge span", () => { + cy.mount( + + ); + + cy.get("#item-update") + .shadow() + .find(".ui5-shellbar-item-badge") + .should("have.text", "1"); + + cy.get("#item-update").invoke("attr", "count", "99+"); + + cy.get("#item-update") + .shadow() + .find(".ui5-shellbar-item-badge") + .should("have.text", "99+"); + }); + it("Test if overflow button shows appropriate badge when items are overflowed", () => { cy.mount( - {this.text} + {this.text} + {this.count && {this.count}} ); } diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css index 0ab0f17497642..b02f647f3acad 100644 --- a/packages/fiori/src/themes/ShellBarItem.css +++ b/packages/fiori/src/themes/ShellBarItem.css @@ -27,7 +27,20 @@ color: var(--sapList_TextColor); } -[ui5-li]::part(additional-text) { +[ui5-li]::part(title) { + display: flex; + align-items: center; + gap: 0.5rem; + overflow: visible; +} + +.ui5-shellbar-item-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ui5-shellbar-item-badge { display: inline-flex; align-items: center; justify-content: center; diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html index 8bba9ac8f766b..8dce2ab221942 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -266,34 +266,37 @@

Badge Scenarios

Badge - Single Visible + + + - + -
- - Badge - Overflow Counter - - - - - - -
+ + + + + + + + + + -
- - Badge - Attention Dot - - - - - - -
+ + + + + + + + + + Custom Action Fired