fix(ui5-upload-collection): fix "no files" heading HTML tag (#3930)

Author: TeodorTaushanov

packages/fiori/src/UploadCollection.hbs

@@ -15,14 +15,15 @@
 			<slot></slot>
 		</ui5-list>
 		{{#if _showNoData}}
-			<div class="uc-no-files">
+			<div class="{{classes.noFiles}}">
 				<div class="icon-container">
 					<ui5-icon name="document"></ui5-icon>
 				</div>
-				<ui5-title level="H2" wrap>{{_noDataText}}</ui5-title>
-				<ui5-label class="subtitle" wrap>{{_noDataDescription}}</ui5-label>
+				<ui5-label class="title" wrapping-type="Normal">{{_noDataText}}</ui5-label>
+				<ui5-label class="subtitle" wrapping-type="Normal">{{_noDataDescription}}</ui5-label>
 			</div>
-		{{else if _showDndOverlay}}
+		{{/if}}
+		{{#if _showDndOverlay}}
 			<div
 				class="{{classes.dndOverlay}}"
 				@dragenter="{{_ondragenter}}"

packages/fiori/src/UploadCollection.js

@@ -320,6 +320,10 @@ class UploadCollection extends UI5Element {
 				"uc-drag-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag,
 				"uc-drop-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drop,
 			},
+			noFiles: {
+				"uc-no-files": true,
+				"uc-no-files-dnd-overlay": this._showDndOverlay,
+			},
 		};
 	}
 
@@ -336,7 +340,7 @@ class UploadCollection extends UI5Element {
 	}
 
 	get _showNoData() {
-		return this.items.length === 0 && !this._showDndOverlay;
+		return this.items.length === 0;
 	}
 
 	get _noDataText() {

packages/fiori/src/themes/UploadCollection.css

@@ -6,17 +6,8 @@
 	position: relative;
 }
 
-.ui5-uc-content.ui5-uc-content-no-data {
-    min-height: 20rem;
-}
-
 /* No Files */
 .uc-no-files {
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
@@ -27,25 +18,28 @@
 }
 
 .uc-no-files .icon-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
 	height: 8rem;
 }
 
 .uc-no-files .icon-container [ui5-icon] {
-	font-size: 6rem;
 	width: 6rem;
 	height: 6rem;
 	color: var(--sapContent_NonInteractiveIconColor);
 	opacity: 0.5;
 }
 
-.uc-no-files [ui5-title] {
-	font-size: var(--ui5_upload_collection_level_2Size);
+.uc-no-files .title {
+	font-size: var(--sapFontHeader2Size);
 	color: var(--sapGroup_TitleTextColor);
 	margin: 1rem 0;
 }
 
 .uc-no-files .subtitle {
-	font-size: var(--ui5_upload_collection_level_5Size);
+	font-size: var(--sapFontHeader5Size);
 	color: var(--sapContent_LabelColor);
     margin-bottom: 2rem;
 }
@@ -118,3 +112,7 @@
 .uc-drop-overlay .dnd-overlay-text {
 	color: var(--sapContent_DragAndDropActiveColor);
 }
+
+.uc-no-files-dnd-overlay {
+	visibility: hidden;
+}

packages/fiori/src/themes/base/UploadCollection-parameters.css

@@ -1,6 +1,4 @@
 :root {
-	--ui5_upload_collection_level_2Size: 1.375rem;
-	--ui5_upload_collection_level_5Size: 1rem;
 	--ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.125rem solid var(--sapContent_DragAndDropActiveColor);
 	--ui5_upload_collection_drop_overlay_background: transparent;