Skip to content

Commit e305108

Browse files
VonahzVonahz
authored
feat(ui5-tokenizer): align mobile popover title with spec (#12979)
1 parent a926cd9 commit e305108

9 files changed

Lines changed: 96 additions & 17 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ describe("Multi Input on mobile device", () => {
124124
.find(".ui5-input-inner")
125125
.realClick();
126126

127-
cy.get<ResponsivePopover>("@popover")
127+
cy.get<ResponsivePopover>("@popover")
128128
.ui5ResponsivePopoverOpened();
129129

130130
// Assert: Button should be enabled after adding a token

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

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import Tokenizer from "../../src/Tokenizer.js";
22
import Button from "../../src/Button.js";
33
import Token from "../../src/Token.js";
4-
import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, TOKENIZER_POPOVER_REMOVE } from "../../src/generated/i18n/i18n-defaults.js";
4+
import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js";
5+
import Label from "../../src/Label.js";
6+
import ResponsivePopover from "../../src/ResponsivePopover.js";
57

68
describe("Phone mode", () => {
79
beforeEach(() => {
@@ -133,7 +135,7 @@ describe("Phone mode", () => {
133135

134136
cy.get("@nMoreDialog")
135137
.find(".ui5-responsive-popover-header .ui5-responsive-popover-header-text")
136-
.should("have.text", TOKENIZER_POPOVER_REMOVE.defaultText);
138+
.should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText);
137139
});
138140

139141
it("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and confirmed with OK", () => {
@@ -213,6 +215,7 @@ describe("Phone mode", () => {
213215
cy.get("@tokenDeleteSpy")
214216
.should("not.have.been.called");
215217
});
218+
216219
it("Should NOT fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and canceled", () => {
217220
cy.mount(
218221
<Tokenizer style={{ width: "50%" }}>
@@ -255,4 +258,69 @@ describe("Phone mode", () => {
255258
cy.get("@tokenDeleteSpy")
256259
.should("not.have.been.called");
257260
});
261+
262+
it("Should test popover title when accessibleName is set", () => {
263+
cy.mount(
264+
<>
265+
<Tokenizer style={{ width: "50%" }} accessibleName="Animals">
266+
<Token text="Lion"></Token>
267+
<Token text="Dog"></Token>
268+
<Token text="Cat"></Token>
269+
</Tokenizer>
270+
</>
271+
);
272+
273+
cy.get("[ui5-tokenizer]")
274+
.shadow()
275+
.find(".ui5-tokenizer-more-text")
276+
.as("nMoreLabel");
277+
278+
cy.get("@nMoreLabel")
279+
.realClick();
280+
281+
cy.get("[ui5-tokenizer]")
282+
.shadow()
283+
.find<ResponsivePopover>("[ui5-responsive-popover]")
284+
.as("popover")
285+
.ui5ResponsivePopoverOpened();
286+
287+
// When accessibleName is present, it should be used as the mobile dialog title
288+
cy.get("[ui5-tokenizer]")
289+
.shadow()
290+
.find("[ui5-responsive-popover] [slot='header'] [ui5-title]")
291+
.should("have.text", "Animals");
292+
});
293+
294+
it("Should test popover title when accessibleNameRef is set", () => {
295+
cy.mount(
296+
<>
297+
<Label id="countries-label">Countries</Label>
298+
<Tokenizer style={{ width: "50%" }} accessibleNameRef="countries-label">
299+
<Token text="Andora"></Token>
300+
<Token text="Bulgaria"></Token>
301+
<Token text="Canada"></Token>
302+
</Tokenizer>
303+
</>
304+
);
305+
306+
cy.get("[ui5-tokenizer]")
307+
.shadow()
308+
.find(".ui5-tokenizer-more-text")
309+
.as("nMoreLabel");
310+
311+
cy.get("@nMoreLabel")
312+
.realClick();
313+
314+
cy.get("[ui5-tokenizer]")
315+
.shadow()
316+
.find<ResponsivePopover>("[ui5-responsive-popover]")
317+
.as("popover")
318+
.ui5ResponsivePopoverOpened();
319+
320+
// When accessibleNameRef is present, it should be used as the mobile dialog title
321+
cy.get("[ui5-tokenizer]")
322+
.shadow()
323+
.find("[ui5-responsive-popover] [slot='header'] [ui5-title]")
324+
.should("have.text", "Countries");
325+
});
258326
})

‎packages/main/src/MultiComboBoxPopoverTemplate.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import List from "./List.js";
1010
import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
1111
import Popover from "./Popover.js";
1212
import CheckBox from "./CheckBox.js";
13+
import Title from "./Title.js";
1314
import BusyIndicator from "./BusyIndicator.js";
1415

1516
export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
@@ -39,7 +40,13 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
3940
{!this.loading && this._isPhone && <>
4041
<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
4142
<div class="row">
42-
<span>{this._headerTitleText}</span>
43+
<Title
44+
level="H1"
45+
wrappingType="None"
46+
class="ui5-responsive-popover-header-text"
47+
>
48+
{this._headerTitleText}
49+
</Title>
4350
</div>
4451
<div class="row">
4552
<Input

‎packages/main/src/Tokenizer.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,14 @@ import type Button from "./Button.js";
6262
import {
6363
MULTIINPUT_SHOW_MORE_TOKENS,
6464
TOKENIZER_ARIA_LABEL,
65-
TOKENIZER_POPOVER_REMOVE,
6665
TOKENIZER_ARIA_CONTAIN_TOKEN,
6766
TOKENIZER_ARIA_CONTAIN_ONE_TOKEN,
6867
TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS,
6968
TOKENIZER_SHOW_ALL_ITEMS,
7069
TOKENIZER_CLEAR_ALL,
7170
TOKENIZER_DIALOG_OK_BUTTON,
7271
TOKENIZER_DIALOG_CANCEL_BUTTON,
72+
INPUT_SUGGESTIONS_TITLE,
7373
} from "./generated/i18n/i18n-defaults.js";
7474

7575
// Styles
@@ -1179,7 +1179,7 @@ class Tokenizer extends UI5Element implements IFormInputElement {
11791179
}
11801180

11811181
get morePopoverTitle() {
1182-
return Tokenizer.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
1182+
return getEffectiveAriaLabelText(this) || Tokenizer.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
11831183
}
11841184

11851185
get overflownTokens() {

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import List from "../List.js";
66
import ResponsivePopover from "../ResponsivePopover.js";
77
import Button from "../Button.js";
88
import ListAccessibleRole from "../types/ListAccessibleRole.js";
9+
import Title from "../Title.js";
910

1011
export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
1112
const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
@@ -35,7 +36,13 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
3536
<>
3637
<div slot="header" class="ui5-responsive-popover-header">
3738
<div class="row">
38-
<span>{this._headerTitleText}</span>
39+
<Title
40+
level="H1"
41+
wrappingType="None"
42+
class="ui5-responsive-popover-header-text"
43+
>
44+
{this._headerTitleText}
45+
</Title>
3946
</div>
4047
<div class="row">
4148
<div class="input-root-phone native-input-wrapper">
@@ -75,7 +82,7 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
7582
</div>
7683
}
7784

78-
{ this.showSuggestions && suggestionsList.call(this) }
85+
{this.showSuggestions && suggestionsList.call(this)}
7986

8087
{this._isPhone &&
8188
<div slot="footer" class="ui5-responsive-popover-footer">

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -327,8 +327,8 @@ INPUT_SUGGESTIONS=Suggestions available
327327
#XCKL: Select all checkbox label
328328
MCB_SELECTED_ITEMS=Select All ({0} of {1})
329329

330-
#XBUT: Default title text for mobile
331-
INPUT_SUGGESTIONS_TITLE=Select
330+
#XTIT: Default title text for mobile
331+
INPUT_SUGGESTIONS_TITLE=All Items
332332

333333
#XACT: ARIA announcement for the Input suggestion result if one hit
334334
INPUT_SUGGESTIONS_ONE_HIT=1 result available
@@ -631,9 +631,6 @@ TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS=Contains {0} tokens
631631
#XACT: ARIA announcement for tokenizer label
632632
TOKENIZER_ARIA_LABEL=Tokenizer
633633

634-
#XFLD: Tokenizer's Dialog title on mobile devices.
635-
TOKENIZER_POPOVER_REMOVE=All items
636-
637634
#XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
638635
TOKENIZER_SHOW_ALL_ITEMS={0} Items
639636

‎packages/main/src/themes/ResponsivePopoverCommon.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@
169169
}
170170

171171
.ui5-responsive-popover-header-text {
172-
width: calc(100% - var(--_ui5_button_base_min_width));
172+
width: 100%;
173173
}
174174

175175
/* Header and footer layout */

‎packages/main/test/pages/MultiInput.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,6 @@ <h1 class="sample-container-title">Multi Input with N-More</h1>
276276

277277
<div class="sample-container">
278278
<h1>Tokens + Suggestions</h1>
279-
280279
<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token" value-state="Information">
281280
<ui5-suggestion-item text="Aute"></ui5-suggestion-item>
282281
<ui5-suggestion-item text="ad"></ui5-suggestion-item>

‎packages/main/test/pages/Tokenizer.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ <h1 class="sample-container-title">Expanded tokenizer</h1>
3030
</ui5-tokenizer>
3131
</div>
3232
<h1 class="sample-container-title">Only nItems tokenizer</h1>
33-
<ui5-tokenizer id="basic-tokenizer">
33+
<ui5-label id="n-items-label">Tokenizer with 2 items</ui5-label>
34+
<ui5-tokenizer id="basic-tokenizer" accessible-name-ref="n-items-label">
3435
<ui5-token text="Your name and email address were configured automatically based
3536
on your username and hostname. Please check that they are accurate."></ui5-token>
3637
<ui5-token text="Your name and email address were configured automatically based
@@ -50,7 +51,7 @@ <h1 class="sample-container-title">Tokenizer with n-more items</h1>
5051

5152
<h1 class="sample-container-title">Tokenizer with selected token</h1>
5253
<div class="tokenizer-container">
53-
<ui5-tokenizer id="selected-tokenizer">
54+
<ui5-tokenizer id="selected-tokenizer" accessible-name="Selected Token Example">
5455
<ui5-token text="Andora"></ui5-token>
5556
<ui5-token selected text="Bulgaria"></ui5-token>
5657
<ui5-token text="Canada"></ui5-token>

0 commit comments

Comments
 (0)