Macropicker: Change search to use umb-search-filter directive (#9041)

* Change search to use umb-search-filter

* Fix minor issues in main directive and styling issues with width

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

@@ -1,20 +1,21 @@
 html .umb-search-filter {
     position: relative;
     height: 30px;
+    width: 190px;
+
+    &.w-100 {
+        width: 100%;
+    }
+
+    &.mb-15 {
+        margin-bottom: 15px;
+    }
 
     &__input {
         padding-left: 30px;
         padding-right: 6px;
-        width: 190px;
+        width: inherit;
         margin: 0;
-
-        &.w-100 {
-            width: 100%;
-        }
-
-        &.mb-15 {
-            margin-bottom: 15px;
-        }
     }
 
     .icon-search {

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

@@ -23,6 +23,7 @@
                             model="searchTerm"
                             label-key="placeholders_filter"
                             text="Type to filter..."
+                            css-class="w-100"
                             auto-focus="true">
                         </umb-search-filter>
 

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

@@ -23,6 +23,7 @@
                         model="searchTerm"
                         label-key="placeholders_filter"
                         text="Type to filter..."
+                        css-class="w-100"
                         auto-focus="true">
                     </umb-search-filter>
                 </div>

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

@@ -17,17 +17,14 @@
 
                         <div ng-switch-when="macroSelect" class="macro-select">
 
-                            <div class="form-search">
-                                <i class="icon-search"></i>
-                                <input type="text"
-                                        style="width: 100%"
-                                        ng-model="searchTerm"
-                                        class="umb-search-field search-query input-block-level"
-                                        localize="placeholder"
-                                        placeholder="@placeholders_filter"
-                                        umb-auto-focus
-                                        no-dirty-check />
-                            </div>
+                            <umb-search-filter
+                                input-id="macro-search"
+                                model="searchTerm"
+                                label-key="placeholders_filter"
+                                text="Type to filter..."
+                                css-class="w-100 mb-15"
+                                auto-focus="true">
+                            </umb-search-filter>
 
                             <ul class="umb-card-grid -three-in-row">
                                 <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm">

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

@@ -1,5 +1,5 @@
 <div class="umb-control-group -no-border">
-    <div class="umb-search-filter">
+    <div class="umb-search-filter" ng-class="vm.cssClass">
         <label for="{{vm.inputId}}" class="sr-only">{{vm.text}}</label>
         <umb-icon icon="icon-search" class="icon-search"></umb-icon>
         <input
@@ -8,7 +8,7 @@
                 type="text"
                 ng-change="vm.change()"
                 ng-model="vm.model"
-                class="umb-search-filter__input {{vm.cssClass}}"
+                class="umb-search-filter__input"
                 placeholder="{{vm.text}}"
                 umb-auto-focus="{{vm.autoFocus === true}}"
                 prevent-enter-submit