Skip to content

fix(ui5-shellbar-item): render overflow badge via additionalText with text wrapping #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 5 commits into
base: main
Choose a base branch
from
Draft

fix(ui5-shellbar-item): render overflow badge via additionalText with text wrapping #13849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 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
be5429b
Merge branch 'main' into badge-visual-update-in-shellbar
plamenivanov91 Jul 28, 2026
22b907b
fix(ui5-shellbar-item): render overflow badge via additionalText with…
plamenivanov91 Jul 28, 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
39 changes: 39 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 @@ -1425,6 +1425,45 @@ describe("ButtonBadge in ShellBar", () => {
.should("have.attr", "text", "3");
});

it("Test if overflow list item renders badge 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: additionalText on the ListItemStandard carries the badge value
cy.get("#item-with-badge")
.shadow()
.find("[ui5-li]")
.should("have.attr", "additional-text", "42");

// Item without count: no additionalText attribute
cy.get("#item-no-badge")
.shadow()
.find("[ui5-li]")
.should("not.have.attr", "additional-text");
});

it("Test count updates propagate to overflow badge", () => {
cy.mount(
<ShellBarItem id="item-update" icon="accept" text="Item" count="1" in-overflow />
);

cy.get("#item-update")
.shadow()
.find("[ui5-li]")
.should("have.attr", "additional-text", "1");

cy.get("#item-update").invoke("attr", "count", "99+");

cy.get("#item-update")
.shadow()
.find("[ui5-li]")
.should("have.attr", "additional-text", "99+");
});

it("Test if overflow button shows appropriate badge when items are overflowed", () => {
cy.mount(
<ShellBar id="shellbar-with-overflow"
Expand Down
8 changes: 4 additions & 4 deletions packages/fiori/src/ShellBarItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export default function ShellBarItemTemplate(this: ShellBarItem) {
<ListItemStandard
icon={this.icon ? `sap-icon://${this.icon}` : ""}
type="Active"
data-count={this.count}
text={this.text}
wrappingType="Normal"
additionalText={this.count}
data-ui5-stable={this.stableDomRef}
accessibilityAttributes={this.accessibilityAttributes}
onClick={this.fireClickEvent}
>
{this.text}
</ListItemStandard>
/>
);
}

Expand Down
47 changes: 31 additions & 16 deletions packages/fiori/src/themes/ShellBarItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,45 @@

[ui5-li]::part(icon) {
color: var(--sapList_TextColor);
align-self: center;
}

[ui5-li]:after {
position: relative;
width: fit-content;
[ui5-li]::part(additional-text) {
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) !important;
color: var(--sapContent_BadgeTextColor) !important;
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;
text-shadow: none !important;
align-self: center;
}

[ui5-li][data-count]:after {
content: attr(data-count);
display: inline-flex;
align-items: center;
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);
color: var(--sapContent_BadgeTextColor);
font-size: var(--sapFontSmallSize);
font-family: var(--sapFontBoldFamily);
font-weight: bold;
white-space: nowrap;
flex-shrink: 0;
box-sizing: border-box;
pointer-events: none;
}
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" count="33" text="Messages"></ui5-shellbar-item>
<ui5-shellbar-item icon="bell" text="Notifications dasdasd dsd. wdwad sadsa dsd" count="72"></ui5-shellbar-item>
<ui5-shellbar-item icon="activity-2" text="Work Items dasdsa dassd adsadasd " count="5"></ui5-shellbar-item>
</ui5-shellbar>

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

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