feat(ui5-tokenizer): change indicator's text when there are no visibl…

…e 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
SAP · Jul 23, 2023 · 27f690e · 27f690e
1 parent afe7f02
commit 27f690e
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 2 deletions.
diff --git 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
@@ -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
@@ -318,6 +318,23 @@
 		<ui5-button id="dummy-btn">dummy button</ui5-button>
 	</div>
 
+	<br>
+	<div class="demo-section">
+		<span>MultiComboBox with N-Items</span>
+		<br>
+		<ui5-multi-combobox id="mc-items" style="width: 150px">
+			<ui5-mcb-item selected text="Token 1"></ui5-mcb-item>
+			<ui5-mcb-item selected text="Enim do esse anim magna enim fugiat Lorem enim nostrud sit laborum ea."></ui5-mcb-item>
+		</ui5-multi-combobox>
+		<br>
+		<span>MultiComboBox with N-More</span>
+		<br>
+		<ui5-multi-combobox id="mc-more">
+			<ui5-mcb-item selected text="Token 1"></ui5-mcb-item>
+			<ui5-mcb-item selected text="Enim do esse anim magna enim fugiat Lorem enim nostrud sit laborum ea."></ui5-mcb-item>
+		</ui5-multi-combobox>
+	</div>
+
 	<hr class="demo-section">
 
 	<div class="demo-section">

diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
@@ -237,8 +237,26 @@ <h1 class="sample-container-title">Multi Input with Truncated token</h1>
 		</ui5-multi-input>
 
 		<ui5-button id="dummy-btn">dummy button</ui5-button>
-		<br>
+    <br>
 		<ui5-button id="add-single-token">Add MultiInput with single token</ui5-button>
+
+		<br>
+		<br>
+
+		<h1 class="sample-container-title">Multi Input with N-Items</h1>
+		<ui5-multi-input id="mi-items" style="width: 150px">
+			<ui5-token text="Lorem ipsum" slot="tokens"></ui5-token>
+			<ui5-token text="Lorem ipsum 1" slot="tokens"></ui5-token>
+		</ui5-multi-input>
+
+		<br>
+		<br>
+
+		<h1 class="sample-container-title">Multi Input with N-More</h1>
+		<ui5-multi-input id="mi-more">
+			<ui5-token text="Token 1" slot="tokens"></ui5-token>
+			<ui5-token text="Enim do esse anim magna enim fugiat Lorem enim nostrud sit laborum ea." slot="tokens"></ui5-token>
+		</ui5-multi-input>
 	</div>
 
 	<div class="sample-container">

diff --git 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
@@ -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", () => {