fix(ui5-calendar): render the correct length of day names (#7866)

fixes: #7831
SAP · Nov 17, 2023 · 2a31e8d · 2a31e8d
1 parent 334ed68
commit 2a31e8d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git 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
@@ -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");
+	});
 });