Improve docs search field - add clear button and keep it stickey

Author: ethanshar

uilib-docs/src/components/navbar/index.js

@@ -1,12 +1,11 @@
 import React, {Component} from 'react';
 import {StaticQuery, graphql} from 'gatsby';
-
-import PropTypes from 'prop-types';
-import Link from 'gatsby-link';
+import classnames from 'classnames';
 import _ from 'lodash';
 
 import './index.scss';
 import searchIcon from '../../images/search.svg';
+import clearIcon from '../../images/delete.svg';
 import Item from './item';
 
 class Navbar extends Component {
@@ -18,6 +17,10 @@ class Navbar extends Component {
     this.setState({filter: value});
   };
 
+  resetSearch = () => {
+    this.setState({filter: ''});
+  };
+
   getCurrentPage = () => {
     if (typeof window !== 'undefined') {
       const path = window.location.href;
@@ -49,6 +52,26 @@ class Navbar extends Component {
     return filteredComponents;
   }
 
+  renderSearch = () => {
+    const {filter} = this.state;
+    const clearButtonClassName = classnames('clear-button', {
+      hidden: _.isEmpty(filter)
+    });
+    return (
+      <div className="search">
+        <img src={searchIcon} />
+        <input
+          placeholder="Search..."
+          onChange={this.setFilter}
+          value={filter}
+        />
+        <button className={clearButtonClassName} onClick={this.resetSearch}>
+          <img src={clearIcon} />
+        </button>
+      </div>
+    );
+  };
+
   renderNavbar = data => {
     const currentPage = this.getCurrentPage();
     const {filter} = this.state;
@@ -66,10 +89,7 @@ class Navbar extends Component {
 
     return (
       <div className="navbar">
-        <div className="search">
-          <img src={searchIcon} />
-          <input placeholder="Search..." onChange={this.setFilter} />
-        </div>
+        {this.renderSearch()}
         <ul>
           {_.map(markdowns, page => {
             return <Item id={page.title} link={page.path} />;

uilib-docs/src/components/navbar/index.scss

@@ -11,6 +11,9 @@
   border-radius: 2px;
 
   .search {
+    position: sticky;
+    top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     padding: 10px;
@@ -20,6 +23,8 @@
     width: 100%;
     transition: width 0.3s;
     border-radius: 2px;
+    z-index: 10;
+    overflow: hidden;
 
     &:focus-within {
       width: 100%;
@@ -30,9 +35,32 @@
       height: 16px;
     }
 
+    .clear-button {
+      border: 0;
+      padding: 5px;
+      background: transparent;
+      background: $dark60;
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &.hidden {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      > img {
+        height: 14px;
+      }
+    }
+
     input {
       background: transparent;
       color: $dark10;
+      width: 100%;
       flex: 1;
       display: inline-block;
       margin-left: 10px;