refactor(ui5-upload-collection): remove Delete selection mode

packages/fiori/src/UploadCollection.ts

@@ -10,7 +10,6 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
-import ListSelectionMode from "@ui5/webcomponents/dist/types/ListSelectionMode.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 import IllustratedMessage from "./IllustratedMessage.js";
 import "./illustrations/Tent.js";
@@ -31,6 +30,7 @@ import {
 } from "./upload-utils/UploadCollectionBodyDnD.js";
 import type { DnDEventListener, DnDEventListenerParam } from "./upload-utils/UploadCollectionBodyDnD.js";
 import UploadCollectionDnDOverlayMode from "./types/UploadCollectionDnDMode.js";
+import UploadCollectionSelectionMode from "./types/UploadCollectionSelectionMode.js";
 
 // Template
 import UploadCollectionTemplate from "./generated/templates/UploadCollectionTemplate.lit.js";
@@ -118,13 +118,11 @@ class UploadCollection extends UI5Element {
 	/**
 	 * Defines the selection mode of the `ui5-upload-collection`.
 	 *
-	 * **Note:**
-	 * Selection mode "Delete" has no effect. The delete button is controlled by the `hideDeleteButton` property of UploadCollectionItem
 	 * @default "None"
 	 * @public
 	 */
-	@property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
-	selectionMode!: `${ListSelectionMode}`;
+	@property({ type: UploadCollectionSelectionMode, defaultValue: UploadCollectionSelectionMode.None })
+	selectionMode!: `${UploadCollectionSelectionMode}`;
 
 	/**
 	 * Allows you to set your own text for the 'No data' description.

packages/fiori/src/UploadCollectionItem.hbs

@@ -92,7 +92,7 @@
 				</ui5-button>
 			{{/if}}
 
-			{{#if renderUploadCollectionDeleteButton}}
+			{{#unless hideDeleteButton}}
 				<ui5-button
 						class="ui5-upload-collection-deletebtn"
 						tabindex="-1"
@@ -104,7 +104,7 @@
 						@click="{{_onDelete}}"
 						tooltip="{{deleteText}}"
 				></ui5-button>
-			{{/if}}
+			{{/unless}}
 		{{/if}}
 	</div>
 {{/inline}}

packages/fiori/src/UploadCollectionItem.ts

@@ -144,8 +144,7 @@ class UploadCollectionItem extends ListItem {
 	declare disableDeleteButton: boolean;
 
 	/**
-	 * By default, the delete button will always be shown, regardless of the `ui5-upload-collection`'s property `mode`.
-	 * Setting this property to `true` will hide the delete button.
+	 * Hides the delete button.
 	 * @default false
 	 * @public
 	 */
@@ -344,13 +343,6 @@ class UploadCollectionItem extends ListItem {
 		};
 	}
 
-	/**
-	 * @override
-	 */
-	get renderUploadCollectionDeleteButton() {
-		return !this.hideDeleteButton;
-	}
-
 	get _fileNameWithoutExtension() {
 		return this.fileName.substring(0, this.fileName.length - this._fileExtension.length);
 	}

packages/fiori/src/themes/UploadCollectionItem.css

@@ -124,13 +124,7 @@
 
 /* Buttons */
 .ui5-uci-root-editing .ui5-li-detailbtn,
