fix(ui5-shellbar): fix badge misplacement of the ShellBar (2.15)

packages/base/src/asset-registries/LocaleData.ts

@@ -150,7 +150,9 @@ const registerLocaleDataLoader = (localeId: string, loader: LocaleDataLoader) =>
 
 // register default loader for "en" from ui5 CDN (dev workflow without assets)
 registerLocaleDataLoader("en", async () => {
-	const cldrContent = await fetch(`https://sdk.openui5.org/1.120.17/resources/sap/ui/core/cldr/en.json`);
+	console.warn(`[LocaleData] Falling back to loading "en" locale data from CDN.`, /* eslint-disable-line */
+		`For production usage, please configure locale data loading via the "Assets.js" module of the webcomponents package you are using.`); /* eslint-disable-line */
+	const cldrContent = await fetch(`https://cdn.jsdelivr.net/npm/@openui5/sap.ui.core@1.120.17/src/sap/ui/core/cldr/en.json`);
 	return cldrContent.json() as Promise<CLDRData>;
 });
 

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(
+			<ShellBar id="shellbar-badge-bounds"
+				primaryTitle="Product Title"
+				showNotifications={true}
+				notificationsCount="99+">
+				<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+				<ShellBarItem id="badged-item" icon="accept" text="Item" count="42" />
+			</ShellBar>
+		);
+
+		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", () => {

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 {

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

packages/main/cypress/specs/DatePicker.cy.tsx

@@ -868,10 +868,12 @@ describe("Date Picker Tests", () => {
 	it("placeholder, based on the formatPattern", () => {
 		cy.mount(<DatePicker formatPattern="MMM d, y"></DatePicker>);
 
+		const currentYear = new Date().getFullYear();
+
 		cy.get("[ui5-date-picker]")
 			.as("datePicker")
 			.ui5DatePickerGetInnerInput()
-			.should("have.attr", "placeholder", "e.g. Dec 31, 2025");
+			.should("have.attr", "placeholder", `e.g. Dec 31, ${currentYear}`);
 
 		cy.get<DatePicker>("@datePicker")
 			.should("not.have.attr", "placeholder");