NAS-132132: Inputs | clear icon is too big (#11000)

truenas · Nov 12, 2024 · 21520fe · 21520fe
1 parent 3293f5b
commit 21520fe
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/src/app/modules/forms/search-input/components/advanced-search/advanced-search.component.scss b/src/app/modules/forms/search-input/components/advanced-search/advanced-search.component.scss
@@ -56,11 +56,17 @@
 }
 
 .reset-icon {
-  margin-top: 2px;
+  margin-top: 4px;
 
   .ix-icon {
     margin-left: 9px;
     margin-right: 4px;
+    width: 16px;
+
+    &:focus {
+      box-shadow: 0 0 0 1.5px var(--focus-bg) inset;
+      outline-width: 0;
+    }
   }
 }
 

diff --git a/src/app/modules/forms/search-input/components/basic-search/basic-search.component.scss b/src/app/modules/forms/search-input/components/basic-search/basic-search.component.scss
@@ -49,6 +49,12 @@
   .ix-icon {
     margin-left: 9px;
     margin-right: 4px;
+    width: 16px;
+
+    &:focus {
+      box-shadow: 0 0 0 1.5px var(--focus-bg) inset;
+      outline-width: 0;
+    }
   }
 }
 

diff --git a/src/app/modules/forms/search-input1/search-input1.component.html b/src/app/modules/forms/search-input1/search-input1.component.html
@@ -18,6 +18,6 @@
     class="reset-icon reset-input"
     (click)="onResetInput();"
   >
-    <ix-icon name="mdi-close-circle"></ix-icon>
+    <ix-icon tabindex="0" name="mdi-close-circle" (keydown.enter)="onResetInput()"></ix-icon>
   </span>
 }
diff --git a/src/app/modules/forms/search-input1/search-input1.component.scss b/src/app/modules/forms/search-input1/search-input1.component.scss
@@ -58,6 +58,12 @@
 
 .reset-icon {
   .ix-icon {
-    margin-right: 4px;
+    margin-right: 8px;
+    width: 16px;
+
+    &:focus {
+      box-shadow: 0 0 0 1.5px var(--focus-bg) inset;
+      outline-width: 0;
+    }
   }
 }