fix(ui5-input, ui5-combobox, ui5-multi-combobox): adjust cancel button position

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

@@ -2,7 +2,7 @@ import ComboBox from "../../src/ComboBox.js";
 import ComboBoxItem from "../../src/ComboBoxItem.js";
 import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
 import type ResponsivePopover from "../../src/ResponsivePopover.js";
-import { COMBOBOX_DIALOG_OK_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
+import { COMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Basic mobile picker rendering and interaction", () => {
 	beforeEach(() => {
@@ -129,7 +129,7 @@ describe("Basic mobile picker rendering and interaction", () => {
 			.ui5ResponsivePopoverClosed();
 	});
 
-	it("checks OK button text in dialog on mobile device", () => {
+	it("checks OK and Cancel button text in dialog on mobile device", () => {
 		cy.mount(
 			<ComboBox>
 				<ComboBoxItem text="Algeria" />
@@ -143,8 +143,19 @@ describe("Basic mobile picker rendering and interaction", () => {
 		cy.get("[ui5-combobox]")
 			.shadow()
 			.find("[ui5-responsive-popover]")
-			.find(".ui5-responsive-popover-footer [ui5-button]")
+			.as("popover");
+
+		cy.get("@popover")
+			.find(".ui5-responsive-popover-footer")
+			.find("[ui5-button]")
+			.eq(0)
 			.should("have.text", COMBOBOX_DIALOG_OK_BUTTON.defaultText);
+
+		cy.get("@popover")
+			.find(".ui5-responsive-popover-footer")
+			.find("[ui5-button]")
+			.eq(1)
+			.should("have.text", COMBOBOX_DIALOG_CANCEL_BUTTON.defaultText);
 	});
 });
 

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

@@ -2,13 +2,14 @@ import Input from "../../src/Input.js";
 import "../../src/features/InputSuggestions.js";
 import type ResponsivePopover from "../../src/ResponsivePopover.js";
 import SuggestionItem from "../../src/SuggestionItem.js";
-import { INPUT_SUGGESTIONS_OK_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
+import { INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Input on mobile device", () => {
 	beforeEach(() => {
 		cy.ui5SimulateDevice("phone");
 	});
-	it("checks OK button text in dialog on mobile device", () => {
+
+	it("checks OK and Cancel button text in dialog on mobile device", () => {
 		cy.mount(
 			<Input showSuggestions={true}>
 				<SuggestionItem text="First item"></SuggestionItem>
@@ -30,7 +31,14 @@ describe("Input on mobile device", () => {
 		cy.get("@popover")
 			.find(".ui5-responsive-popover-footer")
 			.find("[ui5-button]")
+			.eq(0)
 			.should("have.text", INPUT_SUGGESTIONS_OK_BUTTON.defaultText);
+
+		cy.get("@popover")
+			.find(".ui5-responsive-popover-footer")
+			.find("[ui5-button]")
+			.eq(1)
+			.should("have.text", INPUT_SUGGESTIONS_CANCEL_BUTTON.defaultText);
 	});
 });
 

packages/main/src/ComboBox.ts

@@ -58,6 +58,7 @@ import {
 	INPUT_SUGGESTIONS_TITLE,
 	COMBOBOX_AVAILABLE_OPTIONS,
 	COMBOBOX_DIALOG_OK_BUTTON,
+	COMBOBOX_DIALOG_CANCEL_BUTTON,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
 	LIST_ITEM_GROUP_HEADER,
@@ -1384,6 +1385,10 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return ComboBox.i18nBundle.getText(COMBOBOX_DIALOG_OK_BUTTON);
 	}
 
+	get _dialogCancelButtonText() {
+		return ComboBox.i18nBundle.getText(COMBOBOX_DIALOG_CANCEL_BUTTON);
+	}
+
 	get inner(): HTMLInputElement {
 		return (isPhone() && this.open)
 			? this._getPickerInput().shadowRoot!.querySelector("input")!

packages/main/src/ComboBoxPopoverTemplate.tsx

@@ -7,7 +7,6 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
 import type ComboBox from "./ComboBox.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
 	return (
@@ -38,13 +37,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
 							<span>{this._headerTitleText}</span>
-							<Button
-								class="ui5-responsive-popover-close-btn"
-								icon={declineIcon}
-								design="Transparent"
-								onClick={this._closeRespPopover}
-							>
-							</Button>
 						</div>
 
 						<div class="row">
@@ -103,9 +95,16 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				{this._isPhone &&
 			<div slot="footer" class="ui5-responsive-popover-footer">
 				<Button
-					design="Transparent"
+					design="Emphasized"
 					onClick={this._closeRespPopover}
 				>{this._dialogOkButtonText}</Button>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					design="Transparent"
+					onClick={this._closeRespPopover}
+				>
+					{this._dialogCancelButtonText}
+				</Button>
 			</div>
 				}
 			</ResponsivePopover>

packages/main/src/Input.ts

@@ -88,6 +88,7 @@ import {
 	INPUT_CLEAR_ICON_ACC_NAME,
 	INPUT_AVALIABLE_VALUES,
 	INPUT_SUGGESTIONS_OK_BUTTON,
+	INPUT_SUGGESTIONS_CANCEL_BUTTON,
 	FORM_TEXTFIELD_REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -1682,6 +1683,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		return Input.i18nBundle.getText(INPUT_SUGGESTIONS_OK_BUTTON);
 	}
 
+	get _suggestionsCancelButtonText() {
+		return Input.i18nBundle.getText(INPUT_SUGGESTIONS_CANCEL_BUTTON);
+	}
+
 	get clearIconAccessibleName() {
 		return Input.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
 	}

packages/main/src/MultiComboBox.ts

@@ -91,6 +91,7 @@ import {
 	SELECT_OPTIONS,
 	SHOW_SELECTED_BUTTON,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
+	MULTICOMBOBOX_DIALOG_CANCEL_BUTTON,
 	COMBOBOX_AVAILABLE_OPTIONS,
 	VALUE_STATE_ERROR_ALREADY_SELECTED,
 	MCB_SELECTED_ITEMS,
@@ -2178,6 +2179,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
 	}
 
+	get _dialogCancelButton() {
+		return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_CANCEL_BUTTON);
+	}
+
 	get _tokenizerExpanded() {
 		if (isPhone()) {
 			return false;

packages/main/src/MultiComboBoxPopoverTemplate.tsx

@@ -1,4 +1,3 @@
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
 import type MultiComboBox from "./MultiComboBox.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -35,13 +34,6 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
 					<div class="row">
 						<span>{this._headerTitleText}</span>
-						<Button
-							class="ui5-responsive-popover-close-btn"
-							icon={decline}
-							design="Transparent"
-							onClick={this.handleCancel}
-						>
-						</Button>
 					</div>
 					<div class="row">
 						<Input
@@ -100,9 +92,16 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
-						design="Transparent"
+						design="Emphasized"
 						onClick={this.handleOK}
 					>{this._dialogOkButton}</Button>
+					<Button
+						class="ui5-responsive-popover-close-btn"
+						design="Transparent"
+						onClick={this.handleCancel}
+					>
+						{this._dialogCancelButton}
+					</Button>
 				</div>
 			}
 		</ResponsivePopover>

packages/main/src/TokenizerPopoverTemplate.tsx

@@ -54,6 +54,7 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
 				>{this._okButtonText}</Button>
 				<Button
 					design="Transparent"
+					class="ui5-responsive-popover-close-btn"
 					onClick={this.handleDialogButtonPress}
 				>{this._cancelButtonText}</Button>
 			</div>

packages/main/src/features/InputSuggestionsTemplate.tsx

@@ -1,7 +1,6 @@
 import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Input from "../Input.js";
 import Icon from "../Icon.js";
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
@@ -35,13 +34,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 					<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._closePicker}
-							>
-							</Button>
 						</div>
 						<div class="row">
 							<div class="input-root-phone native-input-wrapper">
@@ -86,11 +78,18 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
-						design="Transparent"
+						design="Emphasized"
 						onClick={this._closePicker}
 					>
 						{this._suggestionsOkButtonText}
 					</Button>
+					<Button
+						class="ui5-responsive-popover-close-btn"
+						design="Transparent"
+						onClick={this._closePicker}
+					>
+						{this._suggestionsCancelButtonText}
+					</Button>
 				</div>
 			}
 		</ResponsivePopover>

packages/main/src/i18n/messagebundle.properties

@@ -271,6 +271,9 @@ INPUT_CLEAR_ICON_ACC_NAME=Clear
 #XBUT: Input's Dialog OK button on mobile devices
 INPUT_SUGGESTIONS_OK_BUTTON=OK
 
+#XBUT: Input's Dialog Cancel button on mobile devices
+INPUT_SUGGESTIONS_CANCEL_BUTTON=Cancel
+
 #XFLD: Subtle link description label
 LINK_SUBTLE=Subtle
 
@@ -346,15 +349,21 @@ MESSAGE_STRIP_INFORMATION=Message Strip
 #XACT: ARIA announcement for the MessageStrip's "Custom" state
 MESSAGE_STRIP_CUSTOM=Custom Message Strip
 
-#XFLD: MultiComboBox dialog button
+#XFLD: MultiComboBox OK dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+#XFLD: MultiComboBox Cancel dialog button
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
+
 #XACT: ARIA announcement for Combo Box and Multi Combo Box available options
 COMBOBOX_AVAILABLE_OPTIONS=Available Options
 
 #XBUT: Combobox Dialog OK button on mobile devices
 COMBOBOX_DIALOG_OK_BUTTON=OK
 
+#XBUT: Combobox Dialog Cancel button on mobile devices
+COMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
+
 #XACT: ARIA announcement for suggestions popup
 INPUT_AVALIABLE_VALUES=Available Values
 

packages/main/src/themes/ResponsivePopoverCommon.css

@@ -190,7 +190,11 @@
 	width: 100%;
 }
 
-.ui5-responsive-popover-close-btn {
+.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn {
+	margin-left: 0.5rem;
+}
+
+.ui5-responsive-popover-header .ui5-responsive-popover-close-btn {
 	position: absolute;
 	right: 1rem;
 }

packages/main/src/themes/TokenizerPopover.css

@@ -21,6 +21,3 @@
 	margin-inline-start: calc(-1 * var(--_ui5_tokenizer_padding));
 }
 
-.ui5-responsive-popover-footer [ui5-button]:first-child{
-	margin-right: 1rem;
-}

packages/main/src/themes/ValueStateMessage.css

@@ -112,6 +112,7 @@
 	flex: none;
 	top: 0;
 	left: 0;
+	max-width: 100%;
 }
 
 .ui5-popover-with-value-state-header-phone::part(content) {