fix(ui5-date-picker): hiding month button when month picker is shown (#2331)

Related to: #2244

Author: tsanislavgatev

packages/main/src/Calendar.hbs

@@ -15,6 +15,7 @@
 		@ui5-show-year-press="{{_header.onBtn2Press}}"
 		._isNextButtonDisabled="{{_header._isNextButtonDisabled}}"
 		._isPrevButtonDisabled="{{_header._isPrevButtonDisabled}}"
+		._isMonthButtonHidden="{{_header._isMonthButtonHidden}}"
 	></ui5-calendar-header>
 
 	<div id="{{_id}}-content">

packages/main/src/Calendar.js

@@ -486,6 +486,7 @@ class Calendar extends UI5Element {
 
 	_handleMonthButtonPress() {
 		this._hideYearPicker();
+		this._header._isMonthButtonHidden = true;
 
 		this[`_${this._monthPicker._hidden ? "show" : "hide"}MonthPicker`]();
 	}
@@ -674,6 +675,7 @@ class Calendar extends UI5Element {
 
 		this._calendarWidth = calendarRect.width.toString();
 		this._calendarHeight = calendarRect.height.toString();
+		this._header._isMonthButtonHidden = true;
 	}
 
 	_showYearPicker() {
@@ -699,6 +701,7 @@ class Calendar extends UI5Element {
 			this._oMonth._hidden = false;
 		}
 		this._monthPicker._hidden = true;
+		this._header._isMonthButtonHidden = false;
 	}
 
 	_hideYearPicker() {

packages/main/src/CalendarHeader.hbs

@@ -24,6 +24,7 @@
 		<div
 			id="{{_id}}-btn1"
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+			?hidden="{{_isMonthButtonHidden}}"
 			type="{{_btn1.type}}"
 			tabindex="0"
 			@click={{_showMonthPicker}}

packages/main/src/CalendarHeader.js

@@ -43,6 +43,9 @@ const metadata = {
 		_isPrevButtonDisabled: {
 			type: Boolean,
 		},
+		_isMonthButtonHidden: {
+			type: Boolean,
+		},
 	},
 	events: {
 		"previous-press": {},

packages/main/src/themes/CalendarHeader.css

@@ -39,6 +39,10 @@
 	color: var(--sapButton_TextColor);
 }
 
+[hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn {
+	display: none;
+}
+
 .ui5-calheader-arrowbtn:focus {
 	outline: none;
 }
@@ -57,6 +61,7 @@
 .ui5-calheader-middlebtn {
 	border: var(--_ui5_calendar_header_arrow_button_border);
 	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
+	display:flex;
 }
 
 .ui5-calheader-arrowicon {

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

@@ -143,4 +143,13 @@ describe("Calendar general interaction", () => {
 
 		assert.deepEqual(new Date(calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 9, 1, 0, 0, 0)));
 	});
+
+	it("When month picker is shown the month button is hidden", () => {
+		const calendarHeader = browser.$("#calendar1").shadow$("ui5-calendar-header");
+
+		browser.keys(["F4"]);
+		browser.keys('PageUp');
+
+		assert.ok(calendarHeader.shadow$(".ui5-calheader-middlebtn").getAttribute("hidden"), "The button for month is hidden");
+	});
 });