From 4e6bc9a3fd2d02721210f376f5c4630815adcb6f Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Sat, 25 Oct 2025 18:32:39 +0200
Subject: [PATCH 1/3] Add option to hide colors from icon picker

---
 .../icon-picker-modal.element.ts              | 47 +++++++++++--------
 .../icon-picker-modal.token.ts                |  1 +
 .../property-editor-ui-icon-picker.element.ts |  5 +-
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts
index 7227be73a0d3..fdb2e7166dd6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts
@@ -81,26 +81,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectIcon')}>
 				<div id="container">
 					${this.renderSearch()}
-					<hr />
-					<uui-color-swatches
-						value=${ifDefined(this.value.color)}
-						label=${this.localize.term('defaultdialogs_colorSwitcher')}
-						@change=${this.#onColorChange}>
-						${
-							// TODO: Missing localization for the color aliases. [NL]
-							this._colorList.map(
-								(color) => html`
-									<uui-color-swatch
-										label=${color.alias}
-										title=${color.alias}
-										value=${color.alias}
-										style="--uui-swatch-color: var(${color.varName})">
-									</uui-color-swatch>
-								`,
-							)
-						}
-					</uui-color-swatches>
-					<hr />
+					${this.renderColors()}
 					<uui-scroll-container id="icons">
 						${this.data?.showEmptyOption && !this._isSearching
 							? html`
@@ -144,9 +125,35 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 				${umbFocus()}>
 				<uui-icon name="search" slot="prepend" id="search_icon"></uui-icon>
 			</uui-input>
+			<hr />
 		`;
 	}
 
+	renderColors() {
+		return this.data?.hideColors === true
+			? nothing
+			: html`<uui-color-swatches
+						value=${ifDefined(this.value.color)}
+						label=${this.localize.term('defaultdialogs_colorSwitcher')}
+						@change=${this.#onColorChange}>
+						${
+							// TODO: Missing localization for the color aliases. [NL]
+							this._colorList.map(
+								(color) => html`
+									<uui-color-swatch
+										label=${color.alias}
+										title=${color.alias}
+										value=${color.alias}
+										style="--uui-swatch-color: var(${color.varName})">
+									</uui-color-swatch>
+								`,
+							)
+						}
+					</uui-color-swatches>
+					<hr />
+			`;
+	}
+
 	renderIcons() {
 		return this._iconsFiltered
 			? repeat(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts
index bf1aafec4735..7550109f6d86 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts
@@ -3,6 +3,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 export interface UmbIconPickerModalData {
 	placeholder?: string;
 	showEmptyOption?: boolean;
+	hideColors?: boolean;
 }
 
 export interface UmbIconPickerModalValue {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
index 8c9814bf5168..fc2845d2230d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -22,6 +22,9 @@ export class UmbPropertyEditorUIIconPickerElement
 	@property({ type: Boolean })
 	mandatory = false;
 
+	@property({ type: Boolean })
+	hideColors = false;
+
 	protected override firstUpdated(): void {
 		this.addValidator(
 			'valueMissing',
@@ -70,7 +73,7 @@ export class UmbPropertyEditorUIIconPickerElement
 				icon: this._icon,
 				color: this._color,
 			},
-			data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory },
+			data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory, hideColors: this.hideColors },
 		}).catch(() => undefined);
 
 		if (!data) return;

From c71af431031c4d42e9b52de6b9577520d5994d50 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Sat, 25 Oct 2025 18:52:41 +0200
Subject: [PATCH 2/3] Hide colors

---
 .../src/packages/property-editors/icon-picker/manifests.ts  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts
index 780ddf721e3d..dce6ae5da197 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts
@@ -16,6 +16,12 @@ export const manifests: Array<UmbExtensionManifest> = [
 						description: 'Icon name to show when no icon is selected',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
 					},
+					{
+						alias: 'hideColors',
+						label: 'Hide colors',
+						description: 'Hide color swatches from modal',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+					},
 				],
 			},
 		},

From 65a2109a20efc276c70fcc331321fee54791d5f2 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Sat, 25 Oct 2025 20:54:53 +0200
Subject: [PATCH 3/3] Hide colors from config

---
 .../property-editor-ui-icon-picker.element.ts            | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
index fc2845d2230d..2ac0b0d2fa92 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -22,9 +22,6 @@ export class UmbPropertyEditorUIIconPickerElement
 	@property({ type: Boolean })
 	mandatory = false;
 
-	@property({ type: Boolean })
-	hideColors = false;
-
 	protected override firstUpdated(): void {
 		this.addValidator(
 			'valueMissing',
@@ -61,10 +58,14 @@ export class UmbPropertyEditorUIIconPickerElement
 	@state()
 	private _placeholderIcon = '';
 
+	@state()
+	private _hideColors = false;
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		const placeholder = config.getValueByAlias('placeholder');
 		this._placeholderIcon = typeof placeholder === 'string' ? placeholder : '';
+		this._hideColors = config.getValueByAlias('hideColors') as boolean;
 	}
 
 	private async _openModal() {
@@ -73,7 +74,7 @@ export class UmbPropertyEditorUIIconPickerElement
 				icon: this._icon,
 				color: this._color,
 			},
-			data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory, hideColors: this.hideColors },
+			data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory, hideColors: this._hideColors },
 		}).catch(() => undefined);
 
 		if (!data) return;