Functionality to clear input from sidenav search and icon gallery search #247
Conversation
src/components/FeatherIcon.js
Outdated
| @@ -18,7 +18,7 @@ const FeatherIcon = ({ className, name, size = '1em' }) => { | |||
| ) : null; | |||
| }; | |||
|
|
|||
| // Icons from https://feathericons.com/ | |||
| // Icons from | |||
There was a problem hiding this comment.
Looks like this comment lost the URL
There was a problem hiding this comment.
Ah yes that comes from my bad habit of clicking ctrl x 😅 I'll fix that
| <span | ||
| role="button" | ||
| tabIndex={0} | ||
| onKeyDown={handleKeyDown} |
There was a problem hiding this comment.
Is the intention for this to trigger when the button is focused?
src/components/SearchInput.js
Outdated
| className={styles.clearButton} | ||
| > | ||
| <FeatherIcon | ||
| name={value !== '' ? 'x' : 'search'} |
There was a problem hiding this comment.
Could probably be simplified to value ? 'search' : 'x' since empty strings are falsy.
src/components/SearchInput.js
Outdated
| onKeyDown={handleKeyDown} | ||
| /> | ||
| <div | ||
| role="button" |
There was a problem hiding this comment.
Its typically not a great idea to use a div button for accessibility reasons. We should instead use a button instead.
That being said, is there a reason you couldn't add the event handlers to the FeatherIcon component itself?
There was a problem hiding this comment.
It wouldn't trigger when click on the FeatherIcon, I wasn't sure why that was happening which is why I wrapped it in a div. I will change this to a button!
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
Adds functionality to the
SearchInputcomponent that allows to clear the input.Reviewer Notes
Type in the search bar for the icon gallery and sidenav and then a x will appear on the right-hand side of the input. Click to clear.
Related Issue(s) / Ticket(s)
Screenshot(s)
Icon gallery
Sidenav