Functionality to clear input from sidenav search and icon gallery search

src/components/FeatherIcon.js

@@ -18,7 +18,7 @@ const FeatherIcon = ({ className, name, size = '1em' }) => {
   ) : null;
 };
 
-// Icons from https://feathericons.com/
+// Icons from
 const ICONS = {
   'book-open': (
     <>
@@ -97,6 +97,12 @@ const ICONS = {
       <polyline points="16 16 12 12 8 16" />
     </>
   ),
+  x: (
+    <>
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

src/components/IconGallery.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styles from './IconGallery.module.scss';
 import IconReference from './IconReference';
+import SearchInput from './SearchInput';
 
 const IconGallery = () => {
   if (typeof window === 'undefined') global.window = {};
@@ -22,13 +23,12 @@ const IconGallery = () => {
       <h2>Icon Gallery</h2>
 
       <form className={styles.iconFilter}>
-        <input
+        <SearchInput
           className={styles.search}
-          type="text"
-          name="filter"
           placeholder="Filter icons by name"
-          value={search}
+          onClear={() => setSearch('')}
           onChange={(e) => setSearch(e.target.value)}
+          value={search}
         />
       </form>
 

src/components/IconGallery.module.scss

@@ -5,7 +5,7 @@
 
 .search {
   width: 60%;
-  padding: 0.75rem 1rem;
+  margin: 1rem 0;
   height: auto;
 }
 

src/components/SearchInput.js

@@ -4,15 +4,37 @@ import cx from 'classnames';
 import FeatherIcon from './FeatherIcon';
 import styles from './SearchInput.module.scss';
 
-const SearchInput = ({ className, ...props }) => (
-  <div className={cx(styles.container, className)}>
-    <input {...props} className={styles.input} type="text" />
-    <FeatherIcon name="search" className={styles.icon} />
-  </div>
-);
+const SearchInput = ({ className, onClear, value, ...props }) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onClear();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') onClear();
+  };
+  return (
+    <div className={cx(styles.container, className)}>
+      <input value={value} {...props} className={styles.input} type="text" />
+      <span
+        role="button"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        onClick={handleClick}
+        className={styles.clearButton}
+      >
+        <FeatherIcon
+          name={value !== '' ? 'x' : 'search'}
+          className={styles.icon}
+        />
+      </span>
+    </div>
+  );
+};
 
 SearchInput.propTypes = {
   className: PropTypes.string,
+  onClear: PropTypes.func,
+  value: PropTypes.string,
 };
 
 export default SearchInput;

src/components/SearchInput.module.scss

@@ -8,6 +8,7 @@
 .icon {
   position: absolute;
   right: 0.5rem;
+  bottom: 0.5rem;
   stroke: var(--color-neutrals-700);
 }
 

src/components/Sidebar.js

@@ -18,6 +18,7 @@ const Sidebar = ({ className }) => {
       <SearchInput
         className={styles.searchInput}
         placeholder="Search developer docs"
+        onClear={() => setSearchTerm('')}
         onChange={(e) => setSearchTerm(e.target.value)}
         value={searchTerm}
       />