Do not set icon color if the item is selected (#19404)

* Do not set icon color if the item is selected

* Added helper method for icon version to render.

* Fixed naming of protected helper method.

* Move further logic into helper method.

---------

Co-authored-by: Andy Butland <[email protected]>

Author: lauraneto

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts

@@ -71,7 +71,7 @@ export abstract class UmbTreeItemElementBase<
 	private _isSelectable = false;
 
 	@state()
-	private _isSelected = false;
+	protected _isSelected = false;
 
 	@state()
 	private _hasChildren = false;
@@ -165,10 +165,9 @@ export abstract class UmbTreeItemElementBase<
 	#renderIcon() {
 		const icon = this._item?.icon;
 		const isFolder = this._item?.isFolder;
-		const iconWithoutColor = icon?.split(' ')[0];
 
-		if (icon && iconWithoutColor) {
-			return html`<umb-icon slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>`;
+		if (icon) {
+			return html`<umb-icon slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>`;
 		}
 
 		if (isFolder) {
@@ -178,6 +177,11 @@ export abstract class UmbTreeItemElementBase<
 		return html`<umb-icon slot="icon" name="icon-circle-dotted"></umb-icon>`;
 	}
 
+	protected _getIconToRender(icon: string) {
+		const iconWithoutColor = icon.split(' ')[0];
+		return this._isActive || this._isSelected ? iconWithoutColor : icon;
+	}
+
 	renderLabel() {
 		return html`<slot name="label" slot="label"></slot>`;
 	}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts

@@ -37,13 +37,12 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<
 
 	override renderIconContainer() {
 		const icon = this._icon;
-		const iconWithoutColor = icon?.split(' ')[0];
 
 		return html`
 			<span id="icon-container" slot="icon" class=${classMap({ draft: this._isDraft })}>
-				${icon && iconWithoutColor
+				${icon
 					? html`
-							<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
+							<umb-icon id="icon" slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>
 							${this.#renderStateIcon()}
 						`
 					: nothing}

src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts

@@ -8,13 +8,12 @@ const elementName = 'umb-media-tree-item';
 export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTreeItemModel> {
 	override renderIconContainer() {
 		const icon = this.item?.mediaType.icon;
-		const iconWithoutColor = icon?.split(' ')[0];
 
 		return html`
 			<span id="icon-container" slot="icon">
-				${icon && iconWithoutColor
+				${icon
 					? html`
-							<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
+							<umb-icon id="icon" slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>
 							${this.#renderStateIcon()}
 						`
 					: nothing}