fix(ui5-shellbar): fix badge misplacement of the ShellBar (2.15)#13864
Open
dobrinyonkov wants to merge 3 commits into
Open
fix(ui5-shellbar): fix badge misplacement of the ShellBar (2.15)#13864dobrinyonkov wants to merge 3 commits into
dobrinyonkov wants to merge 3 commits into
Conversation
Downport of #13212 adapted to the 2.15 ShellBar structure. A plain cherry-pick was not possible: the fix's selector (`.ui5-shellbar-action-button > [ui5-button-badge]…`) and its host file `packages/fiori/src/themes/ShellBarItem.css` do not exist in 2.15 — the ShellBar was refactored between 2.15 and the fix's era. The 2.15 badge is positioned via `.ui5-shellbar-bell-button [slot="badge"]` and `.ui5-shellbar-custom-item [slot="badge"]` in `ShellBar.css`. Changes: - `ShellBar.css`: add a `top` / `margin` override for the OverlayText badge on the bell button and the custom action items, driven by two new theme vars with Button-default fallbacks (`top: 0`, `margin: -0.5rem`) so themes without an override keep existing behavior. Also add a `0` fallback to the pre-existing `inset-inline-end` rules whose var was undefined. - 4× sap_fiori_3* `ShellBar-parameters.css`: define the badge offset, margin and notification-btn-count-offset, matching #13212's values (`0.25rem` / `-0.25rem`; `-0.375rem` for hcb/hcw; count-offset `0`). - 4× sap_horizon* `ShellBar-parameters.css`: same override applied — on 2.15 the horizon shellbar exhibits the same misplacement (the badge sits outside the shellbar bounds with Button defaults), contrary to what issue #12962 reported for later versions. Same values as fiori_3. Note on var names: the badge vars are authored with the v215-prefix (`--_ui5-v2-15-5-shellbar-badge-*`) rather than plain names. This is unusual — every other authored var in this package uses the plain form — but `packages/fiori`'s theme parameter bundle does NOT apply the version-prefix scoping pass that `packages/fiori`'s component CSS DOES apply. Without the explicit prefix here, the compiled `ShellBar.css` rule (which references the prefixed name) would not resolve the var and fall back to Button defaults. Version-bound to 2.15.5, which is acceptable for this frozen release. Verified on all 8 themes at localhost:8080/…/ShellBarBadgeRepro.html with `?sap-ui-theme=<theme>`: sap_horizon, sap_horizon_dark, sap_horizon_hcb, sap_horizon_hcw, sap_fiori_3, sap_fiori_3_dark, sap_fiori_3_hcb, sap_fiori_3_hcw. In each theme the notification-count badge and custom-item count badge render fully inside the shellbar bounds. Fixes: #12962 Refs: #13212
…oping Revert the badge params from `--_ui5-v2-15-5-shellbar-badge-*` back to `--_ui5-shellbar-badge-*`. The v215 version prefix is applied by the framework's `scopeVariables` build step (packages/tools/lib/ css-processors/scope-variables.mjs) — hand-authoring the prefixed form was unnecessary and would produce doubly-prefixed names in production. No functional change from the previous commit: after the framework's scoping pass the compiled output is identical. Only the authored source is now consistent with every other var in the package (plain names).
…shellbar bounds Guards against #12962: the OverlayText badge on the bell button and on custom ShellBar items must sit inside the shellbar's vertical bounds (no clipping at the top edge). Verifies both anchors that the fix targets: .ui5-shellbar-bell-button and .ui5-shellbar-custom-item.
PetyaMarkovaBogdanova
self-requested a review
July 24, 2026 12:31
PetyaMarkovaBogdanova
approved these changes
Jul 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Downport of #13212 to
release-2.15.5.Straight cherry-pick doesn't apply — the fix's selector
.ui5-shellbar-action-button > [ui5-button-badge]…andShellBarItem.cssdon't exist in 2.15. Reimplemented against 2.15's actual selectors (.ui5-shellbar-bell-button/.ui5-shellbar-custom-item) inShellBar.css; badge offset / margin / notification-count-offset defined per theme.Scope expanded to
sap_horizon*variants — on 2.15 they exhibit the same misplacement, not justsap_fiori_3*.Verified all 8 themes render the badge inside the shellbar bounds.
Fixes: #12962