fix(ui5-media-gallery): correct overflow label (#4903)

Author: kineticjs

packages/fiori/src/MediaGallery.js

@@ -396,7 +396,10 @@ class MediaGallery extends UI5Element {
 	_getOverflowSize(columnHeight, columnsCount) {
 		const maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight),
 			overflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);
-		return (overflowSize > 0) ? overflowSize + 1 : 0; // make room for overflow btn as well
+		if (overflowSize === this.items.length || overflowSize === 0) {
+			return overflowSize;
+		}
+		return overflowSize + 1; // overflow 1 extra item to make room for overflow btn as well
 	}
 
 	_getFocusableItems() {

packages/fiori/test/pages/MediaGallery.html

@@ -200,6 +200,20 @@
 			</ui5-media-gallery>
 		</div>
 
+		<div class="controls">
+			<ui5-title level="H2">Narrow container</ui5-title>
+		</div>
+		<div class="narrowContainer">
+			<ui5-media-gallery id="galleryInNarrowContainer">
+				<ui5-media-gallery-item>
+					 <img src="./img/HT-1000.jpg">
+				</ui5-media-gallery-item>
+				<ui5-media-gallery-item>
+					<img src="./img/HT-1010.jpg">
+				</ui5-media-gallery-item>
+			</ui5-media-gallery>
+		</div>
+
 	<script>
 
 		let selectionChangeCallCount = 0,

packages/fiori/test/pages/styles/MediaGallery.css

@@ -39,4 +39,8 @@ body {
 
 ui5-media-gallery-item:not(:defined) {
     visibility: hidden;
+}
+
+.narrowContainer {
+    width: 80px;
 }

packages/fiori/test/specs/MediaGallery.spec.js

@@ -389,4 +389,20 @@ describe("MediaGallery layout", () => {
 		assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width");
 		assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height");
 	});
+
+	it("narrow container", async () => {
+
+		const newWidth = 80, // width allows only the overflow button to be displayed; all items will overflow
+			gallery = await browser.$("#galleryInNarrowContainer"),
+			itemsCount = await browser.$$("#galleryInNarrowContainer ui5-media-gallery-item").length;
+
+		// Setup
+		await browser.executeAsync(async (newWidth, done) => {
+			document.getElementById("galleryInNarrowContainer").style.width = `${newWidth}px`;
+			done();
+		}, newWidth);
+
+		// Check
+		assert.strictEqual(await gallery.getProperty("_overflowSize"), itemsCount, "correct overflow size");
+	});
 });