From 635ace6a82258ee3e4ff0b3224da87f033529169 Mon Sep 17 00:00:00 2001 From: Ivanova Terzieva Date: Thu, 25 Sep 2025 19:23:03 +0300 Subject: [PATCH 1/3] fix(ui5-input, ui5-combobox, ui5-multi-combobox): adjust cancel button position Move cancel button of the responsive popover in the footer toolbar Fixes: #12356 --- packages/main/src/ComboBox.ts | 5 +++++ packages/main/src/ComboBoxPopoverTemplate.tsx | 16 ++++++++-------- packages/main/src/Input.ts | 5 +++++ packages/main/src/MultiComboBox.ts | 5 +++++ .../main/src/MultiComboBoxPopoverTemplate.tsx | 16 ++++++++-------- packages/main/src/TokenizerPopoverTemplate.tsx | 1 + .../src/features/InputSuggestionsTemplate.tsx | 16 ++++++++-------- packages/main/src/i18n/messagebundle.properties | 11 ++++++++++- .../main/src/themes/ResponsivePopoverCommon.css | 6 +++++- packages/main/src/themes/TokenizerPopover.css | 3 --- packages/main/src/themes/ValueStateMessage.css | 1 + 11 files changed, 56 insertions(+), 29 deletions(-) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 9b7a691a254c..580f47c20f8d 100644 --- a/packages/main/src/ComboBox.ts +++ b/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")! diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx index a359c83ff2ec..0e772e2274c7 100644 --- a/packages/main/src/ComboBoxPopoverTemplate.tsx +++ b/packages/main/src/ComboBoxPopoverTemplate.tsx @@ -38,13 +38,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
{this._headerTitleText} -
@@ -103,9 +96,16 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) { {this._isPhone &&
+
} diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 59d8317b20ff..b27227d1bced 100644 --- a/packages/main/src/Input.ts +++ b/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); } diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 6174275059f3..3fd6d49e6656 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/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; diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx index 2e15ca0410c8..8cc1b950ba34 100644 --- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx +++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx @@ -35,13 +35,6 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
{this._headerTitleText} -
+
} diff --git a/packages/main/src/TokenizerPopoverTemplate.tsx b/packages/main/src/TokenizerPopoverTemplate.tsx index 58fa75b7b8d1..f9c92333f440 100644 --- a/packages/main/src/TokenizerPopoverTemplate.tsx +++ b/packages/main/src/TokenizerPopoverTemplate.tsx @@ -54,6 +54,7 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) { >{this._okButtonText}
diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx index e39998199e0c..a2caf6f2792d 100644 --- a/packages/main/src/features/InputSuggestionsTemplate.tsx +++ b/packages/main/src/features/InputSuggestionsTemplate.tsx @@ -35,13 +35,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
{this._headerTitleText} -
@@ -86,11 +79,18 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti {this._isPhone &&
+
} diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index ebbfc33314a8..ccb2276f7b65 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/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 diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 918a6c616b1d..8edeabf2be06 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/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; } diff --git a/packages/main/src/themes/TokenizerPopover.css b/packages/main/src/themes/TokenizerPopover.css index c8e2a38a5e86..40716c4a95e4 100644 --- a/packages/main/src/themes/TokenizerPopover.css +++ b/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; -} diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css index 5dea3f9cdd5c..9f4e0bd5e436 100644 --- a/packages/main/src/themes/ValueStateMessage.css +++ b/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) { From 84bb9f007d35b4139e3fddb1eee933761e8dd97a Mon Sep 17 00:00:00 2001 From: Ivanova Terzieva Date: Fri, 26 Sep 2025 12:46:26 +0300 Subject: [PATCH 2/3] fix(ui5-input): fix mobile tests for input cancel button --- .../main/cypress/specs/ComboBox.mobile.cy.tsx | 17 ++++++++++++++--- packages/main/cypress/specs/Input.mobile.cy.tsx | 12 ++++++++++-- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx index b6416aacbe79..fe2830e4bd06 100644 --- a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx +++ b/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( @@ -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); }); }); diff --git a/packages/main/cypress/specs/Input.mobile.cy.tsx b/packages/main/cypress/specs/Input.mobile.cy.tsx index 7298ff6b8785..1549f598b846 100644 --- a/packages/main/cypress/specs/Input.mobile.cy.tsx +++ b/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( @@ -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); }); }); From fa13b59051c4ada637a4c1b700a8449fb95adf71 Mon Sep 17 00:00:00 2001 From: Ivanova Terzieva Date: Fri, 26 Sep 2025 12:59:52 +0300 Subject: [PATCH 3/3] fix: remove unused imports of decline icon --- packages/main/src/ComboBoxPopoverTemplate.tsx | 1 - packages/main/src/MultiComboBoxPopoverTemplate.tsx | 1 - packages/main/src/features/InputSuggestionsTemplate.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx index 0e772e2274c7..30ed7bbdc4ac 100644 --- a/packages/main/src/ComboBoxPopoverTemplate.tsx +++ b/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 ( diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx index 8cc1b950ba34..3c0811ddc28f 100644 --- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx +++ b/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"; diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx index a2caf6f2792d..1aaf161b3684 100644 --- a/packages/main/src/features/InputSuggestionsTemplate.tsx +++ b/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";