Icon Picker: Deselect current icon & add “No icon” tile inside the modal. (#20342)

engijlr · web-flow · commit 193d8af9af38 · 2025-10-08T10:28:44.000Z
* Show selected icon and color(if any) when open the modal.

* Add a button inside the modal that clears the value

* Deselect the value if we click the already selected icon.

* Add placeholder icon and some localization for labels

* Remove unused variable

* Added config for the placeholder icon in case no icon is selected.
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
@@ -531,6 +531,7 @@ export default {
 		anchorLinkPicker: 'Anchor or querystring',
 		anchorInsert: 'Name',
 		closeThisWindow: 'Close this window',
+		colorSwitcher: 'Color switcher',
 		confirmdelete: (name: string) => `Are you sure you want to delete${name ? ` <strong>${name}</strong>` : ''}?`,
 		confirmdeleteNumberOfItems: 'Are you sure you want to delete <strong>%0%</strong> of <strong>%1%</strong> items',
 		confirmdisable: 'Are you sure you want to disable',
@@ -621,6 +622,7 @@ export default {
 		selectUser: 'Select user',
 		selectUsers: 'Select users',
 		chooseUsers: 'Choose users',
+		noIcon: 'No icon',
 		noIconsFound: 'No icons were found',
 		noMacroParams: 'There are no parameters for this macro',
 		noMacros: 'There are no macros available to insert',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/es.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/es.ts
@@ -286,6 +286,7 @@ export default {
 		anchorInsert: 'Nombre',
 		assignDomain: 'Administrar dominios',
 		closeThisWindow: 'Cerrar esta ventana',
+		colorSwitcher: 'Selector de color',
 		confirmdelete: 'Estás seguro que quieres borrar',
 		confirmdisable: 'Estás seguro que quieres deshabilitar',
 		confirmlogout: '¿Estás seguro?',
@@ -349,6 +350,7 @@ export default {
 		selectLanguages: 'Seleccionar idiomas',
 		selectSections: 'Selecciona secciones',
 		selectUsers: 'Selecciona usuarios',
+		noIcon: 'Sin icono',
 		noIconsFound: 'No se encontraron iconos',
 		noMacroParams: 'No hay parámetros para esta macro',
 		noMacros: 'No hay macros disponibles para insertar',
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
@@ -1,7 +1,16 @@
 import type { UmbIconDefinition } from '../types.js';
 import { UMB_ICON_REGISTRY_CONTEXT } from '../icon-registry.context-token.js';
 import type { UmbIconPickerModalData, UmbIconPickerModalValue } from './icon-picker-modal.token.js';
-import { css, customElement, html, nothing, query, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	customElement,
+	html,
+	ifDefined,
+	nothing,
+	query,
+	repeat,
+	state,
+} from '@umbraco-cms/backoffice/external/lit';
 import { extractUmbColorVariable, umbracoColors } from '@umbraco-cms/backoffice/resources';
 import { umbFocus } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
@@ -21,12 +30,6 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 	@state()
 	private _colorList = umbracoColors.filter((color) => !color.legacy);
 
-	@state()
-	private _currentIcon?: string;
-
-	@state()
-	private _currentColor = 'text';
-
 	constructor() {
 		super();
 		this.consumeContext(UMB_ICON_REGISTRY_CONTEXT, (context) => {
@@ -47,44 +50,32 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 		}
 	}
 
-	override connectedCallback() {
-		super.connectedCallback();
-		this._iconsFiltered = this.#icons;
-
-		if (this.modalContext) {
-			this.observe(
-				this.modalContext?.value,
-				(newValue) => {
-					this._currentIcon = newValue?.icon;
-					this._currentColor = newValue?.color ?? 'text';
-				},
-				'_observeModalContextValue',
-			);
-		}
-	}
-
 	#changeIcon(e: InputEvent | KeyboardEvent, iconName: string) {
-		if (e.type == 'click' || (e.type == 'keyup' && (e as KeyboardEvent).key == 'Enter')) {
-			this.modalContext?.updateValue({ icon: iconName });
-		}
+		const isActivate = e.type === 'click' || (e.type === 'keyup' && (e as KeyboardEvent).key === 'Enter');
+		if (!isActivate) return;
+
+		const nextIcon = this.value.icon === iconName ? '' : iconName;
+		this.modalContext?.updateValue({ icon: nextIcon });
 	}
 
 	#onColorChange(e: UUIColorSwatchesEvent) {
 		const colorAlias = e.target.value;
 		this.modalContext?.updateValue({ color: colorAlias });
-		this._currentColor = colorAlias;
 	}
 
+	#clearIcon = () => {
+		this.modalContext?.updateValue({ icon: '' });
+	};
+
 	override render() {
-		// TODO: Missing localization in general. [NL]
 		return html`
-			<umb-body-layout headline="Select Icon">
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectIcon')}>
 				<div id="container">
 					${this.renderSearch()}
 					<hr />
 					<uui-color-swatches
-						.value=${this._currentColor}
-						label="Color switcher for icons"
+						value=${ifDefined(this.value.color)}
+						label=${this.localize.term('defaultdialogs_colorSwitcher')}
 						@change=${this.#onColorChange}>
 						${
 							// TODO: Missing localization for the color aliases. [NL]
@@ -101,7 +92,18 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 						}
 					</uui-color-swatches>
 					<hr />
-					<uui-scroll-container id="icons">${this.renderIcons()}</uui-scroll-container>
+					<uui-scroll-container id="icons">
+						<uui-button
+							class=${!this.value.icon ? 'selected' : ''}
+							label=${this.localize.term('defaultdialogs_noIcon')}
+							title=${this.localize.term('defaultdialogs_noIcon')}
+							@click=${this.#clearIcon}
+							@keyup=${(e: KeyboardEvent) => {
+								if (e.key === 'Enter' || e.key === ' ') this.#clearIcon();
+							}}>
+							<uui-icon style="opacity:.35" name=${ifDefined(this.data?.placeholder)}></uui-icon> </uui-button
+						>${this.renderIcons()}</uui-scroll-container
+					>
 				</div>
 				<uui-button
 					slot="actions"
@@ -140,11 +142,11 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 						<uui-button
 							label=${icon.name}
 							title=${icon.name}
-							class=${icon.name === this._currentIcon ? 'selected' : ''}
+							class=${icon.name === this.value.icon ? 'selected' : ''}
 							@click=${(e: InputEvent) => this.#changeIcon(e, icon.name)}
 							@keyup=${(e: KeyboardEvent) => this.#changeIcon(e, icon.name)}>
 							<uui-icon
-								style="--uui-icon-color: var(${extractUmbColorVariable(this._currentColor)})"
+								style="--uui-icon-color: var(${extractUmbColorVariable(this.value.color ?? 'text')})"
 								name=${icon.name}></uui-icon>
 						</uui-button>
 					`,
@@ -199,7 +201,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 				border-radius: var(--uui-border-radius);
 				font-size: 16px; /* specific for icons */
 			}
-			#icons uui-button:focus,
+			#icons uui-button:focus-visible,
 			#icons uui-button:hover,
 			#icons uui-button.selected {
 				outline: 2px solid var(--uui-color-selected);
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
@@ -1,6 +1,8 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export type UmbIconPickerModalData = never;
+export interface UmbIconPickerModalData {
+	placeholder?: string;
+}
 
 export interface UmbIconPickerModalValue {
 	color: string | undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts
@@ -46,6 +46,7 @@ const propertyEditorUiManifest: ManifestPropertyEditorUi = {
 					label: 'Workspace View icon',
 					description: "The icon for the Collection's Workspace View.",
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
+					config: [{ alias: 'placeholder', value: 'icon-grid' }],
 				},
 				{
 					alias: 'tabName',
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
@@ -8,6 +8,16 @@ export const manifests: Array<UmbExtensionManifest> = [
 			label: 'Icon Picker',
 			icon: 'icon-autofill',
 			group: 'common',
+			settings: {
+				properties: [
+					{
+						alias: 'placeholder',
+						label: 'Placeholder icon (empty state)',
+						description: 'Icon name to show when no icon is selected',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
+					},
+				],
+			},
 		},
 	},
 ];
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
@@ -1,5 +1,8 @@
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
+import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import type {
+	UmbPropertyEditorConfigCollection,
+	UmbPropertyEditorUiElement,
+} from '@umbraco-cms/backoffice/property-editor';
 import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
 import { UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/icon';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -35,11 +38,29 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
 	@state()
 	private _color = '';
 
+	@state()
+	private _placeholderIcon = '';
+
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		if (!config) return;
+		const placeholder = config.getValueByAlias('placeholder');
+		this._placeholderIcon = typeof placeholder === 'string' ? placeholder : '';
+	}
+
 	private async _openModal() {
-		const data = await umbOpenModal(this, UMB_ICON_PICKER_MODAL).catch(() => undefined);
+		const data = await umbOpenModal(this, UMB_ICON_PICKER_MODAL, {
+			value: {
+				icon: this._icon,
+				color: this._color,
+			},
+			data: { placeholder: this._placeholderIcon },
+		}).catch(() => undefined);
+
 		if (!data) return;
 
-		if (data.color) {
+		if (!data.icon) {
+			this.value = '';
+		} else if (data.color) {
 			this.value = `${data.icon} color-${data.color}`;
 		} else {
 			this.value = data.icon as string;
@@ -49,15 +70,21 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
 	}
 
 	override render() {
+		const isEmpty = !this._icon;
+
 		return html`
 			<uui-button
 				compact
-				label=${this.localize.term('defaultdialogs_selectIcon')}
 				look="outline"
+				label=${this.localize.term('defaultdialogs_selectIcon')}
 				@click=${this._openModal}>
-				${this._color
-					? html` <uui-icon name="${this._icon}" style="color:var(${extractUmbColorVariable(this._color)})"></uui-icon>`
-					: html` <uui-icon name="${this._icon}"></uui-icon>`}
+				${isEmpty
+					? html` <uui-icon name="${ifDefined(this._placeholderIcon)}" style="opacity:.35"></uui-icon> `
+					: this._color
+						? html`
+								<uui-icon name="${this._icon}" style="color:var(${extractUmbColorVariable(this._color)})"> </uui-icon>
+							`
+						: html`<uui-icon name="${this._icon}"></uui-icon>`}
 			</uui-button>
 		`;
 	}

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ const propertyEditorUiManifest: ManifestPropertyEditorUi = {`
`46`	`46`	`label: 'Workspace View icon',`
`47`	`47`	`description: "The icon for the Collection's Workspace View.",`
`48`	`48`	`propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',`
	`49`	`+ config: [{ alias: 'placeholder', value: 'icon-grid' }],`
`49`	`50`	`},`
`50`	`51`	`{`
`51`	`52`	`alias: 'tabName',`