From c2c6413eb7ba78cb64e7c470bbd406ed1156b70d Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 7 Jun 2021 00:27:02 +0200
Subject: [PATCH] Support custom SVG icon in umb-child-selector component
 (#10344)

* Use umb-icon component

* Specify button type attribute

* Use umb-search-filter component

* Adjust styling of item picker

* Replace trash icons with umb-icon

* Replace a few icons in umb-grid-selector as well

* Use umb-icon in datatype picker

* Ensure icons are styles correct in legacy format

* Use umb-icon component in macro parameter editors and fix wrong end closing tag from button element

* Use umb-icon in macro parameter editor overlay
---
 .../src/less/components/card.less             | 117 +++++++++---------
 .../less/components/umb-group-builder.less    |   1 +
 .../datatypepicker/datatypepicker.html        |  42 +++----
 .../macroparameterpicker.html                 |  31 +++--
 .../overlays/itempicker/itempicker.html       |  34 ++---
 .../views/components/umb-child-selector.html  |   8 +-
 .../views/components/umb-grid-selector.html   |  29 +++--
 .../macros/infiniteeditors/parameter.html     |   2 +-
 8 files changed, 133 insertions(+), 131 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less
index 7174c0f290..4e3a8b0d70 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -96,8 +96,6 @@
 }
 
 
