Merge pull request #8916 from vvlladd28/improvement/unit-input/clear-on-hover

Added on unit input to show the clear button when hovering the element

ui-ngx/src/app/shared/components/unit-input.component.html

@@ -15,13 +15,14 @@
     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()"
          [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>

ui-ngx/src/form.scss

@@ -224,6 +224,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;
@@ -274,6 +287,22 @@
         }
       }
     }
+    &.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: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
   }
 
   .tb-form-table {