Fleet UI: Add hover/focus state to icon and border of label filter search (#13299)

2023-08-11 15:47:45 -04:00
parent a3b47c1877
commit 6010f06c9c
2 changed files with 11 additions and 2 deletions
@@ -61,7 +61,6 @@ const CustomLabelGroupHeading = (
        </div>
      </div>
      <div className={`${baseClass}__field`}>
-        <Icon name="search" />
        <input
          className={`${baseClass}__input`}
          ref={inputRef}
@@ -77,6 +76,7 @@ const CustomLabelGroupHeading = (
          onClick={handleInputClick}
          onBlur={onBlurLabelSearchInput}
        />
+        <Icon name="search" />
      </div>
    </components.GroupHeading>
  );
@@ -48,9 +48,18 @@
      color: $ui-fleet-black-50;
    }

-    &:focus {
+    &:focus,
+    &:hover {
      outline: none;
      border-color: $core-vibrant-blue;
+
+      + .icon {
+        svg {
+          path {
+            fill: $core-vibrant-blue;
+          }
+        }
+      }
    }

    &--disabled {