Merge pull request #1177 from prymitive/input-focus-bg

feat(ui): change filter background color on focus

ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap

@@ -44,7 +44,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
       </div>
     </div>
   </div>
-  <div class=\\"input-group-append\\">
+  <div class=\\"input-group-append bg-transparent\\">
     <button class=\\"input-group-text border-left-0 border-right-0 border-top-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
             type=\\"button\\"
             data-toggle=\\"dropdown\\"

ui/src/Components/NavBar/FilterInput/index.js

@@ -20,7 +20,7 @@ import { FilterInputLabel } from "Components/Labels/FilterInputLabel";
 import { AutosuggestTheme } from "./Constants";
 import { History } from "./History";
 
-import "./index.css";
+import "./index.scss";
 
 const FilterInput = observer(
   class FilterInput extends Component {
@@ -35,6 +35,7 @@ const FilterInput = observer(
         suggestions: [],
         suggestionsFetch: null,
         value: "",
+        focused: false,
         storeInputReference(ref) {
           this.ref = ref;
         }
@@ -107,6 +108,14 @@ const FilterInput = observer(
       }
     };
 
+    onFocus = action(() => {
+      this.inputStore.focused = true;
+    });
+
+    onBlur = action(() => {
+      this.inputStore.focused = false;
+    });
+
     renderSuggestion = (suggestion, { query, isHighlighted }) => {
       return (
         <Highlight
@@ -144,15 +153,23 @@ const FilterInput = observer(
         >
           <div className="input-group w-100 mr-2">
             <div className="input-group-prepend">
-              <span className="input-group-text px-2 border-left-0 border-right-0 border-top-0 rounded-0 bg-transparent text-white">
+              <span
+                className={`input-group-text px-2 border-left-0 border-right-0 border-top-0 rounded-0 ${
+                  this.inputStore.focused ? "bg-focused" : "bg-transparent"
+                } text-white`}
+              >
                 <FontAwesomeIcon icon={faSearch} />
               </span>
             </div>
             <div
-              className="form-control components-filterinput border-left-0 border-right-0 border-top-0 rounded-0 bg-transparent"
+              className={`form-control components-filterinput border-left-0 border-right-0 border-top-0 rounded-0 ${
+                this.inputStore.focused ? "bg-focused" : "bg-transparent"
+              }`}
               onClick={event => {
                 this.onInputClick(this.inputStore.ref, event);
               }}
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
             >
               {alertStore.filters.values.map(filter => (
                 <FilterInputLabel
@@ -180,7 +197,11 @@ const FilterInput = observer(
                 theme={AutosuggestTheme}
               />
             </div>
-            <div className="input-group-append">
+            <div
+              className={`input-group-append ${
+                this.inputStore.focused ? "bg-focused" : "bg-transparent"
+              }`}
+            >
               <History alertStore={alertStore} settingsStore={settingsStore} />
             </div>
           </div>

ui/src/Components/NavBar/FilterInput/index.scss

@@ -1,9 +1,12 @@
+@import "src/Theme.scss";
+
 .form-control.components-filterinput {
   cursor: text;
   height: auto;
   min-height: 2.6rem;
 
   box-shadow: none;
+  background-clip: unset;
 
   padding-top: 1px;
   padding-bottom: 1px;
@@ -25,3 +28,9 @@ input.components-filterinput-wrapper {
   margin-top: 2px;
   margin-bottom: 2px;
 }
+
+.form-control.bg-focused,
+.input-group-text.bg-focused,
+.input-group-append.bg-focused {
+  background-color: lighten($blue, 5%);
+}

ui/src/Components/NavBar/FilterInput/index.test.js

@@ -121,6 +121,20 @@ describe("<FilterInput />", () => {
     expect(inputSpy).not.toHaveBeenCalled();
   });
 
+  it("focusing input changes background color", () => {
+    const tree = MountedInput();
+    const formControl = tree.find(".form-control");
+    formControl.find("input").simulate("focus");
+    expect(toDiffableHtml(tree.html())).toMatch(/bg-focused/);
+  });
+
+  it("bluring input changes background color", () => {
+    const tree = MountedInput();
+    const formControl = tree.find(".form-control");
+    formControl.find("input").simulate("blur");
+    expect(toDiffableHtml(tree.html())).not.toMatch(/bg-focused/);
+  });
+
   it("componentDidMount executes even when inputStore.ref=null", () => {
     const tree = MountedInput();
     const instance = tree.instance();