fix(ui5-select): swap X button for footer Cancel in mobile picker

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

@@ -1,5 +1,7 @@
 import Select from "../../src/Select.js";
 import Option from "../../src/Option.js";
+import type ResponsivePopover from "../../src/ResponsivePopover.js";
+import { SELECT_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Select mobile general interaction", () => {
 	beforeEach(() => {
@@ -80,3 +82,64 @@ describe("Select mobile general interaction", () => {
 		cy.get("@select").should("have.prop", "value", "Cozy");
 	});
 });
+
+describe("Select - mobile popover Cancel button", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("renders only the Cancel button in the footer (no X in header)", () => {
+		cy.mount(
+			<Select>
+				<Option>Option 1</Option>
+				<Option>Option 2</Option>
+			</Select>
+		);
+
+		cy.get("[ui5-select]").realClick();
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// Header has no close button anymore.
+		cy.get("@popover")
+			.find("[slot=header] .ui5-responsive-popover-close-btn")
+			.should("not.exist");
+
+		// Footer renders exactly one Cancel button.
+		cy.get("@popover")
+			.find(".ui5-responsive-popover-footer [ui5-button]")
+			.should("have.length", 1)
+			.and("have.class", "ui5-responsive-popover-close-btn")
+			.and("contain.text", SELECT_DIALOG_CANCEL_BUTTON.defaultText);
+	});
+
+	it("closes the mobile picker when the Cancel button is pressed", () => {
+		cy.mount(
+			<Select>
+				<Option>Option 1</Option>
+				<Option>Option 2</Option>
+			</Select>
+		);
+
+		cy.get("[ui5-select]").realClick();
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("@popover")
+			.find(".ui5-responsive-popover-footer [ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverClosed();
+	});
+});

packages/main/src/Select.ts

@@ -52,6 +52,7 @@ import {
 	INPUT_SUGGESTIONS_TITLE,
 	LIST_ITEM_POSITION,
 	SELECT_ROLE_DESCRIPTION,
+	SELECT_DIALOG_CANCEL_BUTTON,
 	FORM_SELECTABLE_REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
 import Label from "./Label.js";
@@ -1049,6 +1050,10 @@ class Select extends UI5Element implements IFormInputElement {
 		return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
+	get _cancelButtonText() {
+		return Select.i18nBundle.getText(SELECT_DIALOG_CANCEL_BUTTON);
+	}
+
 	get _currentlySelectedOption() {
 		return this.options[this._selectedIndex];
 	}

packages/main/src/SelectPopoverTemplate.tsx

@@ -4,7 +4,6 @@ import Button from "./Button.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Popover from "./Popover.js";
 import Icon from "./Icon.js";
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import Title from "./Title.js";
 
 export default function SelectPopoverTemplate(this: Select) {
@@ -33,11 +32,6 @@ export default function SelectPopoverTemplate(this: Select) {
 						<div slot="header" class="ui5-responsive-popover-header">
 							<div class="row">
 								<Title>{this._headerTitleText}</Title>
-								<Button
-									class="ui5-responsive-popover-close-btn"
-									icon={decline}
-									design="Transparent"
-									onClick={this._toggleRespPopover} />
 							</div>
 
 							{this.hasValueStateText &&
@@ -71,6 +65,18 @@ export default function SelectPopoverTemplate(this: Select) {
 					>
 						<slot></slot>
 					</List>
+
+					{this._isPhone &&
+						<div slot="footer" class="ui5-responsive-popover-footer">
+							<Button
+								class="ui5-responsive-popover-close-btn"
+								design="Transparent"
+								onClick={this._toggleRespPopover}
+							>
+								{this._cancelButtonText}
+							</Button>
+						</div>
+					}
 				</ResponsivePopover>
 			}
 

packages/main/src/i18n/messagebundle.properties

@@ -450,6 +450,9 @@ COMBOBOX_DIALOG_OK_BUTTON=OK
 #XBUT: Combobox Dialog Cancel button on mobile devices
 COMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
 
+#XBUT: Select Dialog Cancel button on mobile devices
+SELECT_DIALOG_CANCEL_BUTTON=Cancel
+
 #XACT: ARIA announcement for suggestions popup
 INPUT_AVALIABLE_VALUES=Available Values
 

packages/main/src/themes/ResponsivePopoverCommon.css

@@ -186,11 +186,12 @@
 .ui5-responsive-popover-footer {
 	display: flex;
 	justify-content: flex-end;
-	padding: 0.25rem 0;
+	align-items: center;
 	width: 100%;
+	box-sizing: border-box;
 }
 
-.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn, 
+.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn,
 .ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
 	margin-left: 0.5rem;
 }
@@ -203,4 +204,3 @@
 .ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
 	width: 4.5rem;
 }
-