From 55124fff81b077770ea9d4ca1b36c6fedbf65b29 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 7 Feb 2021 02:50:20 +0100
Subject: [PATCH] Update icons in umb-tree-search-results component (#9757)

* Avoid use of ng-if

* Green class is not necessary

* Ensure button element use full width

* Left align text inside button element
---
 .../src/less/components/tree/umb-tree.less          |  3 ++-
 .../components/tree/umb-tree-search-results.html    | 13 +++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index 8234618393..6ab663a8b2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -132,7 +132,6 @@ body.touch .umb-tree {
 .umb-tree .umb-search-group {
     position: inherit;
     display: inherit;
-
     list-style: none;
 
     h6 {
@@ -155,6 +154,8 @@ body.touch .umb-tree {
 
         &-link {
             display: block;
+            width: 100%;
+            text-align: left;
         }
 
         &-name {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
index 1264d68c76..f472251624 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
@@ -7,13 +7,14 @@
     <li class="root">
       <ul class="umb-search-group">
         <li class="umb-search-group-item" ng-repeat="result in results">
-          <div ng-class="{'umb-tree-node-checked' : result.selected}">
-            <button type="button" class="btn-reset umb-search-group-item-link" ng-class="{first:$first}"
-                ng-click="selectResultCallback($event, result)">
+          <div ng-class="{ 'umb-tree-node-checked': result.selected }">
+            <button type="button"
+                    class="btn-reset umb-search-group-item-link"
+                    ng-class="{ first: $first }"
+                    ng-click="selectResultCallback($event, result)">
                 <span class="umb-search-group-item-name">
-                    <umb-icon ng-if="result.selected" icon="icon-check" class="icon umb-tree-icon green sprTree icon-check">
-                    </umb-icon>
-                    <umb-icon ng-if="!result.selected" icon="{{result.icon}}" class="icon umb-tree-icon sprTree {{result.icon}}">
+                    <umb-icon icon="{{result.selected ? 'icon-check' : result.icon}}"
+                              class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check' : result.icon}}">
                     </umb-icon>
                     <span class="umb-search-group-item-name__text">{{ result.name }}</span>
                 </span>