-.ui5-uci-root-editing .ui5-li-deletebtn,
-.ui5-uci-root-uploading .ui5-li-detailbtn,
-.ui5-uci-root-uploading .ui5-li-deletebtn {
-	display: none;
-}
-
-.ui5-li-deletebtn {
+.ui5-uci-root-uploading .ui5-li-detailbtn {
 	display: none;
 }
 

packages/fiori/src/types/UploadCollectionSelectionMode.ts

@@ -0,0 +1,45 @@
+/**
+ * Different UploadCollection selection modes.
+ * @public
+ */
+enum UploadCollectionSelectionMode {
+	/**
+	 * Default mode (no selection).
+	 * @public
+	 */
+	None = "None",
+
+	/**
+	 * Right-positioned single selection mode (only one list item can be selected).
+	 * @public
+	 */
+	Single = "Single",
+
+	/**
+	 * Left-positioned single selection mode (only one list item can be selected).
+	 * @public
+	 */
+	SingleStart = "SingleStart",
+
+	/**
+	 * Selected item is highlighted but no selection element is visible
+	 * (only one list item can be selected).
+	 * @public
+	 */
+	SingleEnd = "SingleEnd",
+
+	/**
+	 * Selected item is highlighted and selection is changed upon arrow navigation
+	 * (only one list item can be selected - this is always the focused item).
+	 * @public
+	 */
+	SingleAuto = "SingleAuto",
+
+	/**
+	 * Multi selection mode (more than one list item can be selected).
+	 * @public
+	 */
+	Multiple = "Multiple",
+}
+
+export default UploadCollectionSelectionMode;

packages/fiori/test/pages/UploadCollection.html

@@ -23,8 +23,8 @@
 			<ui5-option>Single</ui5-option>
 			<ui5-option>SingleStart</ui5-option>
 			<ui5-option>SingleEnd</ui5-option>
+			<ui5-option>SingleAuto</ui5-option>
 			<ui5-option>Multiple</ui5-option>
-			<ui5-option>Delete</ui5-option>
 		</ui5-select>
 		<ui5-label>UCI Type:</ui5-label>
 		<ui5-select id="changeType">

packages/fiori/test/specs/UploadCollection.spec.js

@@ -160,28 +160,16 @@ describe("UploadCollection", () => {
 			await browser.keys("Enter")
 		});
 
-		it("upload collection should fire 'item-delete' in Delete selectionMode", async () => {
-			const uploadCollection = await browser.$("#uploadCollection");
-			const firstItem = await browser.$("#firstItem");
-
-			await uploadCollection.setAttribute("selectionMode", "Delete");
-
-			const deleteBtn = await firstItem.shadow$(".ui5-upload-collection-deletebtn");
-			await deleteBtn.click();
-
-			assert.strictEqual((await uploadCollection.getProperty("items")).length, 4, "item should be deleted when 'item-delete' event is fired");
-		});
-
 		it("upload collection should fire 'item-delete' regardless of the selectionMode", async () => {
 			const uploadCollection = await browser.$("#uploadCollection");
 			const item = await browser.$("#latestReportsPdf");
 
-			await uploadCollection.setAttribute("selectionMode", "None");
+			await uploadCollection.setAttribute("selection-mode", "None");
 
 			const deleteBtn = await item.shadow$(".ui5-upload-collection-deletebtn");
 			await deleteBtn.click();
 
-			assert.strictEqual((await uploadCollection.getProperty("items")).length, 3, "item should be deleted when 'item-delete' event is fired");
+			assert.strictEqual((await uploadCollection.getProperty("items")).length, 4, "item should be deleted when 'item-delete' event is fired");
 		});
 
 		it("item should fire 'retry'", async () => {

packages/playground/_stories/fiori/UploadCollection/UploadCollection.stories.ts

@@ -8,7 +8,7 @@ import type { UI5StoryArgs } from "../../../types.js";
 
 import UploadCollection from "@ui5/webcomponents-fiori/dist/UploadCollection.js";
 import UploadState from "@ui5/webcomponents-fiori/dist/types/UploadState.js";
-import ListSelectionMode from "@ui5/webcomponents/dist/types/ListSelectionMode.js";
+import UploadCollectionSelectionMode from "@ui5/webcomponents-fiori/dist/types/UploadCollectionSelectionMode.js";
 import ListItemType from "@ui5/webcomponents/dist/types/ListItemType.js";
 
 export default {
@@ -122,7 +122,7 @@ const handleFileUpload: Decorator = (story) => {
 };
 export const Basic = Template.bind({});
 Basic.args = {
-	selectionMode: ListSelectionMode.Delete,
+	selectionMode: UploadCollectionSelectionMode.None,
 	id: "uploadCollection",
 	accessibleName: "Uploaded (2)",
 	header: `<div slot="header" class="header">

packages/website/docs/_samples/fiori/UploadCollection/Basic/sample.html

@@ -12,7 +12,7 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-    <ui5-upload-collection id="uploadCollection" selection-mode="Delete" accessible-name="Uploaded (2)">
+    <ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (2)">
         <div slot="header" class="header">
             <ui5-title>Uploaded (2)</ui5-title>
             <ui5-label show-colon>Add new files and press to start uploading pending files</ui5-label>