From 27f690ec159c631c4b58023ed0c1cfd080439fb1 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Sun, 23 Jul 2023 23:25:19 +0300
Subject: [PATCH] feat(ui5-tokenizer): change indicator's text when there are
no visible tokens (#7327)
* feat(ui5-tokenizer): change indicator's text when there are no visible tokens
* feat(ui5-tokenizer): apply review comments
* fix(ui5-tokenizer): adjust sample title
---
packages/main/src/Tokenizer.ts | 7 ++++++-
.../main/src/i18n/messagebundle.properties | 3 +++
packages/main/test/pages/MultiComboBox.html | 17 +++++++++++++++
packages/main/test/pages/MultiInput.html | 20 +++++++++++++++++-
.../main/test/specs/MultiComboBox.spec.js | 21 +++++++++++++++++++
packages/main/test/specs/MultiInput.spec.js | 21 +++++++++++++++++++
6 files changed, 87 insertions(+), 2 deletions(-)
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
index a8bd69a56b11..fc2dd05011a1 100644
--- a/packages/main/src/Tokenizer.ts
+++ b/packages/main/src/Tokenizer.ts
@@ -55,6 +55,7 @@ import {
TOKENIZER_ARIA_CONTAIN_TOKEN,
TOKENIZER_ARIA_CONTAIN_ONE_TOKEN,
TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS,
+ TOKENIZER_SHOW_ALL_ITEMS,
} from "./generated/i18n/i18n-defaults.js";
// Styles
@@ -630,7 +631,11 @@ class Tokenizer extends UI5Element {
}
get _nMoreText() {
- return Tokenizer.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
+ if (this._getVisibleTokens().length) {
+ return Tokenizer.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
+ }
+
+ return Tokenizer.i18nBundle.getText(TOKENIZER_SHOW_ALL_ITEMS, this._nMoreCount);
}
get showNMore() {
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index c101ba86c168..36b6a376a5af 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -361,6 +361,9 @@ TOKENIZER_ARIA_LABEL=Tokenizer
#XFLD: Remove label for Tokenizer's Dialog on phone
TOKENIZER_POPOVER_REMOVE=Remove
+#XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
+TOKENIZER_SHOW_ALL_ITEMS={0} Items
+
#XACT: Label text for TreeListItem
TREE_ITEM_ARIA_LABEL=Tree Item
diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
index e5cbaeb3d208..a292ed2e62ae 100644
--- a/packages/main/test/pages/MultiComboBox.html
+++ b/packages/main/test/pages/MultiComboBox.html
@@ -318,6 +318,23 @@
dummy button
+
+
+ MultiComboBox with N-Items
+
+
+
+
+
+
+ MultiComboBox with N-More
+
+
+
+
+
+
+
diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
index 648527c5d7b2..79c03884d81a 100644
--- a/packages/main/test/pages/MultiInput.html
+++ b/packages/main/test/pages/MultiInput.html
@@ -237,8 +237,26 @@
Multi Input with Truncated token
dummy button
-
+
Add MultiInput with single token
+
+
+
+
+ Multi Input with N-Items
+
+
+
+
+
+
+
+
+ Multi Input with N-More
+
+
+
+
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
index e37ab416ad30..a4a15c8d3080 100644
--- a/packages/main/test/specs/MultiComboBox.spec.js
+++ b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1542,6 +1542,27 @@ describe("MultiComboBox general interaction", () => {
await mcb.click();
assert.notOk(await popover.getProperty("opened"), "Popover with valueStateMessage should not be opened.");
});
+
+ it("Should apply correct text to the tokens overflow indicator", async () => {
+ const mcNItems = await $("#mc-items");
+ const mcNMore = await $("#mc-more");
+ const tokenizerNItems = await mcNItems.shadow$("ui5-tokenizer");
+ const tokenizerNMore = await mcNMore.shadow$("ui5-tokenizer");
+ const nItemsLabel = await tokenizerNItems.shadow$(".ui5-tokenizer-more-text");
+ const nMoreLabel = await tokenizerNMore.shadow$(".ui5-tokenizer-more-text");
+ let resourceBundleText = null;
+
+ resourceBundleText = await browser.executeAsync(done => {
+ const mi = document.getElementById("mc-items");
+ done({
+ mcItemsLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.TOKENIZER_SHOW_ALL_ITEMS, 2),
+ mcNMoreLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MULTIINPUT_SHOW_MORE_TOKENS, 1)
+ });
+ });
+
+ assert.strictEqual(await nItemsLabel.getText(), resourceBundleText.mcItemsLabelText, "Text should be 2 Items");
+ assert.strictEqual(await nMoreLabel.getText(), resourceBundleText.mcNMoreLabelText, "Text should be 1 More");
+ });
});
describe("MultiComboBox Truncated Token", () => {
diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
index b69837062674..76e0dd97ccd0 100644
--- a/packages/main/test/specs/MultiInput.spec.js
+++ b/packages/main/test/specs/MultiInput.spec.js
@@ -199,6 +199,27 @@ describe("MultiInput general interaction", () => {
assert.strictEqual(await innerInput.getProperty("value"), "", "Input's value should be empty");
});
+
+ it("Should apply correct text to the tokens overflow indicator", async () => {
+ const miNItems = await $("#mi-items");
+ const miNMore = await $("#mi-more");
+ const tokenizerNItems = await miNItems.shadow$("ui5-tokenizer");
+ const tokenizerNMore = await miNMore.shadow$("ui5-tokenizer");
+ const nItemsLabel = await tokenizerNItems.shadow$(".ui5-tokenizer-more-text");
+ const nMoreLabel = await tokenizerNMore.shadow$(".ui5-tokenizer-more-text");
+ let resourceBundleText = null;
+
+ resourceBundleText = await browser.executeAsync(done => {
+ const mi = document.getElementById("mi-items");
+ done({
+ miItemsLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.TOKENIZER_SHOW_ALL_ITEMS, 2),
+ miNMoreLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MULTIINPUT_SHOW_MORE_TOKENS, 1)
+ });
+ });
+
+ assert.strictEqual(await nItemsLabel.getText(), resourceBundleText.miItemsLabelText, "Text should be 2 Items");
+ assert.strictEqual(await nMoreLabel.getText(), resourceBundleText.miNMoreLabelText, "Text should be 1 More");
+ });
});
describe("MultiInput Truncated Token", () => {