From 5c51e3f88f724ff8d4bbaaee70547fb5d9a0b03c Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Fri, 24 Jul 2026 13:18:29 +0300 Subject: [PATCH 1/3] fix(ui5-shellbar): fix badge misplacement of the ShellBar (2.15) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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=`: 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 --- packages/fiori/src/themes/ShellBar.css | 10 ++++++++-- .../src/themes/sap_fiori_3/ShellBar-parameters.css | 4 ++++ .../themes/sap_fiori_3_dark/ShellBar-parameters.css | 4 ++++ .../src/themes/sap_fiori_3_hcb/ShellBar-parameters.css | 4 ++++ .../src/themes/sap_fiori_3_hcw/ShellBar-parameters.css | 4 ++++ .../src/themes/sap_horizon/ShellBar-parameters.css | 4 ++++ .../themes/sap_horizon_dark/ShellBar-parameters.css | 4 ++++ .../src/themes/sap_horizon_hcb/ShellBar-parameters.css | 4 ++++ .../src/themes/sap_horizon_hcw/ShellBar-parameters.css | 4 ++++ 9 files changed, 40 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index a4caa837e630d..b2f882688b472 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -406,11 +406,17 @@ slot[name="profile"] { } .ui5-shellbar-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"] { - inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset); + inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset, 0); } .ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"] { - inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset); + inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset, 0); +} + +.ui5-shellbar-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"][design="OverlayText"], +.ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"][design="OverlayText"] { + top: var(--_ui5-shellbar-badge-offset, 0); + margin: var(--_ui5-shellbar-badge-margin, -0.5rem); } .ui5-shellbar-menu-button { diff --git a/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css index 561b4b08c44ad..5a635fe025c7b 100644 --- a/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css @@ -2,4 +2,8 @@ :root { --_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); + /* Badge position adjustment for shorter shellbar height in Quartz theme */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css index 4a57dfc27dfc3..5f5647a43143b 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css @@ -2,4 +2,8 @@ :root { --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); + /* Badge position adjustment for shorter shellbar height in Quartz theme */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css index 2b7f59953cb96..6868ca21e3589 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css @@ -2,4 +2,8 @@ :root { --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); + /* Badge position adjustment for shorter shellbar height in Quartz theme */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css index 2b7f59953cb96..6868ca21e3589 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css @@ -2,4 +2,8 @@ :root { --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); + /* Badge position adjustment for shorter shellbar height in Quartz theme */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css index cba6710bbb893..070a1cccf3db3 100644 --- a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css @@ -27,4 +27,8 @@ --_ui5_shellbar_input_border_radius: 1.125rem; --_ui5_shellbar_input_focus_border_radius: 1.125rem; --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground); + /* Notification/count badge position adjustment for the OverlayText badge */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css index cba6710bbb893..070a1cccf3db3 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css @@ -27,4 +27,8 @@ --_ui5_shellbar_input_border_radius: 1.125rem; --_ui5_shellbar_input_focus_border_radius: 1.125rem; --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground); + /* Notification/count badge position adjustment for the OverlayText badge */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css index fbbeecbee1740..ae863ca30ab8c 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css @@ -11,4 +11,8 @@ --_ui5_shellbar_search_field_background_hover: var(--sapShellColor); --_ui5_shellbar_search_field_box_shadow_hover: none; --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); + /* Notification/count badge position adjustment for the OverlayText badge */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css index fbbeecbee1740..ae863ca30ab8c 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css @@ -11,4 +11,8 @@ --_ui5_shellbar_search_field_background_hover: var(--sapShellColor); --_ui5_shellbar_search_field_box_shadow_hover: none; --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); + /* Notification/count badge position adjustment for the OverlayText badge */ + --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; + --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; + --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file From a014c40a97fb05ce982bbeba202c21ef66dd0341 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Fri, 24 Jul 2026 13:35:00 +0300 Subject: [PATCH 2/3] =?UTF-8?q?fix(ui5-shellbar):=20use=20plain=20var=20na?= =?UTF-8?q?mes=20=E2=80=94=20framework=20handles=20version=20scoping?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- .../fiori/src/themes/sap_fiori_3/ShellBar-parameters.css | 6 +++--- .../src/themes/sap_fiori_3_dark/ShellBar-parameters.css | 6 +++--- .../src/themes/sap_fiori_3_hcb/ShellBar-parameters.css | 6 +++--- .../src/themes/sap_fiori_3_hcw/ShellBar-parameters.css | 6 +++--- .../fiori/src/themes/sap_horizon/ShellBar-parameters.css | 6 +++--- .../src/themes/sap_horizon_dark/ShellBar-parameters.css | 6 +++--- .../src/themes/sap_horizon_hcb/ShellBar-parameters.css | 6 +++--- .../src/themes/sap_horizon_hcw/ShellBar-parameters.css | 6 +++--- 8 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css index 5a635fe025c7b..bafb0c83e18db 100644 --- a/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3/ShellBar-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); /* Badge position adjustment for shorter shellbar height in Quartz theme */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.25rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css index 5f5647a43143b..fd8baab1ae192 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/ShellBar-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); /* Badge position adjustment for shorter shellbar height in Quartz theme */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.25rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css index 6868ca21e3589..8b747a4e7c261 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); /* Badge position adjustment for shorter shellbar height in Quartz theme */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.375rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css index 6868ca21e3589..8b747a4e7c261 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); /* Badge position adjustment for shorter shellbar height in Quartz theme */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.375rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css index 070a1cccf3db3..d1a000e217cc9 100644 --- a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css @@ -28,7 +28,7 @@ --_ui5_shellbar_input_focus_border_radius: 1.125rem; --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground); /* Notification/count badge position adjustment for the OverlayText badge */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.25rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css index 070a1cccf3db3..d1a000e217cc9 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css @@ -28,7 +28,7 @@ --_ui5_shellbar_input_focus_border_radius: 1.125rem; --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground); /* Notification/count badge position adjustment for the OverlayText badge */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.25rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.25rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css index ae863ca30ab8c..6e552c720e54b 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css @@ -12,7 +12,7 @@ --_ui5_shellbar_search_field_box_shadow_hover: none; --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); /* Notification/count badge position adjustment for the OverlayText badge */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.375rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css index ae863ca30ab8c..6e552c720e54b 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css @@ -12,7 +12,7 @@ --_ui5_shellbar_search_field_box_shadow_hover: none; --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); /* Notification/count badge position adjustment for the OverlayText badge */ - --_ui5-v2-15-5-shellbar-badge-offset: 0.25rem; - --_ui5-v2-15-5-shellbar-badge-margin: -0.375rem; - --_ui5-v2-15-5-shellbar-notification-btn-count-offset: 0; + --_ui5-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.375rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file From 96038fa17b005e5d2a90b864c00118f72969341f Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Fri, 24 Jul 2026 14:04:30 +0300 Subject: [PATCH 3/3] test(ui5-shellbar): assert notification and count badges stay within 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. --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 34 ++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index a9bd3011a3045..969f1b8a64bf5 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -1189,6 +1189,40 @@ describe("ButtonBadge in ShellBar", () => { .should("exist") .should("have.attr", "text", "42"); }); + + it("Notification badge and custom-item count badge stay within the ShellBar bounds (#12962)", () => { + cy.mount( + + + + + ); + + cy.get("#shellbar-badge-bounds").then($sb => { + const sbRect = $sb[0].getBoundingClientRect(); + + cy.get("#shellbar-badge-bounds") + .shadow() + .find(".ui5-shellbar-bell-button ui5-button-badge[slot='badge']") + .then($badge => { + const bRect = $badge[0].getBoundingClientRect(); + expect(bRect.top, "bell badge top >= shellbar top").to.be.at.least(sbRect.top); + expect(bRect.bottom, "bell badge bottom <= shellbar bottom").to.be.at.most(sbRect.bottom); + }); + + cy.get("#shellbar-badge-bounds") + .shadow() + .find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']") + .then($badge => { + const bRect = $badge[0].getBoundingClientRect(); + expect(bRect.top, "custom-item badge top >= shellbar top").to.be.at.least(sbRect.top); + expect(bRect.bottom, "custom-item badge bottom <= shellbar bottom").to.be.at.most(sbRect.bottom); + }); + }); + }); }); describe("Keyboard Navigation", () => {