From 2a31e8d1587a2461099810239364913421708afa Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Fri, 17 Nov 2023 15:54:50 +0200
Subject: [PATCH] fix(ui5-calendar): render the correct length of day names
 (#7866)

fixes: #7831
---
 packages/main/src/DayPicker.ts             | 21 ++++++++++++++++-----
 packages/main/test/specs/DayPicker.spec.js | 16 ++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts
index 0e60f132ce40..81d046b92d3e 100644
--- a/packages/main/src/DayPicker.ts
+++ b/packages/main/src/DayPicker.ts
@@ -340,10 +340,14 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 
 		let dayOfTheWeek;
 
-		const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType);
-		const aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType);
+		const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType) as Array<string>;
+		let aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType) as Array<string>;
 		let dayName;
 
+		if (this.namesTooLong(aDayNamesAbbreviated)) {
+			aDayNamesAbbreviated = localeData.getDays("narrow", this._primaryCalendarType) as Array<string>;
+		}
+
 		this._dayNames = [];
 		this._dayNames.push({
 			classes: "ui5-dp-dayname",
@@ -359,17 +363,24 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 				ultraShortName: aDayNamesAbbreviated[dayOfTheWeek],
 				classes: "ui5-dp-dayname",
 			};
-
 			this._dayNames.push(dayName);
 		}
-
 		this._dayNames[1].classes += " ui5-dp-firstday";
-
 		if (this.shouldHideWeekNumbers) {
 			this._dayNames.shift();
 		}
 	}
 
+	/**
+	 * Tells if any of the days is more than 4 characters(too long to render).
+	 * @param { Array<string> } dayNames
+	 * @returns { boolean }
+	 * @private
+	 */
+	namesTooLong(dayNames: Array<string>): boolean {
+		return dayNames.some(dayName => dayName.length > 3);
+	}
+
 	onAfterRendering() {
 		if (this._autoFocus && !this._hidden) {
 			this.focus();
diff --git a/packages/main/test/specs/DayPicker.spec.js b/packages/main/test/specs/DayPicker.spec.js
index d77e7513826f..91ed16148656 100644
--- a/packages/main/test/specs/DayPicker.spec.js
+++ b/packages/main/test/specs/DayPicker.spec.js
@@ -45,4 +45,20 @@ describe("Day Picker Tests", () => {
 
 		assert.strictEqual(selectedDate, new Date(Date.now() + 24 * 3600 * 1000).getDate(), "Dates are equal");
 	});
+
+	it("Day names are correctly displayed when length is less than 3", async () => {
+		const dayPickerFirstDayName = await browser.$(`#${daypicker._sut}`).shadow$(".ui5-dp-firstday");
+		const dayPickerFirstDayNameText = await dayPickerFirstDayName.getProperty("textContent");
+
+		assert.strictEqual(dayPickerFirstDayNameText, "Sun", "Name is rendered correctly");
+	});
+
+	it("Day names are correctly displayed when length is more than 3", async () => {
+		browser.url(`test/pages/DayPicker.html?sap-ui-language=pt_PT`);
+
+		const dayPickerFirstDayName = await browser.$(`#${daypicker._sut}`).shadow$(".ui5-dp-firstday");
+		const dayPickerFirstDayNameText = await dayPickerFirstDayName.getProperty("textContent");
+
+		assert.strictEqual(dayPickerFirstDayNameText, "D", "Name is rendered correctly");
+	});
 });