fix(ui5-calendar): adjust year button visibility (#9328)

Fixes: #9107

packages/main/src/Calendar.hbs

@@ -62,6 +62,7 @@
 			.isPrevButtonDisabled="{{_previousButtonDisabled}}"
 			.isNextButtonDisabled="{{_nextButtonDisabled}}"
 			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
+			.isYearButtonHidden="{{_isHeaderYearButtonHidden}}"
 			._monthButtonText="{{_headerMonthButtonText}}"
 			._yearButtonText="{{_headerYearButtonText}}"
 			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"

packages/main/src/Calendar.ts

@@ -505,6 +505,14 @@ class Calendar extends CalendarPart {
 		return this._currentPicker === "month" || this._currentPicker === "year";
 	}
 
+	/**
+	 * The year button is hidden when the year picker is shown
+	 * @private
+	 */
+	get _isHeaderYearButtonHidden(): boolean {
+		return this._currentPicker === "year";
+	}
+
 	get _isDayPickerHidden() {
 		return this._currentPicker !== "day";
 	}

packages/main/test/specs/Calendar.spec.js

@@ -431,4 +431,16 @@ describe("Calendar general interaction", () => {
 
 		assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused");
 	});
+
+	it("Calendar header buttons visibility", async  () => {
+		const calendarHeader = await browser.$("#calendar1").shadow$("ui5-calendar-header");
+		const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`);
+		const yearButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-year]`);
+
+		await monthButton.click();
+		assert.ok(monthButton.hasAttribute("hidden"), "The month button is hidden");
+
+		await yearButton.click();
+		assert.ok(yearButton.hasAttribute("hidden"), "The year button is hidden");
+	});
 });