Skip to content

Commit a50f10c

Browse files
nikoletavnvilhan007aleksandar-terziev
authored
fix(ui5-input, ui5-combobox, ui5-multi-combobox): adjust cancel button position (#12375)
* 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 --------- Co-authored-by: ilhan orhan <[email protected]> Co-authored-by: Aleksandar Terziev <[email protected]>
1 parent 25eda91 commit a50f10c

13 files changed

+80
-37
lines changed

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import ComboBox from "../../src/ComboBox.js";
22
import ComboBoxItem from "../../src/ComboBoxItem.js";
33
import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
44
import type ResponsivePopover from "../../src/ResponsivePopover.js";
5-
import { COMBOBOX_DIALOG_OK_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
5+
import { COMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
66

77
describe("Basic mobile picker rendering and interaction", () => {
88
beforeEach(() => {
@@ -129,7 +129,7 @@ describe("Basic mobile picker rendering and interaction", () => {
129129
.ui5ResponsivePopoverClosed();
130130
});
131131

132-
it("checks OK button text in dialog on mobile device", () => {
132+
it("checks OK and Cancel button text in dialog on mobile device", () => {
133133
cy.mount(
134134
<ComboBox>
135135
<ComboBoxItem text="Algeria" />
@@ -143,8 +143,19 @@ describe("Basic mobile picker rendering and interaction", () => {
143143
cy.get("[ui5-combobox]")
144144
.shadow()
145145
.find("[ui5-responsive-popover]")
146-
.find(".ui5-responsive-popover-footer [ui5-button]")
146+
.as("popover");
147+
148+
cy.get("@popover")
149+
.find(".ui5-responsive-popover-footer")
150+
.find("[ui5-button]")
151+
.eq(0)
147152
.should("have.text", COMBOBOX_DIALOG_OK_BUTTON.defaultText);
153+
154+
cy.get("@popover")
155+
.find(".ui5-responsive-popover-footer")
156+
.find("[ui5-button]")
157+
.eq(1)
158+
.should("have.text", COMBOBOX_DIALOG_CANCEL_BUTTON.defaultText);
148159
});
149160
});
150161

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import Input from "../../src/Input.js";
22
import "../../src/features/InputSuggestions.js";
33
import type ResponsivePopover from "../../src/ResponsivePopover.js";
44
import SuggestionItem from "../../src/SuggestionItem.js";
5-
import { INPUT_SUGGESTIONS_OK_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
5+
import { INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
66

77
describe("Input on mobile device", () => {
88
beforeEach(() => {
99
cy.ui5SimulateDevice("phone");
1010
});
11-
it("checks OK button text in dialog on mobile device", () => {
11+
12+
it("checks OK and Cancel button text in dialog on mobile device", () => {
1213
cy.mount(
1314
<Input showSuggestions={true}>
1415
<SuggestionItem text="First item"></SuggestionItem>
@@ -30,7 +31,14 @@ describe("Input on mobile device", () => {
3031
cy.get("@popover")
3132
.find(".ui5-responsive-popover-footer")
3233
.find("[ui5-button]")
34+
.eq(0)
3335
.should("have.text", INPUT_SUGGESTIONS_OK_BUTTON.defaultText);
36+
37+
cy.get("@popover")
38+
.find(".ui5-responsive-popover-footer")
39+
.find("[ui5-button]")
40+
.eq(1)
41+
.should("have.text", INPUT_SUGGESTIONS_CANCEL_BUTTON.defaultText);
3442
});
3543
});
3644

‎packages/main/src/ComboBox.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import {
5858
INPUT_SUGGESTIONS_TITLE,
5959
COMBOBOX_AVAILABLE_OPTIONS,
6060
COMBOBOX_DIALOG_OK_BUTTON,
61+
COMBOBOX_DIALOG_CANCEL_BUTTON,
6162
SELECT_OPTIONS,
6263
LIST_ITEM_POSITION,
6364
LIST_ITEM_GROUP_HEADER,
@@ -1390,6 +1391,10 @@ class ComboBox extends UI5Element implements IFormInputElement {
13901391
return ComboBox.i18nBundle.getText(COMBOBOX_DIALOG_OK_BUTTON);
13911392
}
13921393

1394+
get _dialogCancelButtonText() {
1395+
return ComboBox.i18nBundle.getText(COMBOBOX_DIALOG_CANCEL_BUTTON);
1396+
}
1397+
13931398
get inner(): HTMLInputElement {
13941399
return (isPhone() && this.open)
13951400
? this._getPickerInput().shadowRoot!.querySelector("input")!

‎packages/main/src/ComboBoxPopoverTemplate.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import ResponsivePopover from "./ResponsivePopover.js";
77
import BusyIndicator from "./BusyIndicator.js";
88
import SuggestionItem from "./SuggestionItem.js";
99
import type ComboBox from "./ComboBox.js";
10-
import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
1110

1211
export default function ComboBoxPopoverTemplate(this: ComboBox) {
1312
return (
@@ -38,13 +37,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
3837
<div slot="header" class="ui5-responsive-popover-header">
3938
<div class="row">
4039
<span>{this._headerTitleText}</span>
41-
<Button
42-
class="ui5-responsive-popover-close-btn"
43-
icon={declineIcon}
44-
design="Transparent"
45-
onClick={this._closeRespPopover}
46-
>
47-
</Button>
4840
</div>
4941

5042
<div class="row">
@@ -103,9 +95,16 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
10395
{this._isPhone &&
10496
<div slot="footer" class="ui5-responsive-popover-footer">
10597
<Button
106-
design="Transparent"
98+
design="Emphasized"
10799
onClick={this._closeRespPopover}
108100
>{this._dialogOkButtonText}</Button>
101+
<Button
102+
class="ui5-responsive-popover-close-btn"
103+
design="Transparent"
104+
onClick={this._closeRespPopover}
105+
>
106+
{this._dialogCancelButtonText}
107+
</Button>
109108
</div>
110109
}
111110
</ResponsivePopover>

‎packages/main/src/Input.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ import {
8888
INPUT_CLEAR_ICON_ACC_NAME,
8989
INPUT_AVALIABLE_VALUES,
9090
INPUT_SUGGESTIONS_OK_BUTTON,
91+
INPUT_SUGGESTIONS_CANCEL_BUTTON,
9192
FORM_TEXTFIELD_REQUIRED,
9293
} from "./generated/i18n/i18n-defaults.js";
9394

@@ -1682,6 +1683,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
16821683
return Input.i18nBundle.getText(INPUT_SUGGESTIONS_OK_BUTTON);
16831684
}
16841685

1686+
get _suggestionsCancelButtonText() {
1687+
return Input.i18nBundle.getText(INPUT_SUGGESTIONS_CANCEL_BUTTON);
1688+
}
1689+
16851690
get clearIconAccessibleName() {
16861691
return Input.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
16871692
}

‎packages/main/src/MultiComboBox.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ import {
9191
SELECT_OPTIONS,
9292
SHOW_SELECTED_BUTTON,
9393
MULTICOMBOBOX_DIALOG_OK_BUTTON,
94+
MULTICOMBOBOX_DIALOG_CANCEL_BUTTON,
9495
COMBOBOX_AVAILABLE_OPTIONS,
9596
VALUE_STATE_ERROR_ALREADY_SELECTED,
9697
MCB_SELECTED_ITEMS,
@@ -2178,6 +2179,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
21782179
return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
21792180
}
21802181

2182+
get _dialogCancelButton() {
2183+
return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_CANCEL_BUTTON);
2184+
}
2185+
21812186
get _tokenizerExpanded() {
21822187
if (isPhone()) {
21832188
return false;

‎packages/main/src/MultiComboBoxPopoverTemplate.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import decline from "@ui5/webcomponents-icons/dist/decline.js";
21
import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
32
import type MultiComboBox from "./MultiComboBox.js";
43
import ResponsivePopover from "./ResponsivePopover.js";
@@ -35,13 +34,6 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
3534
<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
3635
<div class="row">
3736
<span>{this._headerTitleText}</span>
38-
<Button
39-
class="ui5-responsive-popover-close-btn"
40-
icon={decline}
41-
design="Transparent"
42-
onClick={this.handleCancel}
43-
>
44-
</Button>
4537
</div>
4638
<div class="row">
4739
<Input
@@ -100,9 +92,16 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
10092
{this._isPhone &&
10193
<div slot="footer" class="ui5-responsive-popover-footer">
10294
<Button
103-
design="Transparent"
95+
design="Emphasized"
10496
onClick={this.handleOK}
10597
>{this._dialogOkButton}</Button>
98+
<Button
99+
class="ui5-responsive-popover-close-btn"
100+
design="Transparent"
101+
onClick={this.handleCancel}
102+
>
103+
{this._dialogCancelButton}
104+
</Button>
106105
</div>
107106
}
108107
</ResponsivePopover>

‎packages/main/src/TokenizerPopoverTemplate.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
5454
>{this._okButtonText}</Button>
5555
<Button
5656
design="Transparent"
57+
class="ui5-responsive-popover-close-btn"
5758
onClick={this.handleDialogButtonPress}
5859
>{this._cancelButtonText}</Button>
5960
</div>

‎packages/main/src/features/InputSuggestionsTemplate.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
22
import Input from "../Input.js";
33
import Icon from "../Icon.js";
4-
import decline from "@ui5/webcomponents-icons/dist/decline.js";
54

65
import List from "../List.js";
76
import ResponsivePopover from "../ResponsivePopover.js";
@@ -35,13 +34,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
3534
<div slot="header" class="ui5-responsive-popover-header">
3635
<div class="row">
3736
<span>{this._headerTitleText}</span>
38-
<Button
39-
class="ui5-responsive-popover-close-btn"
40-
icon={decline}
41-
design="Transparent"
42-
onClick={this._closePicker}
43-
>
44-
</Button>
4537
</div>
4638
<div class="row">
4739
<div class="input-root-phone native-input-wrapper">
@@ -86,11 +78,18 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
8678
{this._isPhone &&
8779
<div slot="footer" class="ui5-responsive-popover-footer">
8880
<Button
89-
design="Transparent"
81+
design="Emphasized"
9082
onClick={this._closePicker}
9183
>
9284
{this._suggestionsOkButtonText}
9385
</Button>
86+
<Button
87+
class="ui5-responsive-popover-close-btn"
88+
design="Transparent"
89+
onClick={this._closePicker}
90+
>
91+
{this._suggestionsCancelButtonText}
92+
</Button>
9493
</div>
9594
}
9695
</ResponsivePopover>

‎packages/main/src/i18n/messagebundle.properties‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,9 @@ INPUT_CLEAR_ICON_ACC_NAME=Clear
271271
#XBUT: Input's Dialog OK button on mobile devices
272272
INPUT_SUGGESTIONS_OK_BUTTON=OK
273273

274+
#XBUT: Input's Dialog Cancel button on mobile devices
275+
INPUT_SUGGESTIONS_CANCEL_BUTTON=Cancel
276+
274277
#XFLD: Subtle link description label
275278
LINK_SUBTLE=Subtle
276279

@@ -346,15 +349,21 @@ MESSAGE_STRIP_INFORMATION=Message Strip
346349
#XACT: ARIA announcement for the MessageStrip's "Custom" state
347350
MESSAGE_STRIP_CUSTOM=Custom Message Strip
348351

349-
#XFLD: MultiComboBox dialog button
352+
#XFLD: MultiComboBox OK dialog button
350353
MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
351354

355+
#XFLD: MultiComboBox Cancel dialog button
356+
MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
357+
352358
#XACT: ARIA announcement for Combo Box and Multi Combo Box available options
353359
COMBOBOX_AVAILABLE_OPTIONS=Available Options
354360

355361
#XBUT: Combobox Dialog OK button on mobile devices
356362
COMBOBOX_DIALOG_OK_BUTTON=OK
357363

364+
#XBUT: Combobox Dialog Cancel button on mobile devices
365+
COMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
366+
358367
#XACT: ARIA announcement for suggestions popup
359368
INPUT_AVALIABLE_VALUES=Available Values
360369

0 commit comments

Comments
 (0)