From 820952561127bb79910928652cf59ee15ea6fbde Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 27 Jul 2021 15:49:16 +0200
Subject: [PATCH] Modernize mini listview component to use svg icons and
 `umb-search-filter` component (#10740)

---
 .../src/less/components/umb-mini-search.less  | 13 ++++-----
 .../views/components/umb-mini-list-view.html  | 28 +++++++++----------
 .../src/views/components/umb-mini-search.html |  2 +-
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
index ec598c17eb..e4eb8f8235 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
@@ -4,13 +4,12 @@
 
     .icon {
         position: absolute;
-        width: 30px;
-        height: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
-        margin: 1px;
-        padding: 0;
+        font-size: 20px;
+        margin: 5px;
+        padding: 1px;
         pointer-events: none;
         color: @ui-action-discreet-type;
         transition: color .1s linear;
@@ -30,6 +29,7 @@
         .icon {
             color: @ui-action-discreet-type-hover;
         }
+
         input {
             color: @ui-action-discreet-border-hover;
             border-color: @ui-action-discreet-border-hover;
@@ -42,10 +42,9 @@
         border-color: @ui-action-discreet-border-hover;
         cursor: unset;
     }
-    
+
     input:focus, &:focus-within input, &.--has-value input {
         width: 190px;
-        padding-left:30px;
+        padding-left: 30px;
     }
-
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
index e2319f099d..dfd6f9002c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
@@ -5,14 +5,14 @@
         ng-repeat="miniListView in miniListViews">
 
         <div class="umb-mini-list-view__title">
-            <i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}" aria-hidden="true"></i>
+            <umb-icon icon="{{miniListView.node.icon}}" class="{{miniListView.node.icon}} umb-mini-list-view__title-icon"></umb-icon>
             <h4 class="umb-mini-list-view__title-text">{{ miniListView.node.name }}</h4>
         </div>
 
         <div class="umb-mini-list-view__breadcrumb">
 
             <button type="button" ng-if="showBackButton()" class="btn-reset umb-mini-list-view__back" ng-click="exitMiniListView()">
-                <i class="icon-arrow-left umb-mini-list-view__back-icon" aria-hidden="true"></i>
+                <umb-icon icon="icon-arrow-left" class="icon-arrow-left umb-mini-list-view__back-icon"></umb-icon>
                 <span class="umb-mini-list-view__back-text"><localize key="general_back">Back</localize></span> /
             </button>
 
@@ -32,19 +32,17 @@
                 <div class="umb-table-row">
                     <div class="umb-table-cell no-display"></div>
                     <div class="umb-table-cell umb-table-cell-padding">
-                        <form class="form-search -no-margin-bottom" novalidate>
-                            <div class="inner-addon left-addon">
-                                <i class="icon icon-search" aria-hidden="true"></i>
-                                <input
-                                    class="form-control search-input"
-                                    type="text"
-                                    localize="placeholder"
-                                    placeholder="@general_typeToSearch"
-                                    ng-model="search"
-                                    ng-change="searchMiniListView(search, miniListView)"
-                                    prevent-enter-submit
-                                    umb-auto-focus
-                                    no-dirty-check>
+                        <form class="flex w-100 -no-margin-bottom" novalidate>
+                            <div class="flex-auto">
+                                <umb-search-filter
+                                    input-id="mini-listview-search"
+                                    model="search"
+                                    label-key="general_typeToSearch"
+                                    text="Type to search..."
+                                    on-change="searchMiniListView(search, miniListView)"
+                                    css-class="w-100 mb-15"
+                                    auto-focus="true">
+                                </umb-search-filter>
                             </div>
                         </form>
                     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html
index 3c95dbae5b..b69071d4e4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html
@@ -1,5 +1,5 @@
 <ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
-    <i class="icon icon-search" aria-hidden="true"></i>
+    <umb-icon icon="icon-search" class="icon icon-search"></umb-icon>
     <input type="text"
            class="form-control search-input"
            localize="placeholder,label"