From d778cb2d0a0eaf14301fe1f0821fb40ca3e833bc Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Wed, 30 Apr 2025 16:19:40 +0300
Subject: [PATCH 1/3] fix(ui5-calendar): show year range in YearPicker header

---
 packages/main/src/Calendar.ts                |  9 +++++++++
 packages/main/src/CalendarHeaderTemplate.tsx |  8 ++++++--
 packages/main/src/YearPickerTemplate.tsx     |  2 +-
 packages/main/src/themes/CalendarHeader.css  | 21 +++++++++++++++++++-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index 7028f9313a37..d1f198babc56 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -601,6 +601,15 @@ class Calendar extends CalendarPart {
 	 * @private
 	 */
 	get _isHeaderYearButtonHidden(): boolean {
+		return false;
+	}
+
+	/**
+	 * The year button is non-interactive when the year picker is shown
+	 * Note: This will be removed with the introduction of the YearRangePicker
+	 * @private
+	 */
+	get _isHeaderYearButtonDisabled(): boolean {
 		return this._currentPicker === "year";
 	}
 
diff --git a/packages/main/src/CalendarHeaderTemplate.tsx b/packages/main/src/CalendarHeaderTemplate.tsx
index 8156cba121e0..c2f436b834a1 100644
--- a/packages/main/src/CalendarHeaderTemplate.tsx
+++ b/packages/main/src/CalendarHeaderTemplate.tsx
@@ -40,9 +40,13 @@ export default function CalendarTemplate(this: Calendar) {
 
 				<div
 					data-ui5-cal-header-btn-year
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					class={{
+						"ui5-calheader-arrowbtn": true,
+						"ui5-calheader-middlebtn": true,
+						"ui5-calheader-yearbtn-disabled": this._isHeaderYearButtonDisabled,
+					}}
 					hidden={this._isHeaderYearButtonHidden}
-					tabindex={0}
+					tabindex={this._isHeaderYearButtonDisabled ? -1 : 0}
 					role="button"
 					onClick={this.onHeaderShowYearPress}
 					onKeyDown={this.onYearButtonKeyDown}
diff --git a/packages/main/src/YearPickerTemplate.tsx b/packages/main/src/YearPickerTemplate.tsx
index 7545b8a9cc38..73e265fed0d2 100644
--- a/packages/main/src/YearPickerTemplate.tsx
+++ b/packages/main/src/YearPickerTemplate.tsx
@@ -30,7 +30,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 						</span>
 						{
 							year.yearInSecType &&
-							<span class="ui5-yp-year-sec-type">
+							<span class="ui5-yp-item-sec-type">
 								{year.yearInSecType}
 							</span>
 						}
diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
index 98c8d7ce5dbc..053794475c17 100644
--- a/packages/main/src/themes/CalendarHeader.css
+++ b/packages/main/src/themes/CalendarHeader.css
@@ -26,6 +26,25 @@
 	user-select: none;
 }
 
+/* Todo: Remove with introduction of YearRangePicker */
+.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:hover,
+.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:active,
+.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:focus,
+.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:focus:active,
+.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled {
+	cursor: default;
+	outline: none;
+	background-color: var(--sapButton_Lite_Background);
+	color: var(--sapButton_Lite_TextColor);
+	border: transparent;
+	box-shadow: none;
+}
+
+/* Todo: Remove with introduction of YearRangePicker */
+.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:active .ui5-calheader-btn-sectext {
+	color: var(--sapNeutralElementColor);
+}
+
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:active,
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:focus,
@@ -35,6 +54,7 @@
 	outline: none;
 	background-color: var(--sapButton_Lite_Background);
 	color: var(--sapButton_Lite_TextColor);
+	box-shadow: none;
 }
 
 [hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn {
@@ -73,7 +93,6 @@
 
 .ui5-calheader-arrowbtn:not(:active) .ui5-calheader-btn-sectext {
 	color: var(--sapNeutralElementColor);
-	font-size: var(--sapFontSmallSize);
 }
 
 .ui5-calheader-arrowicon {

From e625abb531b02733e36feab12550242dffe31caf Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Wed, 30 Apr 2025 16:30:50 +0300
Subject: [PATCH 2/3] fix: bring back box shadow

---
 packages/main/src/themes/CalendarHeader.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
index 053794475c17..e44a39f6677b 100644
--- a/packages/main/src/themes/CalendarHeader.css
+++ b/packages/main/src/themes/CalendarHeader.css
@@ -54,7 +54,6 @@
 	outline: none;
 	background-color: var(--sapButton_Lite_Background);
 	color: var(--sapButton_Lite_TextColor);
-	box-shadow: none;
 }
 
 [hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn {

From 2d043e5b85a401aa22e76169cd318f01efbc2ee6 Mon Sep 17 00:00:00 2001
From: Diana Petcheva <diana.petcheva@sap.com>
Date: Wed, 30 Apr 2025 18:28:49 +0300
Subject: [PATCH 3/3] chore: separate year range button from year button

---
 packages/main/src/Calendar.ts                | 29 +++++++++++---------
 packages/main/src/CalendarHeaderTemplate.tsx | 20 ++++++++++----
 packages/main/src/themes/CalendarHeader.css  | 12 ++++----
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index d1f198babc56..9758b37bbc3b 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -265,6 +265,12 @@ class Calendar extends CalendarPart {
 	@property()
 	_headerYearButtonTextSecType?: string;
 
+	@property()
+	_headerYearRangeButtonText?: string;
+
+	@property()
+	_headerYearRangeButtonTextSecType?: string;
+
 	@property({ noAttribute: true })
 	_pickersMode: `${CalendarPickersMode}` = "DAY_MONTH_YEAR";
 
@@ -477,6 +483,7 @@ class Calendar extends CalendarPart {
 		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
 		const localeData = getCachedLocaleDataInstance(getLocale());
 		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+		this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
@@ -484,9 +491,7 @@ class Calendar extends CalendarPart {
 			rangeStart.setYear(this._currentPickerDOM._firstYear!);
 			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
 
-			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
-		} else {
-			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+			this._headerYearRangeButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
 		}
 
 		this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
@@ -553,6 +558,7 @@ class Calendar extends CalendarPart {
 
 	_setSecondaryCalendarTypeButtonText() {
 		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+		this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
@@ -564,9 +570,7 @@ class Calendar extends CalendarPart {
 				.firstDate;
 			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
 				.lastDate;
-			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
-		} else {
-			this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+			this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
 		}
 	}
 
@@ -597,20 +601,19 @@ class Calendar extends CalendarPart {
 	}
 
 	/**
-	 * The year button is hidden when the year picker is shown
+	 * The year range button is shown only in the year picker
 	 * @private
 	 */
-	get _isHeaderYearButtonHidden(): boolean {
-		return false;
+	get _isHeaderYearRangeButtonHidden(): boolean {
+		return this._currentPicker !== "year";
 	}
 
 	/**
-	 * The year button is non-interactive when the year picker is shown
-	 * Note: This will be removed with the introduction of the YearRangePicker
+	 * The year button is shown only in the day & month pickers
 	 * @private
 	 */
-	get _isHeaderYearButtonDisabled(): boolean {
-		return this._currentPicker === "year";
+	get _isHeaderYearButtonHidden(): boolean {
+		return !(this._currentPicker === "day" || this._currentPicker === "month");
 	}
 
 	get _isDayPickerHidden() {
diff --git a/packages/main/src/CalendarHeaderTemplate.tsx b/packages/main/src/CalendarHeaderTemplate.tsx
index c2f436b834a1..edf426ef1759 100644
--- a/packages/main/src/CalendarHeaderTemplate.tsx
+++ b/packages/main/src/CalendarHeaderTemplate.tsx
@@ -40,13 +40,9 @@ export default function CalendarTemplate(this: Calendar) {
 
 				<div
 					data-ui5-cal-header-btn-year
-					class={{
-						"ui5-calheader-arrowbtn": true,
-						"ui5-calheader-middlebtn": true,
-						"ui5-calheader-yearbtn-disabled": this._isHeaderYearButtonDisabled,
-					}}
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 					hidden={this._isHeaderYearButtonHidden}
-					tabindex={this._isHeaderYearButtonDisabled ? -1 : 0}
+					tabindex={0}
 					role="button"
 					onClick={this.onHeaderShowYearPress}
 					onKeyDown={this.onYearButtonKeyDown}
@@ -57,6 +53,18 @@ export default function CalendarTemplate(this: Calendar) {
 						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
 					}
 				</div>
+
+				<div
+					data-ui5-cal-header-btn-year-range
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn ui5-calheader-yearrange-btn-disabled"
+					hidden={this._isHeaderYearRangeButtonHidden}
+					tabindex={-1}
+				>
+					<span>{this._headerYearRangeButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+					}
+				</div>
 			</div>
 
 			<div
diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
index e44a39f6677b..9e2e3f5c8880 100644
--- a/packages/main/src/themes/CalendarHeader.css
+++ b/packages/main/src/themes/CalendarHeader.css
@@ -27,11 +27,11 @@
 }
 
 /* Todo: Remove with introduction of YearRangePicker */
-.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:hover,
-.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:active,
-.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:focus,
-.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:focus:active,
-.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled {
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:hover,
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active,
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:focus,
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:focus:active,
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled {
 	cursor: default;
 	outline: none;
 	background-color: var(--sapButton_Lite_Background);
@@ -41,7 +41,7 @@
 }
 
 /* Todo: Remove with introduction of YearRangePicker */
-.ui5-calheader-middlebtn.ui5-calheader-yearbtn-disabled:active .ui5-calheader-btn-sectext {
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active .ui5-calheader-btn-sectext {
 	color: var(--sapNeutralElementColor);
 }