From 50f79525145cb5cc4b814ba91cda7f70dcdc57ff Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Mon, 12 Oct 2020 10:22:17 +0200
Subject: [PATCH] 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
---
 .../forms/umbsearchfilter.directive.js        |  3 +-
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../less/components/umb-search-filter.less    | 28 +++++++++++++++++++
 .../datatypepicker/datatypepicker.html        |  1 +
 .../macroparameterpicker.html                 |  1 +
 .../components/forms/umb-search-filter.html   |  8 +++---
 .../views/dashboard/content/redirecturls.html |  2 +-
 7 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
index 7929316275..efbc384cb4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
@@ -75,7 +75,8 @@
             labelKey: "@?",
             onChange: "&?",
             autoFocus: "<?",
-            preventSubmitOnEnter: "<?"
+            preventSubmitOnEnter: "<?",
+            cssClass: "@?"
         }
     };
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 01e595ac24..359c3dd427 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/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";
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
new file mode 100644
index 0000000000..150fcea6c5
--- /dev/null
+++ b/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;
+    }
+}
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 14b82892e7..3d8e1d4d0b 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
@@ -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>
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 151a8167e8..760c5331b7 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
@@ -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"
                     >
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 0879f9b72c..07e28c5a1c 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,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 />
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/content/redirecturls.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/content/redirecturls.html
index 5684b54708..e93f770da0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/content/redirecturls.html
+++ b/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"