From e5c99cf92f7f79f263573841bd6026bed2955371 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 11 Jul 2023 14:55:52 +0300
Subject: [PATCH 1/2] UI: Added on unit input to show the clear button when
 hovering the element

---
 .../shared/components/unit-input.component.html   |  2 +-
 ui-ngx/src/form.scss                              | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index dee26af8d0..141ab322d4 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field appearance="outline" class="tb-inline-field" subscriptSizing="dynamic">
+<mat-form-field appearance="outline" class="tb-inline-field tb-suffix-show-on-hover" subscriptSizing="dynamic">
   <input matInput #unitInput [formControl]="unitsFormControl"
          placeholder="{{ 'widget-config.set' | translate }}"
          (focusin)="onFocus()"
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 1f27e59279..35eb7782fe 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -268,6 +268,21 @@
         }
       }
     }
+    &.tb-suffix-show-on-hover {
+      .mat-mdc-text-field-wrapper {
+        .mat-mdc-form-field-icon-suffix {
+          padding: 0;
+          display: none;
+        }
+      }
+      &:hover {
+        .mat-mdc-text-field-wrapper {
+          .mat-mdc-form-field-icon-suffix {
+            display: block;
+          }
+        }
+      }
+    }
   }
 
   .tb-form-table {

From 1e7b205cc90fc54c6533360a87524873ab43edc9 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 12 Jul 2023 15:14:42 +0300
Subject: [PATCH 2/2] UI: Fixed style in clear button for unit input

---
 .../shared/components/unit-input.component.html  |  1 +
 ui-ngx/src/form.scss                             | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index 141ab322d4..3686796dbf 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -22,6 +22,7 @@
          [matAutocomplete]="unitsAutocomplete">
   <button *ngIf="unitsFormControl.value && !disabled"
           type="button"
+          class="tb-icon-24"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 35eb7782fe..eaec6a7f43 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -218,6 +218,19 @@
               height: 20px;
               font-size: 20px;
             }
+            .mat-mdc-button-touch-target {
+              width: 40px;
+              height: 40px;
+            }
+            &.tb-icon-24 {
+              width: 24px;
+              height: 24px;
+              padding: 0;
+              .mat-mdc-button-touch-target {
+                width: 24px;
+                height: 24px;
+              }
+            }
           }
           > .mat-icon {
             width: 20px;
@@ -278,7 +291,8 @@
       &:hover {
         .mat-mdc-text-field-wrapper {
           .mat-mdc-form-field-icon-suffix {
-            display: block;
+            display: flex;
+            align-items: center;
           }
         }
       }