fix(ui5-upload-collection-item): properly display deleteButton slot (#10797)

Author: dimovpetar

packages/fiori/cypress/specs/UploadCollection.cy.tsx

@@ -251,6 +251,19 @@ describe("UploadCollection Rendering", () => {
 		cy.get("#uc3-uploading-hidden-terminate").shadow().find("ui5-button[icon=stop]").should("not.exist");
 	});
 
+	it("Tests rendering of 'deleteButton' slot", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName="File name">
+					<button slot="deleteButton" id="deleteButton">custom delete button</button>
+				</UploadCollectionItem>
+			</UploadCollection>
+		);
+
+		cy.get("#deleteButton").should("be.visible");
+		cy.get("#item").shadow().find(".ui5-upload-collection-deletebtn").should("not.exist");
+	});
+
 	it("Tests that 'header' and 'accessible-name' get forwarded to the inner list", () => {
 		const EXPECTED_ACC_NAME = "Uploaded (4)";
 

packages/fiori/src/UploadCollectionItemTemplate.tsx

@@ -125,15 +125,19 @@ function listItemContent(this: UploadCollectionItem) {
 						/>
 					)}
 					{!this.hideDeleteButton && (
-						<Button
-							class="ui5-upload-collection-deletebtn"
-							id={`${this._id}-deleteSelectionElement`}
-							design="Transparent"
-							icon={declineIcon}
-							disabled={this.disableDeleteButton}
-							onClick={this._onDelete}
-							tooltip={this.deleteText}
-						/>
+						this.hasDeleteButtonSlot ? (
+							<slot name="deleteButton"></slot>
+						) : (
+							<Button
+								class="ui5-upload-collection-deletebtn"
+								id={`${this._id}-deleteSelectionElement`}
+								design="Transparent"
+								icon={declineIcon}
+								disabled={this.disableDeleteButton}
+								onClick={this._onDelete}
+								tooltip={this.deleteText}
+							/>
+						)
 					)}
 				</>
 			)}

packages/fiori/test/pages/UploadCollection.html

@@ -108,6 +108,12 @@
 		>
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 		</ui5-upload-collection-item>
+		<ui5-upload-collection-item
+			file-name="Graph.docx"
+		>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			<ui5-button slot="deleteButton">custom delete button</ui5-button>
+		</ui5-upload-collection-item>
 	</ui5-upload-collection>
 
 	<button id="tabStop1">Tab stop helper</button>