feat(ui5-upload-collection): implement SAP Horizon theme family

packages/fiori/src/UploadCollectionItem.hbs

@@ -1,5 +1,7 @@
 {{>include "../../main/src/ListItem.hbs"}}
 
+{{#*inline "selectionElement"}}{{/inline}}
+
 {{#*inline "listItemContent"}}
 	<div class="ui5-uci-thumbnail">
 		<slot name="thumbnail"></slot>
@@ -22,7 +24,7 @@
 					{{#if fileNameClickable}}
 						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
-						<span class="ui5-uci-file-name">{{fileName}}</span>
+						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}
 				{{/if}}
 				<div class="ui5-uci-description">
@@ -90,6 +92,20 @@
 					>
 					</ui5-button>
 				{{/if}}
+
+				{{#if renderDeleteButton}}
+					<ui5-button
+							class="ui5-li-deletebtn"
+							tabindex="-1"
+							data-sap-no-tab-ref
+							id="{{_id}}-deleteSelectionElement"
+							design="Transparent"
+							icon="decline"
+							?disabled="{{disableDeleteButton}}"
+							@click="{{onDelete}}"
+							tooltip="{{deleteText}}"
+					></ui5-button>
+				{{/if}}
 			{{/if}}
 		</div>
 	</div>

packages/fiori/src/themes/UploadCollectionItem.css

@@ -59,17 +59,19 @@
 }
 
 .ui5-uci-file-name {
-	width: 100%;
 	display: block;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontLargeSize);
-	color: var(--sapTextColor);
 	margin-bottom: 0.25rem;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
+.ui5-uci-file-name-text {
+	color: var(--sapList_TextColor);
+}
+
 [ui5-link].ui5-uci-file-name {
 	pointer-events: all;
 }
@@ -80,9 +82,17 @@
 	font-size: var(--sapFontMediumSize);
 	color: var(--sapContent_LabelColor);
 	white-space: initial;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 /* Edit mode */
+
+.ui5-uci-edit-container {
+	display: flex;
+	align-items: center;
+}
+
 .ui5-uci-edit-container [ui5-input] {
 	width: 60%;
 	pointer-events: all;
@@ -111,19 +121,13 @@
 
 .ui5-uci-edit-buttons {
 	pointer-events: all;
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 .ui5-uci-edit-rename-btn {
 	margin-right: 0.125rem;
 }
 
-/* Progress Box */
-.ui5-uci-progress-box {
-	width: 20%;
-	min-width: 4rem;
-}
-
 @media(max-width: 30rem) {
 	.ui5-uci-content-and-edit-container {
 		display: block;
@@ -142,14 +146,13 @@
 		width: 100%;
 	}
 
-	.ui5-uci-edit-buttons,
-	.ui5-li-detailbtn,
-	.ui5-li-deletebtn {
-		margin-top: 0.75rem;
+	.ui5-uci-edit-buttons {
+		margin-inline-start: 0;
+		margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start);
 	}
 
-	.ui5-uci-edit-buttons {
-		margin-left: 0;
+	.ui5-uci-edit-buttons [ui5-button] {
+		margin-block-end: var(--ui5_upload_collection_button_margin_block_end);
 	}
 }
 
@@ -164,3 +167,15 @@
 	display: flex;
 	justify-content: space-between;
 }
+
+[ui5-button] {
+	margin-inline: 0.5rem;
+}
+
+[ui5-button]:first-of-type {
+	margin-inline-start: 0;
+}
+
+[ui5-button]:last-of-type {
+	margin-inline-end: var(--ui5_upload_collection_last_button_inline_end);
+}

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

@@ -2,4 +2,7 @@
 	--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;
+	--ui5_upload_collection_button_margin_block_end: 0;
+	--ui5_upload_collection_last_button_inline_end: 0;
+	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.75rem;
 }

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

@@ -4,6 +4,4 @@
 	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
 	--ui5_upload_collection_drop_overlay_background: transparent;
-	--ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor);
-	--ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
 }

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

@@ -3,6 +3,4 @@
 :root {
 	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
-	--ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor);
-	--ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
 }

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

@@ -0,0 +1,7 @@
+@import "../base/UploadCollection-parameters.css";
+
+:root {
+	--ui5_upload_collection_button_margin_block_end: 2px;
+	--ui5_upload_collection_last_button_inline_end: 2px;
+	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
+}

packages/fiori/src/themes/sap_horizon/parameters-bundle.css

@@ -8,7 +8,7 @@
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
-@import "../base/UploadCollection-parameters.css";
+@import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./Wizard-parameters.css";
 @import "./WizardTab-parameters.css";

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

@@ -0,0 +1,7 @@
+@import "../base/UploadCollection-parameters.css";
+
+:root {
+	--ui5_upload_collection_button_margin_block_end: 2px;
+	--ui5_upload_collection_last_button_inline_end: 2px;
+	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
+}

packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -8,7 +8,7 @@
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
-@import "../base/UploadCollection-parameters.css";
+@import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./Wizard-parameters.css";
 @import "./WizardTab-parameters.css";

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

@@ -4,6 +4,7 @@
 	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
 	--ui5_upload_collection_drop_overlay_background: transparent;
-	--ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor);
-	--ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
+	--ui5_upload_collection_button_margin_block_end: 2px;
+	--ui5_upload_collection_last_button_inline_end: 2px;
+	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
 }

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

@@ -3,6 +3,7 @@
 :root {
 	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
-	--ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor);
-	--ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
+	--ui5_upload_collection_button_margin_block_end: 2px;
+	--ui5_upload_collection_last_button_inline_end: 2px;
+	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
 }