fix(ui5-shellbar): Fix badge misplacement of the ShellBar (#13212)

plamenivanov91 · web-flow · commit c9e326f0ffc7 · 2026-03-13T12:46:25.000+02:00
Add Quartz theme parameters for badge offset and margin to keep correct placement in sap_fiori_3 variants, including HCB and HCW. Preserve default badge behavior in other themes with fallback values. Fixes: #12962
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -246,6 +246,11 @@ of the search field container in the bar even when the search is in full mode. *
 	box-sizing: border-box;
 }
 
+.ui5-shellbar-action-button > [ui5-button-badge][slot="badge"][design="OverlayText"] {
+	top: var(--_ui5-shellbar-badge-offset, 0);
+	margin: var(--_ui5-shellbar-badge-margin, -0.5rem);
+}
+
 .ui5-shellbar-image-button {
 	display: flex;
 	justify-content: center;
diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css
@@ -16,6 +16,11 @@
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
+.ui5-shellbar-action-button > [ui5-button-badge][slot="badge"][design="OverlayText"] {
+	top: var(--_ui5-shellbar-badge-offset, 0);
+	margin: var(--_ui5-shellbar-badge-margin, -0.5rem);
+}
+
 [ui5-li]:after {
 	position: relative;
 	width: fit-content;
diff --git 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,7 @@
 
 :host {
 	--_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;
 }
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
@@ -2,4 +2,7 @@
 
 :host {
 	--_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;
 }
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
@@ -2,4 +2,7 @@
 
 :host {
 	--_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;
 }
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
@@ -2,4 +2,7 @@
 
 :host {
 	--_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;
 }

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,7 @@`
`2`	`2`
`3`	`3`	`:host {`
`4`	`4`	`--_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor);`
	`5`	`+ /* Badge position adjustment for shorter shellbar height in Quartz theme */`
	`6`	`+ --_ui5-shellbar-badge-offset: 0.25rem;`
	`7`	`+ --_ui5-shellbar-badge-margin: -0.25rem;`
`5`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,7 @@`
`2`	`2`
`3`	`3`	`:host {`
`4`	`4`	`--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);`
	`5`	`+ /* Badge position adjustment for shorter shellbar height in Quartz theme */`
	`6`	`+ --_ui5-shellbar-badge-offset: 0.25rem;`
	`7`	`+ --_ui5-shellbar-badge-margin: -0.25rem;`
`5`	`8`	`}`