From 4dfc75cfff0d05ddb383970356cd00172496ea07 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Mon, 12 Oct 2020 13:23:26 +0200
Subject: [PATCH] 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
---
 .../less/components/umb-search-filter.less    | 19 ++++++++++---------
 .../compositions/compositions.html            |  1 +
 .../iconpicker/iconpicker.html                |  1 +
 .../macropicker/macropicker.html              | 19 ++++++++-----------
 .../components/forms/umb-search-filter.html   |  4 ++--
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less
index 150fcea6c5..bda9fa7a7e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less
+++ b/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 {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
index b247ef7e31..8060605b87 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
+++ b/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>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index a0f7ab0749..7368d2f39b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
index 8a98e30883..33d7a471a5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
+++ b/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">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html
index 07e28c5a1c..d6fde29090 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html
+++ b/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