From cdce315d596dfff4c3755c9e2491e428094c1586 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 21 Jul 2026 14:38:53 +0300 Subject: [PATCH 1/3] 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/3] 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 From 22b907b16b99a0cc9b540a97f84b2f56f8083b11 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 28 Jul 2026 16:13:37 +0300 Subject: [PATCH 3/3] fix(ui5-shellbar-item): render overflow badge via additionalText with text wrapping Replace the CSS ::after pseudo-element approach for the count badge on ShellBarItem overflow list items with a proper API-based implementation: - ShellBarItemTemplate: use `text` prop + `wrappingType="Normal"` on ListItemStandard for proper text wrapping on long item labels; pass `count` as `additionalText` ? an internal implementation detail of ShellBarItem that can be revisited if ListItemStandard gains a dedicated trailing slot - ShellBarItem.css: style `[ui5-li]::part(additional-text)` as a badge pill using SAP badge design tokens; use `!important` on background, color, and text-shadow to override ListItemStandard's active-state color rule which targets the internal class directly; `align-self: center` keeps badge vertically centered against multi-line text - ShellBarPopover.css: remove duplicate `[ui5-li]:after` block ? was dead code since ShellBar's shadow root cannot pierce two shadow levels into ListItemStandard - ShellBar.cy.tsx: update overflow badge tests to assert on `additional-text` attribute instead of the removed badge span class - ShellBar.html: add three Figma badge scenario samples Fixes: #12490 JIRA: BGSOFUIPIRIN-7082 --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 25 ++++++++-------- packages/fiori/src/ShellBarItemTemplate.tsx | 8 +++--- packages/fiori/src/themes/ShellBarItem.css | 30 +++++++++++++------- packages/fiori/test/pages/ShellBar.html | 6 ++-- 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index b8c37536d4653..1b03a154148a7 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -1425,7 +1425,7 @@ describe("ButtonBadge in ShellBar", () => { .should("have.attr", "text", "3"); }); - it("Test if overflow list item renders badge span when count is set", () => { + it("Test if overflow list item renders badge when count is set", () => { cy.mount( <> @@ -1433,36 +1433,35 @@ describe("ButtonBadge in ShellBar", () => { ); - // Item with count: badge span exists with correct text + // Item with count: additionalText on the ListItemStandard carries the badge value cy.get("#item-with-badge") .shadow() - .find(".ui5-shellbar-item-badge") - .should("exist") - .should("have.text", "42"); + .find("[ui5-li]") + .should("have.attr", "additional-text", "42"); - // Item without count: no badge span rendered + // Item without count: no additionalText attribute cy.get("#item-no-badge") .shadow() - .find(".ui5-shellbar-item-badge") - .should("not.exist"); + .find("[ui5-li]") + .should("not.have.attr", "additional-text"); }); - it("Test count updates propagate to overflow badge span", () => { + it("Test count updates propagate to overflow badge", () => { cy.mount( ); cy.get("#item-update") .shadow() - .find(".ui5-shellbar-item-badge") - .should("have.text", "1"); + .find("[ui5-li]") + .should("have.attr", "additional-text", "1"); cy.get("#item-update").invoke("attr", "count", "99+"); cy.get("#item-update") .shadow() - .find(".ui5-shellbar-item-badge") - .should("have.text", "99+"); + .find("[ui5-li]") + .should("have.attr", "additional-text", "99+"); }); it("Test if overflow button shows appropriate badge when items are overflowed", () => { diff --git a/packages/fiori/src/ShellBarItemTemplate.tsx b/packages/fiori/src/ShellBarItemTemplate.tsx index d942da5331c84..2ddc1bfc6d249 100644 --- a/packages/fiori/src/ShellBarItemTemplate.tsx +++ b/packages/fiori/src/ShellBarItemTemplate.tsx @@ -9,13 +9,13 @@ export default function ShellBarItemTemplate(this: ShellBarItem) { - {this.text} - {this.count && {this.count}} - + /> ); } diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css index b02f647f3acad..f0eb3da16b37e 100644 --- a/packages/fiori/src/themes/ShellBarItem.css +++ b/packages/fiori/src/themes/ShellBarItem.css @@ -25,22 +25,30 @@ [ui5-li]::part(icon) { color: var(--sapList_TextColor); + align-self: center; } -[ui5-li]::part(title) { - display: flex; +[ui5-li]::part(additional-text) { + display: inline-flex; align-items: center; - gap: 0.5rem; - overflow: visible; -} - -.ui5-shellbar-item-text { - overflow: hidden; - text-overflow: ellipsis; + justify-content: center; + height: 1rem; + min-width: 1rem; + padding: 0 0.3125rem; + border-radius: 0.5rem; + border: var(--_ui5_shellbar_button_badge_border); + background: var(--sapContent_BadgeBackground) !important; + color: var(--sapContent_BadgeTextColor) !important; + font-size: var(--sapFontSmallSize); + font-family: var(--sapFontBoldFamily); + font-weight: bold; white-space: nowrap; + flex-shrink: 0; + box-sizing: border-box; + pointer-events: none; + text-shadow: none !important; + align-self: center; } - -.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 79de99b1966dd..98e382cdb9380 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -293,9 +293,9 @@

Badge Scenarios

- - - + + + Custom Action Fired