-
-
 //Card icon grid for picking items off a card
 .umb-card-grid {
 	padding: 0;
@@ -129,48 +127,74 @@
 }
 
 .umb-card-grid.-three-in-row li {
-	flex: 0 0 33.333%;
-    max-width:33.333%;
+    flex: 0 0 33.333%;
+    max-width: 33.333%;
 
-    i {
+    span > i, // legacy icon
+    .umb-icon {
         font-size: 36px;
-        line-height: 28px;
+        line-height: 1;
     }
 }
 
-.umb-card-grid .umb-card-grid-item {
-    position: relative;
-	display: block;
-    width: 100%;
-    height: 100%;
-    padding: 10px 5px;
-    border-radius: @baseBorderRadius * 2;
-    transition: background-color 120ms;
-    font-size: 13px;
-    line-height: 1.3em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-
-    > span {
+.umb-card-grid {
+    .umb-card-grid-item {
         position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 10px 5px;
+        border-radius: @baseBorderRadius * 2;
+        transition: background-color 120ms;
+        font-size: 13px;
+        line-height: 1.3em;
         display: flex;
-        align-items: center;
-        justify-content: center;
         flex-direction: column;
-        background-color: transparent;
-        word-break: break-word;
+        align-items: center;
+        justify-content: flex-start;
+
+        &__loading {
+            position: absolute;
+            background-color: rgba(255,255,255,0.8);
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        a {
+            color: @ui-option-type;
+            text-decoration: none;
+        }
+
+        > span {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            background-color: transparent;
+            word-break: break-word;
+        }
+
+        &:hover {
+            background-color: @ui-option-hover;
+            color: @ui-option-type-hover;
+        }
+
+        &:focus {
+            color: @ui-option-type-hover;
+        }
     }
-}
 
-
-.umb-card-grid .umb-card-grid-item:hover {
-	background-color: @ui-option-hover;
-	color: @ui-option-type-hover;
-}
-.umb-card-grid .umb-card-grid-item:focus {
-	color: @ui-option-type-hover;
+    span > i, // legacy icon
+    .umb-icon {
+        font-size: 30px;
+        line-height: 1;
+        margin-top: 6px;
+        margin-bottom: 10px;
+        display: block;
+    }
 }
 
 .umb-card-grid .umb-card-grid-item.--creator {
@@ -189,7 +213,6 @@
 	width: 100%;
     padding-top: 100%;
     border-radius: @baseBorderRadius * 2;
-    
     box-sizing: border-box;
     transition: background-color 120ms;
     
@@ -217,30 +240,6 @@
     }
 }
 
-
-.umb-card-grid a {
-    color: @ui-option-type;
-    text-decoration: none;
-}
-
-.umb-card-grid i {
-    font-size: 30px;
-    line-height: 20px;
-    margin-top: 6px;
-    margin-bottom: 10px;
-    display: block;
-}
-
- .umb-card-grid .umb-card-grid-item__loading {
-	 position: absolute;
-	 background-color: rgba(255,255,255,0.8);
-	 top: 0;
-	 right: 0;
-	 bottom: 0;
-	 left: 0;
- }
-
-
 //Round icon-like button - this should be somewhere else
 .umb-btn-round {
 	padding: 4px 6px 4px 6px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index 87e46f5d85..a4a8388861 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -546,6 +546,7 @@ input.umb-group-builder__group-sort-value {
 
         .icon {
             font-size: 32px;
+            line-height: 1;
         }
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
index 3d8e1d4d0b..d19f537354 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
@@ -22,8 +22,7 @@
                         text="Type to search"
                         on-change="vm.searchTermChanged()"
                         css-class="w-100"
-                        auto-focus="true"
-                    >
+                        auto-focus="true">
                     </umb-search-filter>
 
                     <umb-load-indicator ng-if="vm.loading === true"></umb-load-indicator>
@@ -33,14 +32,13 @@
                             <h2 class="h5">{{key | umbCmsTitleCase}}</h2>
                             <ul class="umb-card-grid -six-in-row">
                                 <li ng-repeat="dataType in value | orderBy:'name'" data-element="datatype-{{dataType.name}}">
-                                    <button
-                                        type="button"
-                                        class="btn-reset umb-card-grid-item"
-                                        ng-click="vm.viewOptionsForEditor(dataType)"
-                                        title="{{ dataType.name }}">
+                                    <button type="button"
+                                            class="btn-reset umb-card-grid-item"
+                                            ng-click="vm.viewOptionsForEditor(dataType)"
+                                            title="{{dataType.name}}">
                                         <span>
-                                            <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
-                                            {{ dataType.name }}
+                                            <umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
+                                            {{dataType.name}}
                                         </span>
                                     </button>
                                 </li>
@@ -62,14 +60,13 @@
                                         <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
                                             <div class="umb-button__progress"></div>
                                         </div>
-                                        <button
-                                            type="button"
-                                            class="btn-reset umb-card-grid-item"
-                                            ng-click="vm.pickDataType(dataType)"
-                                            title="{{ dataType.name }}">
+                                        <button type="button"
+                                                class="btn-reset umb-card-grid-item"
+                                                ng-click="vm.pickDataType(dataType)"
+                                                title="{{dataType.name}}">
                                             <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
-                                                {{ dataType.name }}
+                                                <umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
+                                                {{dataType.name}}
                                             </span>
                                         </button>
                                     </li>
@@ -84,14 +81,13 @@
                                 <h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
                                 <ul class="umb-card-grid -six-in-row">
                                     <li ng-repeat="dataType in result.entries | orderBy:'name'">
-                                        <button
-                                            type="button"
-                                            class="btn-reset umb-card-grid-item"
-                                            ng-click="vm.pickEditor(dataType)"
-                                            title="{{ dataType.name }}">
+                                        <button type="button"
+                                                class="btn-reset umb-card-grid-item"
+                                                ng-click="vm.pickEditor(dataType)"
+                                                title="{{dataType.name}}">
                                             <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
-                                                {{ dataType.name }}
+                                                <umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
+                                                {{dataType.name}}
                                             </span>
                                         </button>
                                     </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
index 760c5331b7..7155edf553 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
@@ -24,8 +24,7 @@
                         text="Type to filter..."
                         css-class="w-100"
                         on-change="vm.filterItems()"
-                        auto-focus="true"
-                    >
+                        auto-focus="true">
                     </umb-search-filter>
 
                     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
@@ -36,14 +35,13 @@
                             <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                 <li ng-repeat="parameterEditor in value | orderBy:'name'"
                                     data-element="editor-{{parameterEditor.name}}">
-                                    <button
-                                        type="button"
-                                        ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
-                                        ng-click="vm.pickParameterEditor(parameterEditor)"
-                                        class="btn-reset umb-card-grid-item"
-                                        title="{{parameterEditor.name}}">
+                                    <button type="button"
+                                            ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
+                                            ng-click="vm.pickParameterEditor(parameterEditor)"
+                                            class="btn-reset umb-card-grid-item"
+                                            title="{{parameterEditor.name}}">
                                         <span>
-                                            <i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}" aria-hidden="true"></i>
+                                            <umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}" class="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
                                             {{parameterEditor.name}}
                                         </span>
                                     </button>
@@ -63,17 +61,16 @@
                                             <div ng-if="parameterEditor.loading" class="umb-card-grid-item__loading">
                                                 <div class="umb-button__progress"></div>
                                             </div>
-                                            <button
-                                                type="button"
-                                                ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
-                                                ng-click="vm.pickParameterEditor(parameterEditor)"
-                                                class="btn-reset umb-card-grid-item"
-                                                title="{{parameterEditor.name}}">
+                                            <button type="button"
+                                                    ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
+                                                    ng-click="vm.pickParameterEditor(parameterEditor)"
+                                                    class="btn-reset umb-card-grid-item"
+                                                    title="{{parameterEditor.name}}">
                                                 <span>
-                                                    <i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}" aria-hidden="true"></i>
+                                                    <umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}" class="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
                                                     {{parameterEditor.name}}
                                                 </span>
-                                            </a>
+                                            </button>
                                         </li>
                                     </ul>
                                 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
index 7074497a98..2a31fbd6c4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -1,19 +1,19 @@
 <div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
-    <div class="form-search" ng-if="model.filter !== false" style="margin-bottom: 15px;">
-        <i class="icon-search" aria-hidden="true"></i>
-        <input type="text"
-               ng-model="filter.searchTerm"
-               class="umb-search-field search-query input-block-level -full-width-input"
-               localize="placeholder"
-               placeholder="@placeholders_filter"
-               umb-auto-focus
-               no-dirty-check />
+
+    <div class="mb3" ng-if="model.filter !== false">
+        <umb-search-filter
+            model="filter.searchTerm"
+            label-key="placeholders_filter"
+            text="Type to filter..."
+            css-class="w-100"
+            auto-focus="true">
+        </umb-search-filter>
     </div>
 
     <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
-        <button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
-            <i class="icon-trash" aria-hidden="true"></i>
+        <button type="button" ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
+            <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
         </button>
     </div>
 
@@ -21,7 +21,7 @@
         <li ng-repeat="pasteItem in model.pasteItems | filter:filter.searchTerm">
             <button type="button" class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
                 <span>
-                    <i class="{{ pasteItem.icon }}" aria-hidden="true"></i>
+                    <umb-icon icon="{{pasteItem.icon}}" class="{{pasteItem.icon}}"></umb-icon>
                     {{ pasteItem.name | truncate:true:36 }}
                 </span>
             </button>
@@ -36,16 +36,16 @@
         <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:filter.searchTerm">
             <button type="button" class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
                 <span ng-mouseover="showTooltip(availableItem, $event)" ng-mouseleave="hideTooltip()">
-                    <i class="{{ availableItem.icon }}" aria-hidden="true"></i>
-                    <span>{{ availableItem.name }}</span>
+                    <umb-icon icon="{{availableItem.icon}}" class="{{availableItem.icon}}"></umb-icon>
+                    <span>{{availableItem.name}}</span>
                 </span>
             </button>
         </li>
         <li ng-if="model.createNewItem">
-            <button class="umb-card-grid-item btn-reset --creator" ng-click="model.createNewItem.action()">
+            <button type="button" class="umb-card-grid-item btn-reset --creator" ng-click="model.createNewItem.action()">
                 <span>
-                    <i class="{{ model.createNewItem.icon }}"></i>
-                    {{ model.createNewItem.name }}
+                    <umb-icon icon="{{model.createNewItem.icon}}" class="{{model.createNewItem.icon}}"></umb-icon>
+                    {{model.createNewItem.name}}
                 </span>
             </button>
         </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
index f038b8c4aa..61448f163e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
@@ -3,10 +3,10 @@
     <div class="umb-child-selector__child -parent">
         <div class="umb-child-selector__child-description">
             <div class="umb-child-selector__child-icon-holder">
-                <i class="umb-child-selector__child-icon {{ parentIcon }}" aria-hidden="true"></i>
+                <umb-icon icon="{{parentIcon}}" class="umb-child-selector__child-icon {{parentIcon}}"></umb-icon>
             </div>
             <span class="umb-child-selector__child-name">
-                <strong>{{ parentName }}</strong>
+                <strong>{{parentName}}</strong>
             </span>
             <small>
                 (<localize key="general_current"></localize>)
@@ -19,13 +19,13 @@
         <div class="umb-child-selector__child" ng-repeat="selectedChild in selectedChildren">
             <div class="umb-child-selector__child-description">
                 <div class="umb-child-selector__child-icon-holder">
-                    <i class="umb-child-selector__child-icon {{selectedChild.icon}}" aria-hidden="true"></i>
+                    <umb-icon icon="{{selectedChild.icon}}" class="umb-child-selector__child-icon {{selectedChild.icon}}"></umb-icon>
                 </div>
                 <span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
             </div>
             <div class="umb-child-selector__child-actions">
                 <button type="button" class="umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
-                    <i class="icon-trash" aria-hidden="true"></i>
+                    <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
                 </button>
             </div>
         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
index ae3bbbf699..7f09177707 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
@@ -3,33 +3,42 @@
     <div class="umb-grid-selector__items">
 
         <div class="umb-grid-selector__item -default" ng-if="defaultItem !== null">
+
             <div class="umb-grid-selector__item-content">
-                <i class="umb-grid-selector__item-icon {{ defaultItem.icon }}" aria-hidden="true"></i>
+                <umb-icon icon="{{defaultItem.icon}}" class="{{defaultItem.icon}} umb-grid-selector__item-icon"></umb-icon>
                 <div class="umb-grid-selector__item-label">{{ defaultItem.name }}</div>
                 <div ng-show="defaultItem.id"><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="openTemplate(defaultItem)"><localize key="general_open">Open</localize></button></div>
                 <span class="umb-grid-selector__item-default-label">(<localize key="general_default">Default</localize> {{itemLabel}})</span>
-            </div>            
-            <i class="umb-grid-selector__item-remove icon-trash" ng-if="selectedItems.length === 1" ng-click="removeDefaultItem()" aria-role="button">
+            </div>
+
+            <button type="button" class="btn-reset" ng-if="selectedItems.length === 1" ng-click="removeDefaultItem()">
+                <umb-icon icon="icon-trash" class="icon-trash umb-grid-selector__item-remove"></umb-icon>
                 <span class="sr-only">Remove Template</span>
-            </i>
+            </button>
+
         </div>
 
         <div class="umb-grid-selector__item" ng-repeat="selectedItem in selectedItems | filter: { alias:'!'+defaultItem.alias }:true">
+
             <div class="umb-grid-selector__item-content">
-                <i class="umb-grid-selector__item-icon {{ selectedItem.icon }}" aria-hidden="true"></i>
+                <umb-icon icon="{{selectedItem.icon}}" class="{{selectedItem.icon}} umb-grid-selector__item-icon"></umb-icon>
+
                 <div class="umb-grid-selector__item-label">{{ selectedItem.name }}</div>
                 <div><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="openTemplate(selectedItem)"><localize key="general_open">Open</localize></button></div>
                 <div><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="setAsDefaultItem(selectedItem)"><localize key="grid_setAsDefault">Set as default</localize></button></div>
             </div>
-            <i class="umb-grid-selector__item-remove icon-trash" ng-click="removeItem(selectedItem)" aria-role="button">
+
+            <button type="button" class="btn-reset" ng-click="removeItem(selectedItem)">
+                <umb-icon icon="icon-trash" class="icon-trash umb-grid-selector__item-remove"></umb-icon>
                 <span class="sr-only">Remove Template</span>
-            </i>
+            </button>
+
         </div>
 
-        <button class="umb-grid-selector__item -placeholder" ng-if="(availableItems | compareArrays:selectedItems:'alias').length > 0" ng-click="openItemPicker($event)" hotkey="alt+shift+g">
+        <button type="button" class="umb-grid-selector__item -placeholder" ng-if="(availableItems | compareArrays:selectedItems:'alias').length > 0" ng-click="openItemPicker($event)" hotkey="alt+shift+g">
             <div class="umb-grid-selector__item-content">
-                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem !== null"><localize key="grid_chooseExtra">Choose extra</localize> {{ itemLabel }}</div>
-                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem === null"><localize key="grid_chooseDefault">Choose default</localize> {{ itemLabel }}</div>
+                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem !== null"><localize key="grid_chooseExtra">Choose extra</localize> {{itemLabel}}</div>
+                <div class="umb-grid-selector__item-label -blue" ng-if="defaultItem === null"><localize key="grid_chooseDefault">Choose default</localize> {{itemLabel}}</div>
             </div>
         </button>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html b/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
index 8a915be57b..ca3df1d4eb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
+++ b/src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
@@ -49,7 +49,7 @@
 
                             <button type="button" class="btn-reset editor-info" ng-click="vm.openMacroParameterPicker(model.parameter)">
                                 <div class="editor-icon-wrapper">
-                                    <i class="icon {{ model.parameter.dataTypeIcon }}" ng-class="{'icon-autofill': model.parameter.dataTypeIcon == null}" aria-hidden="true"></i>
+                                    <umb-icon icon="{{model.parameter.dataTypeIcon || 'icon-autofill'}}" class="icon {{model.parameter.dataTypeIcon || 'icon-autofill'}}"></umb-icon>
                                 </div>
 
                                 <div class="editor-details">