From e5c942b45900e18e73e20b0770b14574ba6b78b5 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Fri, 3 Oct 2025 11:23:47 +0200
Subject: [PATCH] Block Grid: Add icon to allowed block types in area (#20364)

* Add icon to allowed block types in area

* Adjust type with icon property

* Use umb-icon instead

* Add styling for combo list option
---
 ...block-grid-area-type-permission.element.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
index c829c22721..98799e291f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
@@ -33,7 +33,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 	private _blockTypes?: Array<UmbBlockTypeWithGroupKey>;
 
 	@state()
-	private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string }> = [];
+	private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string; icon: string | null | undefined }> = [];
 
 	@state()
 	private _blockGroups: Array<UmbBlockGridTypeGroupType> = [];
@@ -51,11 +51,11 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 				.map((item) => {
 					const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
 					if (blockType) {
-						return { type: blockType, name: item.name };
+						return { type: blockType, name: item.name, icon: item.icon };
 					}
 					return undefined;
 				})
-				.filter((x) => x !== undefined) as Array<{ type: UmbBlockTypeWithGroupKey; name: string }>;
+				.filter((x) => x !== undefined) as Array<{ type: UmbBlockTypeWithGroupKey; name: string; icon: string | null | undefined }>;
 		});
 
 		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
@@ -193,7 +193,10 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 			this._blockGroups,
 			(group) => group.key,
 			(group) =>
-				html`<uui-combobox-list-option .value=${group.key} ?selected=${area.groupKey === group.key}>
+				html`<uui-combobox-list-option
+					.value=${group.key}
+					?selected=${area.groupKey === group.key}>
+					<umb-icon name="icon-folder"></umb-icon>
 					${group.name}
 				</uui-combobox-list-option>`,
 		);
@@ -207,6 +210,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 				html`<uui-combobox-list-option
 					.value=${block.type.contentElementTypeKey}
 					?selected=${area.elementTypeKey === block.type.contentElementTypeKey}>
+					<umb-icon name=${block.icon}></umb-icon>
 					${block.name}
 				</uui-combobox-list-option>`,
 		);
@@ -245,6 +249,13 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 			uui-combobox strong {
 				padding: 0 var(--uui-size-space-1);
 			}
+
+			uui-combobox-list-option {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+				padding: var(--uui-size-2);
+			}
 		`,
 	];
 }