styling

src/containers/FindBar.css

@@ -1,31 +1,33 @@
-.root {
+:root {
-  width: 350px;
+  --foregroundColor: #222;
+  --backgroundColor: #eaeaea;
+  --highlightFGColor: #000;
+  --highlightBGColor: #d2dee4;
 }
 
 .inputArea {
   display: table;
   width: 100%;
-  border: 1px solid #ddd;
+  color: var(--foregroundColor);
-  border-radius: 3px;
+  border: 1px solid var(--backgroundColor);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
 }
 
 .inputScope {
   display: table-cell;
   width: 1%;
-  padding-right: 6px;
+  padding: 6px 6px 6px 8px;
-  padding-left: 8px;
   color: #767676;
+  font-size: 16px;
   white-space: nowrap;
   vertical-align: middle;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--backgroundColor);
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
 }
 
 .inputField {
   display: table-cell;
   width: 99%;
+  padding: 6px;
+  font-size: 16px;
   background: none transparent;
   border: 0 none;
   box-shadow: none;
@@ -34,34 +36,43 @@
 }
 
 .menu {
-  border-radius: 3px;
+  display: table;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  width: 100%;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--backgroundColor);
-  padding: 2px 0;
+  font-size: 13px;
-  width: 350px;
+  padding: 10px;
   height: 100%;
 }
 
+.suggestions {
+  display: table-cell;
+  width: 50%;
+  padding-right: 10px;
+}
+
+.hitory {
+  display: table-cell;
+  width: 50%;
+}
+
 .command {
-  padding: 2px 6px;
+  padding: 6px;
   cursor: default;
 }
 
 .command .faded {
-  font-style: italic;
   font-weight: lighter;
   color: #555;
 }
 
 .highlightedCommand {
-  color: white;
+  color: var(--highlightFGColor);
-  background: hsl(200, 50%, 50%);
+  background: var(--highlightBGColor);
-  padding: 2px 6px;
+  padding: 6px;
   cursor: default;
 }
 
 .highlightedCommand .faded {
-  font-style: italic;
   font-weight: lighter;
-  color: #ddd;
+  color: #282c34;
 }

src/containers/FindBar.js

@@ -13,7 +13,7 @@ class FindBar extends Component {
   constructor(props) {
     super(props);
     this._compiledCommands = [];
-    this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' } };
+    this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' }, token: SEARCH };
     this.state = {
       value: '',
       placeholder: PLACEHOLDER,
@@ -102,7 +102,8 @@ class FindBar extends Component {
         activeScope: SEARCH,
         placeholder: ''
       });
-      this.props.dispatch(runCommand('search', { searchTerm: enteredParamValue }));
+
+      enteredParamValue && this.props.dispatch(runCommand('search', { searchTerm: enteredParamValue }));
     } else if (command.param && !enteredParamValue) {
       // Partial Match
       // Command was partially matched: It requires a param, but param wasn't entered
@@ -143,14 +144,10 @@ class FindBar extends Component {
       extract: el => el.token
     });
 
-    let returnResults;
+    const returnResults = results.slice(0, 4).map(result => (
-    if (value.length > 0) {
+      Object.assign({}, result.original, { string:result.string }
-      returnResults = results.slice(0, 4).map(result => Object.assign({}, result.original, { string:result.string }));
+    )));
-      returnResults.push(this._searchCommand);
+    returnResults.push(this._searchCommand);
-    }
-    else {
-      returnResults = results.slice(0, 5).map(result => Object.assign({}, result.original, { string:result.string }));
-    }
 
     return returnResults;
   }
@@ -270,35 +267,43 @@ class FindBar extends Component {
 
   renderMenu() {
     const commands = this.getSuggestions().map((command, index) => {
+      let children;
       if (!command.search) {
-        return (
+        children = (
-          <div
+          <span><Icon type="right-open-mini"/><span dangerouslySetInnerHTML={{__html: command.string}} /></span>
-              className={this.state.highlightedIndex === index ? styles.highlightedCommand : styles.command}
-              key={command.token.trim().replace(/[^a-z0-9]+/gi, '-')}
-              onMouseDown={() => this.setIgnoreBlur(true)}
-              onMouseEnter={() => this.highlightCommandFromMouse(index)}
-              onClick={() => this.selectCommandFromMouse(command)}
-          >
-            <Icon type="right-open-mini"/>
-            <span dangerouslySetInnerHTML={{__html: command.string}} />
-          </div>
         );
       } else {
-        return (
+        children = (
-          <div
+          <span>
-              className={this.state.highlightedIndex === index ? styles.highlightedCommand : styles.command}
+          {this.state.value.length === 0 ?
-              key='builtin-search'
+            <span><Icon type="search"/>Search... </span> :
-              onMouseDown={() => this.setIgnoreBlur(true)}
+            <span className={styles.faded}><Icon type="search"/>Search for: </span>
-              onMouseEnter={() => this.highlightCommandFromMouse(index)}
+          }
-              onClick={() => this.selectCommandFromMouse(command)}
+          {this.state.value}</span>
-          >
-            <span className={styles.faded}><Icon type="search"/> Search for: </span>{this.state.value}
-          </div>
         );
       }
+      return (
+        <div
+            className={this.state.highlightedIndex === index ? styles.highlightedCommand : styles.command}
+            key={command.token.trim().replace(/[^a-z0-9]+/gi, '-')}
+            onMouseDown={() => this.setIgnoreBlur(true)}
+            onMouseEnter={() => this.highlightCommandFromMouse(index)}
+            onClick={() => this.selectCommandFromMouse(command)}
+        >
+          {children}
+        </div>
+      );
     });
-
+    return commands.length === 0 ? null : (
-    return commands.length > 0 ? <div className={styles.menu} children={commands} /> : null;
+      <div className={styles.menu}>
+        <div className={styles.suggestions}>
+          { commands }
+        </div>
+        <div className={styles.history}>
+          Your past searches and commands
+        </div>
+      </div>
+    );
   }
 
   renderActiveScope() {
@@ -313,7 +318,7 @@ class FindBar extends Component {
     const menu = this.state.isOpen && this.renderMenu();
     const scope = this.state.activeScope && this.renderActiveScope();
     return (
-      <div className={styles.root}>
+      <div>
         <label className={styles.inputArea}>
           {scope}
           <input

src/containers/stories/FindBar.js

@@ -13,10 +13,17 @@ const commands = [
   { pattern: 'Go to Settings' },
 ];
 
+const style = {
+  width: 800,
+  margin: 20
+};
+
 storiesOf('FindBar', module)
   .add('Default View', () => (
-    <FindBar
+    <div style={style}>
-        commands={commands}
+      <FindBar
-        dispatch={action('DISPATCH')}
+          commands={commands}
-    />
+          dispatch={action('DISPATCH')}
+      />
+    </div>
   ));