Merge pull request #2124 from umbraco/v14/feature/entity-bulk-action-button-icon

Feature: Entity Bulk Actions: adds optional button icon

src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.kind.ts

@@ -14,6 +14,7 @@ export const manifest: UmbBackofficeManifestKind = {
 		weight: 700,
 		forEntityTypes: [],
 		meta: {
+			icon: 'icon-enter',
 			label: '#actions_move',
 			bulkMoveRepositoryAlias: '',
 			treeAlias: '',

src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/default.action.kind.ts

@@ -11,6 +11,7 @@ export const UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST: UmbBackofficeManifest
 		weight: 1000,
 		element: () => import('../entity-bulk-action.element.js'),
 		meta: {
+			icon: '',
 			label: 'Default Entity Bulk Action',
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts

@@ -1,6 +1,6 @@
 import type { UmbEntityBulkAction } from './entity-bulk-action.interface.js';
 import type { UmbEntityBulkActionElement } from './entity-bulk-action-element.interface.js';
-import { html, ifDefined, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type {
@@ -32,11 +32,10 @@ export class UmbEntityBulkActionDefaultElement<
 
 	override render() {
 		return html`
-			<uui-button
-				color="default"
-				label=${ifDefined(this.localize.string(this.manifest?.meta.label ?? ''))}
-				look="secondary"
-				@click=${this.#onClick}></uui-button>
+			<uui-button color="default" look="secondary" @click=${this.#onClick}>
+				${when(this.manifest?.meta.icon, () => html`<uui-icon name=${this.manifest!.meta.icon}></uui-icon>`)}
+				<span>${this.localize.string(this.manifest?.meta.label ?? '')}</span>
+			</uui-button>
 		`;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts

@@ -23,6 +23,16 @@ export interface ManifestEntityBulkActionDefaultKind extends ManifestEntityBulkA
 }
 
 export interface MetaEntityBulkActionDefaultKind extends MetaEntityBulkAction {
+	/**
+	 * An icon to represent the action to be performed
+	 *
+	 * @examples [
+	 *   "icon-box",
+	 *   "icon-grid"
+	 * ]
+	 */
+	icon: string;
+
 	/**
 	 * The friendly name of the action to perform
 	 *

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/manifests.ts

@@ -18,7 +18,8 @@ export const entityBulkActions: Array<ManifestEntityBulkAction> = [
 		weight: 50,
 		api: () => import('./publish/publish.action.js'),
 		meta: {
-			label: 'Publish',
+			icon: 'icon-globe',
+			label: '#actions_publish',
 		},
 		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
 		conditions: [
@@ -40,7 +41,8 @@ export const entityBulkActions: Array<ManifestEntityBulkAction> = [
 		weight: 40,
 		api: () => import('./unpublish/unpublish.action.js'),
 		meta: {
-			label: 'Unpublish',
+			icon: 'icon-globe',
+			label: '#actions_unpublish',
 		},
 		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
 		conditions: [