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/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;
+        }
 
-.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 {
+            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;
+        }
+    }
+
+    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;

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;
         }
     }
 

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 @@ <h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
                                         <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 @@ <h2 class="h5 -border-bottom -black">
                                 <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>

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 @@ <h5>{{key}}</h5>
                             <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 @@ <h5>{{result.group}}</h5>
                                             <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>

src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html

@@ -1,27 +1,27 @@
 <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>
 
     <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 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 @@ <h5><localize key="content_createEmpty">Create new</localize></h5>
         <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>

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>