fix(ui5-time-picker): show header on mobile (#12768)

fixes: #12695

Author: tsanislavgatev

packages/main/cypress/specs/TimePicker.mobile.cy.tsx

@@ -125,6 +125,16 @@ describe("TimePicker on phone - general interactions", () => {
 			.ui5TimePickerGetClock("seconds")
 			.should("have.prop", "valueNow", 13);
 
+		cy.get<TimePicker>("@timePicker")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.find("[ui5-time-selection-clocks]")
+			.shadow()
+			.find("[ui5-toggle-spin-button]")
+			.first()
+			.realClick()
+			.should("be.focused");
+
 		cy.realType("092233");
 
 		cy.get<TimePicker>("@timePicker")

packages/main/src/TimePicker.ts

@@ -61,6 +61,7 @@ import {
 	TIMEPICKER_PATTERN_MISSMATCH,
 	TIMEPICKER_OPEN_ICON_TITLE_OPENED,
 	TIMEPICKER_OPEN_ICON_TITLE,
+	INPUT_SUGGESTIONS_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -834,6 +835,22 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		return this.valueStateMessage.length > 0 && !this.open && !this._isMobileDevice;
 	}
 
+	get _headerTitleText() {
+		return this.ariaLabelText || TimePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+	}
+
+	get showHeader() {
+		return isPhone();
+	}
+
+	/**
+	 * Defines whether the dialog on mobile should have header
+	 * @private
+	 */
+	get _shouldHideHeader() {
+		return !this.showHeader && !this.hasValueStateText;
+	}
+
 	/**
 	 * @protected
 	 */

packages/main/src/TimePickerPopoverTemplate.tsx

@@ -5,6 +5,7 @@ import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
 import alert from "@ui5/webcomponents-icons/dist/alert.js";
@@ -22,7 +23,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={!this.hasValueStateText}
+				_hideHeader={this._shouldHideHeader}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
@@ -31,6 +32,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{ !!this.showHeader && defaultHeader.call(this) }
+
 				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
 
 				<TimeSelectionClocks
@@ -61,7 +64,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
-					{ this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+					{ this.hasValueStateText && valueStateTextHeader.call(this) }
 
 					<div class="popover-content">
 						<TimeSelectionInputs
@@ -83,20 +86,37 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 	);
 }
 
+function defaultHeader(this: TimePicker) {
+	return (
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{this._headerTitleText}</span>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					icon={decline}
+					design="Transparent"
+					onClick={this._togglePicker}
+				>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
 function valueStateMessage(this: TimePicker) {
 	return (
 		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
 	);
 }
 
-function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+function valueStateTextHeader(this: TimePicker) {
 	if (!this.hasValueStateText) {
 		return;
 	}
 
 	return (
 		<div
-			slot="header"
+			slot={!this.showHeader ? "header" : undefined}
 			class={{
 				"ui5-popover-header": true,
 				"ui5-valuestatemessage-header": true,
@@ -106,7 +126,6 @@ function valueStateTextHeader(this: TimePicker, style?: Record<string, string>)
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			}}
-			style={style}
 		>
 			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
 			{ valueStateMessage.call(this) }