fix: Center align the search icon in the search input

newrelic · Jun 30, 2020 · f490c89 · f490c89
1 parent 4fcbb79
commit f490c89
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styles from './FeatherIcon.module.scss';
 
-const FeatherIcon = ({ className, name, size = '1em' }) => {
+const FeatherIcon = ({ className, name, size = '1em', ...props }) => {
   const paths = ICONS[name];
 
   return paths ? (
     <svg
+      {...props}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       className={cx(styles.icon, className)}

diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
@@ -24,11 +24,17 @@ const SearchInput = ({ className, onClear, value, ...props }) => {
       <div className={styles.buttonContainer}>
         <button
           onClick={handleClick}
-          className={styles.button}
+          className={cx(styles.button, {
+            [styles.clearButton]: Boolean(value),
+          })}
           onKeyDown={(e) => e.preventDefault()}
           type="button"
         >
-          <FeatherIcon name={value ? 'x' : 'search'} className={styles.icon} />
+          <FeatherIcon
+            name={value ? 'x' : 'search'}
+            className={styles.icon}
+            onClick={handleClick}
+          />
         </button>
       </div>
     </div>

diff --git a/src/components/SearchInput.module.scss b/src/components/SearchInput.module.scss
@@ -6,6 +6,7 @@
 }
 
 .icon {
+  display: block;
   stroke: var(--color-neutrals-700);
 }
 
@@ -16,15 +17,22 @@
   padding-right: calc(1rem + 1em);
 }
 
-.button[type='button'] {
+.button {
+  display: block;
   background-color: transparent;
   border: none;
   margin: 0;
-  padding: 0.25rem;
+  padding: 0;
+  outline: none;
+}
+
+.clearButton {
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .buttonContainer {
   position: absolute;
   right: 0.5rem;
-  bottom: 0.25rem;
 }