fix(ui5-upload-collection): minimum height is guaranteed in no-data mode (#1683)

Author: vladitasev

packages/fiori/src/UploadCollection.hbs

@@ -1,9 +1,8 @@
-
 <div class="ui5-uc-root">
 	<div class="ui5-uc-header">
 		<slot name="header"></slot>
 	</div>
-	<div class="ui5-uc-content">
+	<div class="{{classes.content}}">
 		<ui5-list
 			mode="{{mode}}"
 			@ui5-selectionChange="{{_onSelectionChange}}"
@@ -32,4 +31,4 @@
 			</div>
 		{{/if}}
 	</div>
-</div>
+</div>

packages/fiori/src/UploadCollection.js

@@ -273,6 +273,10 @@ class UploadCollection extends UI5Element {
 
 	get classes() {
 		return {
+			content: {
+				"ui5-uc-content": true,
+				"ui5-uc-content-no-data": this._showNoData,
+			},
 			dndOverlay: {
 				"uc-dnd-overlay": true,
 				"uc-drag-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag,

packages/fiori/src/themes/UploadCollection.css

@@ -13,6 +13,10 @@
 	flex: 1 1 auto;
 }
 
+.ui5-uc-content.ui5-uc-content-no-data {
+    min-height: 20rem;
+}
+
 /* No Files */
 .uc-no-files {
 	position: absolute;
@@ -50,7 +54,7 @@
 .uc-no-files .subtitle {
 	font-size: var(--ui5_upload_collection_level_5Size);
 	color: var(--sapContent_LabelColor);
-	margin-bottom: 2rem;
+    margin-bottom: 2rem;
 }
 
 /* Drag and Drop */
@@ -120,4 +124,4 @@
 .uc-drop-overlay ui5-icon,
 .uc-drop-overlay .dnd-overlay-text {
 	color: var(--sapContent_DragAndDropActiveColor);
-}
+}

packages/fiori/test/pages/UploadCollection.html

@@ -4,8 +4,12 @@
 	<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<title>UploadCollection</title>
+    <script>
+		delete Document.prototype.adoptedStyleSheets
+    </script>
 
-	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../resources/bundle.es5.js"></script>
 
@@ -103,7 +107,7 @@
 		</ui5-upload-collection-item>
 	</ui5-upload-collection>
 
-	<ui5-upload-collection id="uploadCollectionDnD" style="height: 30rem;">
+	<ui5-upload-collection id="uploadCollectionDnD">
 		<div class="header" slot="header">
 			<ui5-title>Attachments (0)</ui5-title>
 			<div class="spacer"></div>