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", () => { 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..bafb0c83e18db 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-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 4a57dfc27dfc3..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 @@ -2,4 +2,8 @@ :root { --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); + /* Badge position adjustment for shorter shellbar height in Quartz theme */ + --_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 2b7f59953cb96..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 @@ -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-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 2b7f59953cb96..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 @@ -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-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 cba6710bbb893..d1a000e217cc9 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-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 cba6710bbb893..d1a000e217cc9 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-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 fbbeecbee1740..6e552c720e54b 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-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 fbbeecbee1740..6e552c720e54b 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-shellbar-badge-offset: 0.25rem; + --_ui5-shellbar-badge-margin: -0.375rem; + --_ui5-shellbar-notification-btn-count-offset: 0; } \ No newline at end of file