-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Show icon-only for small devices #2702
Conversation
Show icon-only search bar for devices under 768px. This fix is usefull to solve an issue with long app name causing a rendering problem with search
Deploy preview for docusaurus-2 ready! Built with commit 72f936b |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did in a different way because in that way the input field was not clickable. Let me know |
Hi @lex111 I have applied the fix. I removed the icon, but now I have a doubt about accessibility because in this case I made the div as button to expand the input in small devices. The div has always a button role but for large screens and when the input is already expanded the click on the div is disabled. |
Hmm, currently I click on the magnifier icon, the search input expanded and collapsed immediately. |
You mean that with code in master branch, removing only the search-icon it will work? |
this is my diff +++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -104,16 +104,6 @@ const Search = (props) => {
return (
<div className="navbar__search" key="search-box">
- <span
- aria-label="expand searchbar"
- role="button"
- className={classnames('search-icon', {
- 'search-icon-hidden': props.isSearchBarExpanded,
- })}
- onClick={handleSearchIcon}
- onKeyDown={handleSearchIcon}
- tabIndex={0}
- />
<input
id="search_input_react"
type="search" I only removed the |
You have made more changes, which is why the first time you tap to the search input on mobiles, it immediately collapsible. You can easily see this incorrect behavior for yourself if you open the preview website on your mobile. |
Motivation
fix #2699
Show icon-only search bar for devices under 768px.
This fix is useful to solve an issue with long app name causing a rendering problem with search
I hope to make something right :)
Regards
Marco
Have you read the Contributing Guidelines on pull requests?
YES