umb-search-filter: Convert i to use umb-icon (#9037)

* Conver i to new umb-icon directive

* Extend directive to accept css class modifiers

* Add "scoped" styling for the directive to avoid issues with CSS modifiers when used in other contexts

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js

@@ -75,7 +75,8 @@
             labelKey: "@?",
             onChange: "&?",
             autoFocus: "<?",
-            preventSubmitOnEnter: "<?"
+            preventSubmitOnEnter: "<?",
+            cssClass: "@?"
         }
     };
 

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -177,6 +177,7 @@
 @import "components/umb-range-slider.less";
 @import "components/umb-number.less";
 @import "components/umb-tags-editor.less";
+@import "components/umb-search-filter.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less

@@ -0,0 +1,28 @@
+html .umb-search-filter {
+    position: relative;
+    height: 30px;
+
+    &__input {
+        padding-left: 30px;
+        padding-right: 6px;
+        width: 190px;
+        margin: 0;
+
+        &.w-100 {
+            width: 100%;
+        }
+
+        &.mb-15 {
+            margin-bottom: 15px;
+        }
+    }
+
+    .icon-search {
+        color: #d8d7d9;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 10px;
+        margin: auto 0;
+    }
+}

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html

@@ -21,6 +21,7 @@
                         label-key="placeholders_search"
                         text="Type to search"
                         on-change="vm.searchTermChanged()"
+                        css-class="w-100"
                         auto-focus="true"
                     >
                     </umb-search-filter>

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html

@@ -22,6 +22,7 @@
                         model="vm.searchTerm"
                         label-key="placeholders_filter"
                         text="Type to filter..."
+                        css-class="w-100"
                         on-change="vm.filterItems()"
                         auto-focus="true"
                     >

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html

@@ -1,14 +1,14 @@
 <div class="umb-control-group -no-border">
-    <div class="form-search form-search-filter">
+    <div class="umb-search-filter">
         <label for="{{vm.inputId}}" class="sr-only">{{vm.text}}</label>
-        <i class="icon-search" aria-hidden="true"></i>
+        <umb-icon icon="icon-search" class="icon-search"></umb-icon>
         <input
                 ng-if="vm.preventSubmitOnEnter"
                 id="{{vm.inputId}}"
                 type="text"
                 ng-change="vm.change()"
                 ng-model="vm.model"
-                class="umb-search-field search-query search-input input-block-level"
+                class="umb-search-filter__input {{vm.cssClass}}"
                 placeholder="{{vm.text}}"
                 umb-auto-focus="{{vm.autoFocus === true}}"
                 prevent-enter-submit
@@ -20,7 +20,7 @@
                 type="text"
                 ng-change="vm.change()"
                 ng-model="vm.model"
-                class="umb-search-field search-query search-input input-block-level"
+                class="umb-search-filter__input {{vm.cssClass}}"
                 placeholder="{{vm.text}}"
                 umb-auto-focus="{{vm.autoFocus === true}}"
                 no-dirty-check />

src/Umbraco.Web.UI.Client/src/views/dashboard/content/redirecturls.html

@@ -30,7 +30,7 @@
 
             <umb-editor-sub-header-section ng-if="vm.dashboard.urlTrackerDisabled === false">
 
-                <ng-form class="form-search -no-margin-bottom pull-right" novalidate>
+                <ng-form novalidate>
                     <div class="inner-addon left-addon">
                         <umb-search-filter
                             input-id="redirect-search"