Skip to content
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

Closed

Conversation

marcosvega91
Copy link
Contributor

@marcosvega91 marcosvega91 commented Apr 30, 2020

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

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
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Apr 30, 2020
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Apr 30, 2020

Deploy preview for docusaurus-2 ready!

Built with commit 72f936b

https://deploy-preview-2702--docusaurus-2.netlify.app

@marcosvega91 marcosvega91 changed the title [SearchBar] Show icon-only for small devices feat Show icon-only for small devices May 2, 2020
@marcosvega91 marcosvega91 changed the title feat Show icon-only for small devices feat: Show icon-only for small devices May 2, 2020
Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in the right direction, but on dark mode, the search icon is black and blends into the background. See:

Screen Shot 2020-05-13 at 11 22 49 AM

If we can keep the text input that would solve the problem. See:

Screen Shot 2020-05-13 at 11 22 08 AM

@marcosvega91
Copy link
Contributor Author

I did in a different way because in that way the input field was not clickable. Let me know

@yangshun yangshun added this to the v2.0.0-alpha.55 milestone May 14, 2020
@lex111
Copy link
Contributor

lex111 commented May 17, 2020

But what if you completely remove the .search-icon element and show the magnifier icon of search input, as shown below?
This will also allow us to extend the input width, for example from 9rem to 13rem.

ezgif com-video-to-gif

@marcosvega91
Copy link
Contributor Author

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.

@lex111
Copy link
Contributor

lex111 commented May 18, 2020

Hmm, currently I click on the magnifier icon, the search input expanded and collapsed immediately.

@marcosvega91
Copy link
Contributor Author

You mean that with code in master branch, removing only the search-icon it will work?

@lex111
Copy link
Contributor

lex111 commented May 18, 2020

ezgif com-video-to-gif (2)

@marcosvega91
Copy link
Contributor Author

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 .search-icon but it doesn't work. I think that I don't understand what you mean

@lex111
Copy link
Contributor

lex111 commented May 18, 2020

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.

@yangshun
Copy link
Contributor

Thank you for this PR! As #2791 is more robust, we'll go with that. We'll definitely credit you in our next release as a collaborator of #2791 :)

@yangshun yangshun closed this May 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

alpha-54: Site title no longer wraps - search box moves
5 participants