feat(ui5-list): introduce "growing" property (#2950)

Similar to the ui5-table, now the ui5-list provides growing property with 3 available options:
Button, Scroll, None. 
As a side effect, it allows developers to set "max-height, overflow: auto" and the "load-more" still working as expected, fixing the referenced SF request #2882. Previously not possible as the List used to listen for the "scroll" of its internal container, which could not be influenced by these external styles.

FIXES: #2882

BREAKING_CHANGES: The "infiniteScroll" property has been removed, use growing="Scroll" instead.

packages/base/src/util/isElementInView.js

@@ -0,0 +1,15 @@
+/**
+ * Determines if the element is within the viewport.
+ * @param el {HTMLElement}
+ */
+const isElementInView = el => {
+	const rect = el.getBoundingClientRect();
+
+	return (
+		rect.top >= 0 && rect.left >= 0
+			&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+			&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+	);
+};
+
+export default isElementInView;

packages/main/src/List.hbs

@@ -3,7 +3,7 @@
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
 >
-	<div class="ui5-list-scroll-container" @scroll="{{_onScroll}}">
+	<div class="ui5-list-scroll-container">
 		<!-- header -->
 		{{#if header.length}}
 			<slot name="header" />
@@ -36,6 +36,10 @@
 			{{/if}}
 		</ul>
 
+		{{#if growsWithButton}}
+			{{> moreRow}}
+		{{/if}}
+
 		{{#if footerText}}
 			<footer id="{{_id}}-footer" class="ui5-list-footer">
 				{{footerText}}
@@ -45,11 +49,37 @@
 		{{#if hasData}}
 			<div id="{{_id}}-after" tabindex="0" class="ui5-list-focusarea"></div>
 		{{/if}}
+
+		<span tabindex="-1" aria-hidden="true" class="ui5-list-end-marker"></span>
 	</div>
 
 	{{#if busy}}
 		<div class="ui5-list-busy-row">
-			<ui5-busyindicator active size="Medium" class="ui5-list-busy-ind"></ui5-busyindicator>
+			<ui5-busyindicator
+				active size="Medium"
+				class="ui5-list-busy-ind" 
+				style="{{styles.busyInd}}"
+			></ui5-busyindicator>
 		</div>
 	{{/if}}
 </div>
+
+
+{{#*inline "moreRow"}}
+	<div load-more>
+		<div 
+			tabindex="0"
+			role="button"
+			aria-labelledby="{{_id}}-showMore-text"
+			?active="{{_loadMoreActive}}"
+			@click="{{_onLoadMoreClick}}"
+			@keydown="{{_onLoadMoreKeydown}}"
+			@keyup="{{_onLoadMoreKeyup}}"
+			@mousedown="{{_onLoadMoreMousedown}}"
+			@mouseup="{{_onLoadMoreMouseup}}"
+			load-more-inner
+		>
+			<span id="{{_id}}-showMore-text" load-more-text>{{_moreText}}</span>
+		</div>
+	</div>
+{{/inline}}