feat(ui5-list): growintButtonText property added (#8349)

Fixes: #7028

Author: yanaminkova

packages/main/src/List.hbs

@@ -84,7 +84,7 @@
 		<div
 			tabindex="0"
 			role="button"
-			id="{{_id}}-growing-btn" 
+			id="{{_id}}-growing-btn"
 			aria-labelledby="{{_id}}-growingButton-text"
 			?active="{{_loadMoreActive}}"
 			@click="{{_onLoadMoreClick}}"

packages/main/src/List.ts

@@ -332,6 +332,19 @@ class List extends UI5Element {
 	@property({ type: ListGrowingMode, defaultValue: ListGrowingMode.None })
 	growing!: `${ListGrowingMode}`;
 
+	/**
+	 * Defines the text that will be displayed inside the growing button.
+	 *
+	 * **Note:** If not specified a built-in text will be displayed.
+	 *
+	 * **Note:** This property takes effect if the `growing` property is set to the `Button`.
+	 * @default ""
+	 * @since 1.24
+	 * @public
+	 */
+	@property()
+	growingButtonText!: string;
+
 	/**
 	 * Defines if the component would display a loading indicator over the list.
 	 * @default false
@@ -585,7 +598,7 @@ class List extends UI5Element {
 	}
 
 	get _growingButtonText(): string {
-		return List.i18nBundle.getText(LOAD_MORE_TEXT);
+		return this.growingButtonText || List.i18nBundle.getText(LOAD_MORE_TEXT);
 	}
 
 	get busyIndPosition() {

packages/main/test/pages/List.html

@@ -37,6 +37,16 @@
 
 	<br/><br/>
 
+	<h2>List growing="Button" and growing-button-text property used</h2>
+	<ui5-list id="infiniteScrollEx2" growing="Button" growing-button-text="Custom growing-button-text" class="list3auto">
+		<ui5-li-groupheader>New Items</ui5-li-groupheader>
+		<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
+		<ui5-li image="./img/portrait.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Error">Laptop Lenovo</ui5-li>
+		<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"  additional-text-state="Information">IPhone 3</ui5-li>
+	</ui5-list>
+
+	<br/><br/>
+
 	<h2>ui5-list</h2>
 
 	<ui5-list header-text="API: GroupHeaderListItem" mode="MultiSelect">
@@ -458,6 +468,18 @@ <h3 id="infoLbl">Items 3/3</h3>
 			}, 1000);
 		});
 
+
+		infiniteScrollEx2.addEventListener("ui5-load-more", function(e) {
+			var el = infiniteScrollEx2;
+			el.busy = true;
+
+			setTimeout(function() {
+				insertItems(el, 3);
+				el.busy = false;
+				result.textContent = (++loadedCount) + " times " + (itemsLoadedTotal += itemsToLoad);
+			}, 1000);
+		});
+
 	</script>
 </body>
-</html>
+</html>

packages/main/test/pages/List_test_page.html

@@ -39,6 +39,17 @@
 
 	<br><br><br>
 
+	<ui5-list id="infiniteScrollEx2" class="list_test_page2auto" growing="Button" growing-button-text="Custom text">
+		<ui5-li>Laptop Lenovo</ui5-li>
+		<ui5-li>IPhone 3</ui5-li>
+		<ui5-li>HP Monitor 24</ui5-li>
+		<ui5-li>Audio cabel</ui5-li>
+		<ui5-li>DVD set</ui5-li>
+		<ui5-li>HP Monitor 24</ui5-li>
+		<ui5-li>Audio cabel</ui5-li>
+		<ui5-li id="lastItem">Last Item</ui5-li>
+	</ui5-list>
+
 	<br/>
 	<ui5-list id="listEvents" mode="SingleSelectEnd">
 		<ui5-li id="country1">Argentina</ui5-li>
@@ -390,6 +401,15 @@ <h2 id="testHeader">Test aria</h2>
 			loadMoreResult.value= ++loadMoreCounter;
 		});
 
+		infiniteScrollEx2.addEventListener("ui5-loadMore", function(e) {
+			for(var i = 0; i < 3; i++) {
+				var li = document.createElement("ui5-li");
+				li.textContent = "Title" + i;
+				infiniteScrollEx2.appendChild(li);
+			}
+			loadMoreResult.value= ++loadMoreCounter;
+		});
+
 		detailListItem.addEventListener("ui5-detail-click", function(e) {
 			detailPressCounter.innerHTML = parseInt(detailPressCounter.innerHTML) + 1;
 		});
@@ -448,4 +468,4 @@ <h2 id="testHeader">Test aria</h2>
 	</ui5-list>
 	<div id="tabIndexChangeResult"></div>
 </body>
-</html>
+</html>

packages/main/test/specs/List.spec.js

@@ -615,4 +615,19 @@ describe("List Tests", () => {
 		assert.strictEqual(rootTooltip, newTooltip, "Tooltip of root element is updated correctly at runtime.");
 		assert.strictEqual(rootTooltip, innerTooltip, "Tooltip of root element and title of inner li element are equal after runtime change.");
 	});
+
+	it("Tests the growingButtonText property", async () => {
+		const list = await browser.$("#infiniteScrollEx2");
+		const btnText = "Custom text"
+		let growingBtnText = await list.getProperty("growingButtonText");
+
+		assert.strictEqual(growingBtnText, btnText, "GrowingButtonText property is correctly set to the list.");
+
+		const newBtnText = "New custom text";
+		await list.setProperty("growingButtonText", newBtnText);
+ 		growingBtnText = await list.getProperty("growingButtonText");
+
+		assert.strictEqual(growingBtnText, newBtnText, "GrowingButtonText property is correctly changed.");
+
+	});
 });

packages/playground/_stories/main/List/List.stories.ts

@@ -22,6 +22,7 @@ const Template: UI5StoryArgs<List, StoryArgsSlots> = (args) => {
     ?busy="${ifDefined(args.busy)}"
     ?indent="${ifDefined(args.indent)}"
     ?growing="${ifDefined(args.growing)}"
+    growing-button-text="${ifDefined(args.growingButtonText)}"
     busy-delay="${ifDefined(args.busyDelay)}"
     separators="${ifDefined(args.separators)}"
     header-text="${ifDefined(args.headerText)}"