Skip to content

fix(ui5-shellbar-item): render overflow badge as inline span after item text #13849

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
plamenivanov91 wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix(ui5-shellbar-item): render overflow badge as inline span after item text #13849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cdce315
fix(ui5-shellbar-item): render overflow badge via additionalText inst…
plamenivanov91 Jul 21, 2026
78bf2bd
fix(ui5-shellbar-item): render overflow badge as inline span after it…
plamenivanov91 Jul 21, 2026
b4e9308
Merge branch 'main' into badge-visual-update-in-shellbar
plamenivanov91 Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions packages/fiori/cypress/specs/ShellBar.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<>
<ShellBarItem id="item-with-badge" icon="accept" text="Item" count="42" in-overflow />
<ShellBarItem id="item-no-badge" icon="alert" text="Other" in-overflow />
</>
);

// 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(
<ShellBarItem id="item-update" icon="accept" text="Item" count="1" in-overflow />
);

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(
<ShellBar id="shellbar-with-overflow"
Expand Down
4 changes: 2 additions & 2 deletions packages/fiori/src/ShellBarItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ export default function ShellBarItemTemplate(this: ShellBarItem) {
<ListItemStandard
icon={this.icon ? `sap-icon://${this.icon}` : ""}
type="Active"
data-count={this.count}
data-ui5-stable={this.stableDomRef}
accessibilityAttributes={this.accessibilityAttributes}
onClick={this.fireClickEvent}
>
{this.text}
<span class="ui5-shellbar-item-text">{this.text}</span>
{this.count && <span class="ui5-shellbar-item-badge">{this.count}</span>}
</ListItemStandard>
);
}
Expand Down
41 changes: 24 additions & 17 deletions packages/fiori/src/themes/ShellBarItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,35 @@
color: var(--sapList_TextColor);
}

[ui5-li]:after {
position: relative;
width: fit-content;
[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;
height: 1rem;
min-width: 1rem;
background: var(--sapContent_BadgeBackground);
border: var(--_ui5_shellbar_button_badge_border);
color: var(--sapContent_BadgeTextColor);
bottom: calc(100% + 0.0625rem);
left: 1.25rem;
padding: 0 0.3125rem;
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
border: var(--_ui5_shellbar_button_badge_border);
background: var(--sapContent_BadgeBackground);
color: var(--sapContent_BadgeTextColor);
font-size: var(--sapFontSmallSize);
font-family: var(--sapFontFamily);
z-index: 2;
font-family: var(--sapFontBoldFamily);
font-weight: bold;
white-space: nowrap;
flex-shrink: 0;
box-sizing: border-box;
pointer-events: none;
}

[ui5-li][data-count]:after {
content: attr(data-count);
}
26 changes: 0 additions & 26 deletions packages/fiori/src/themes/ShellBarPopover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,4 @@

.ui5-shellbar-overflow-popover [ui5-li]::part(title) {
font-size: var(--sapFontSize);
}

.ui5-shellbar-overflow-popover [ui5-li]:after {
position: relative;
width: fit-content;
height: 1rem;
min-width: 1rem;
background: var(--sapContent_BadgeBackground);
border: var(--_ui5_shellbar_button_badge_border);
color: var(--sapContent_BadgeTextColor);
bottom: calc(100% + 0.0625rem);
left: 1.25rem;
padding: 0 0.3125rem;
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--sapFontSmallSize);
font-family: var(--sapFontFamily);
z-index: 2;
box-sizing: border-box;
pointer-events: none;
}

.ui5-shellbar-overflow-popover [ui5-li][data-count]:after {
content: attr(data-count);
}
39 changes: 39 additions & 0 deletions packages/fiori/test/pages/ShellBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,45 @@ <h3>ShellBar in Compact</h3>
<ui5-shellbar-item icon="discussion" count="2" id="test-invalidation-item"></ui5-shellbar-item>
</ui5-shellbar>

<!-- Badge Scenarios (Figma spec) -->

<h3>Badge Scenarios</h3>

<!-- Scenario 1: Single item visible in bar with counter badge -->
<ui5-shellbar id="sb-badge-single" class="shellbar-example">
<ui5-shellbar-branding slot="branding">Badge - Single Visible</ui5-shellbar-branding>
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
<ui5-shellbar-item icon="bell" text="Notifications" count="72"></ui5-shellbar-item>
<ui5-shellbar-item icon="activity-2" text="Work Items" count="5"></ui5-shellbar-item>
<ui5-shellbar-item icon="discussion" text="Messages"></ui5-shellbar-item>
</ui5-shellbar>

<!-- Scenario 2: One badged item overflowed -> overflow button shows counter badge -->
<ui5-shellbar id="sb-badge-overflow-counter" class="shellbar-example" primary-title="SAP Fiori App" secondary-title="Badge Overflow Counter">
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
<ui5-shellbar-item icon="discussion" text="Messages"></ui5-shellbar-item>
<ui5-shellbar-item icon="email" text="Email"></ui5-shellbar-item>
<ui5-shellbar-item icon="bell" text="Notifications" count="72"></ui5-shellbar-item>
</ui5-shellbar>

<!-- Scenario 3: Multiple badged items overflowed -> overflow button shows attention dot -->
<ui5-shellbar id="sb-badge-overflow-attention" class="shellbar-example" primary-title="SAP Fiori App" secondary-title="Badge Attention Dot">
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
<ui5-shellbar-item icon="discussion" text="Messages"></ui5-shellbar-item>
<ui5-shellbar-item icon="bell" text="Notifications" count="72"></ui5-shellbar-item>
<ui5-shellbar-item icon="activity-2" text="Work Items" count="5"></ui5-shellbar-item>
</ui5-shellbar>

<ui5-toast id="wcToastTC">Custom Action Fired</ui5-toast>

<ui5-shellbar id="sbAcc">
Expand Down
Loading