feat(ui5-upload-collection): add IllustrationMessage for empty state

Fixes #6271
SAP · Mar 6, 2023 · 3ef6223 · 3ef6223
1 parent 816b5b6
commit 3ef6223
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs
@@ -16,11 +16,10 @@
 		</ui5-list>
 		{{#if _showNoData}}
 			<div class="{{classes.noFiles}}">
-				<div class="icon-container">
-					<ui5-icon name="document"></ui5-icon>
-				</div>
-				<ui5-label class="title" wrapping-type="Normal">{{_noDataText}}</ui5-label>
-				<ui5-label class="subtitle" wrapping-type="Normal">{{_noDataDescription}}</ui5-label>
+				<ui5-illustrated-message name="Tent">
+					<ui5-title slot="title" class="title" level="H1">{{_noDataText}}</ui5-title>
+					<div slot="subtitle" class="subtitle">{{_noDataDescription}}</div>
+				</ui5-illustrated-message>
 			</div>
 		{{/if}}
 		{{#if _showDndOverlay}}

diff --git a/packages/fiori/src/UploadCollection.ts b/packages/fiori/src/UploadCollection.ts
@@ -12,6 +12,7 @@ import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import ListMode from "@ui5/webcomponents/dist/types/ListMode.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
 import "@ui5/webcomponents-icons/dist/upload-to-cloud.js";
 import "@ui5/webcomponents-icons/dist/document.js";
 import {
@@ -237,6 +238,7 @@ class UploadCollection extends UI5Element {
 			Label,
 			List,
 			Title,
+			IllustratedMessage,
 		];
 	}
 

diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
@@ -98,7 +98,7 @@ UPLOADCOLLECTIONITEM_RETRY_BUTTON_TEXT=Retry
 UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT=Edit
 
 #XMSG: Message text for no data text in the UploadCollection
-UPLOADCOLLECTION_NO_DATA_TEXT=No files found.
+UPLOADCOLLECTION_NO_DATA_TEXT=No files found
 
 #XMSG: Message text for no data description in the UploadCollection
 UPLOADCOLLECTION_NO_DATA_DESCRIPTION=Drop files to upload, or use the Upload button.