diff --git a/packages/main/cypress/specs/Select.mobile.cy.tsx b/packages/main/cypress/specs/Select.mobile.cy.tsx index 50865ee08c27..6374d768a050 100644 --- a/packages/main/cypress/specs/Select.mobile.cy.tsx +++ b/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( + + ); + + cy.get("[ui5-select]").realClick(); + + cy.get("[ui5-select]") + .shadow() + .find("[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( + + ); + + cy.get("[ui5-select]").realClick(); + + cy.get("[ui5-select]") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + cy.get("@popover") + .find(".ui5-responsive-popover-footer [ui5-button]") + .realClick(); + + cy.get("[ui5-select]") + .shadow() + .find("[ui5-responsive-popover]") + .ui5ResponsivePopoverClosed(); + }); +}); diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 3c83433e71f5..0840e00556ad 100644 --- a/packages/main/src/Select.ts +++ b/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]; } diff --git a/packages/main/src/SelectPopoverTemplate.tsx b/packages/main/src/SelectPopoverTemplate.tsx index 6a7626a2ef69..a98ea8ee87d9 100644 --- a/packages/main/src/SelectPopoverTemplate.tsx +++ b/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) {
{this._headerTitleText} -
{this.hasValueStateText && @@ -71,6 +65,18 @@ export default function SelectPopoverTemplate(this: Select) { > + + {this._isPhone && + + } } diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index b43e02c4c878..803bf9e0204b 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/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 diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index f450fdaefb8c..752ab0ebd665 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/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; } -