Search bar behavior on v5 documentation page

[PabloLION]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

with key word documentation Search bar , documentation font size in open questions.

Current Behavior 😯

Firstly, congrats on rolling out v5. It's super nice.
However, the new website seems to have an oversized font (I checked my chrome zoom level is at 100%):

• The SeachBar looks ugly for being so crowded.
  
• When seach for "Typography" the word wrap is not correct.
  
• Plus it collides with the hotkey tips
  

I think it is also related to #28395.

Expected Behavior 🤔

Have a smaller font size in documentation header.

• Or (maybe And), enlarge the seach bar and the drop down accrodingly.

Steps to Reproduce 🕹

Steps:

1. Go to https://mui.com/ and make sure its on v5. (date of report 2021-09sept-07)
2. Open the seach bar (or with ctrl/cmd+k
3. Seach for typography

Context 🔦

Nothing. Just think the documentation website should be more carefully designed.

Your Environment 🌎

• Windows 1902
• Chrome 91

[danilo-leal]

Hey @Pablion, thanks for reporting it!

We'll work on a fix for the search div, to accommodate the Ctrl hotkey better!

Regarding the search result modal, we have been working on a redesign for it which is almost ready to go. It will definitely improve the experience of browsing through the documentation. Feel free to check it out and leave your feedback!

Given that, you can either give a shot at fixing the current behavior you reported yourself (bad word wrap) — a nice opportunity to practice if you haven't opened a fix for the library yet — or wait just a bit more for the revamped design. Hope it helps and thanks again. :)

[PabloLION]

@danilo-leal Great suggestions for PR. I will try to work on the bad word wrap tommorow. Good opportunity for me.
But it seems the word Typography is too long (in last screenshot) and the wrap is a must. I don't know what kind of design do you want here. Can you make it more clear?

[danilo-leal]

@Pablion Thought a bit more about this and although it is indeed a good opportunity for contributing, it doesn't seem to be worth it as we're very close to launching the redesigned search as a whole. :( But hey, thanks for reporting again. I'm sure another good thing will come up for you to experiment with contributing to MUI!

[danilo-leal]

@Pablion Hey! We have just released the new search experience. Hope you like it :)

[PabloLION]

@danilo-leal Wow, that's a very quick fix. This new UI fixed all issues I raised. But after some simples test, I found one behaviour was worse than before. (should I open a new issue?)

feedback

1. Before when I wanted to go "Typography API" page it was easy but now I had to type typograp api.. not even typogra api will give me the answer. And the content from Component chapter is taking a lot of space so I cannot see "Typography API" directly.
2. The scroll bar is hidden and causing a flicker of layout. (this is a minor problem)

reason of problem

Maybe you changed algolia engine settings?

[danilo-leal]

Yeah, we did some changes in the way the search works. We'll probably open a new PR to batch some minor fixes that went unnoticed on this release. Thanks for raising those up though, we'll get back to you soon! cc @siriwatknp

[PabloLION]

I think the new way of search needs some improvement. When I searched for "Button" the "Toggle Button" comes first. If I encountered a third misbehavior on UX, I will create a new thread of this issue to make it clearer.
Thanks for the quick & good job of fixing it!

[siriwatknp]

@Pablion thanks a lot for the feedback and yes, we have changed the algolia configuration which improve most search result, here is the my test https://siriwatknp.github.io/mui-docsearch/. However, as you noticed only a few cases that still not good.

• When I searched for "Button" the "Toggle Button" comes first I agree, Button should come up first. I will ask algolia team about this because we don't have permission to adjust the advanced configuration.
• Before when I wanted to go "Typography API" page it was easy but now I had to type typograp api. This is what I expected because we would like people to see "components" first (that's what most people search for from the analytics data we have). To search the API doc, you can type "api ..." like "api typo", you will see the Typography API comes first. I think we can have a small section in the doc to explain "how to search effectively".

[PabloLION]

Nice to hear the feedback. Two more small advices:

1. "how to search effectively" can also show in the seach pop-up itself, with a larger font size to emphasize.
2. Show less irrelevant chapters (like in img2.1, there are three chapter shown but not needed) and add the chapter to the search engine. (img2.2)
   2.1. Less-relevant candidates
   
   2.2. Word after space can be taken as a chapter name.
   For example, with typo gen the "general" chapter of "Typography" can become the first candidate.
   What I expect:
   
   What actually happened:
   

Sorry for squezzing all in one thread. I wanted to create a new issue but the name would be same as this very issue, so maybe reopen this one?

[PabloLION]

@danilo-leal @siriwatknp are you still following this issue althought it is marked as "closed"?

[siriwatknp]

@Pablion would it make sense to create another issue so that it is not mixed up?

Here is my response to your suggestion

"how to search effectively" can also show in the seach pop-up itself, with a larger font size to emphasize.

Good point. @danilo-leal, I think this is a quick win that we can improve. What do you think?

Show less irrelevant chapters

I think what if we swap the text to be something like this? @danilo-leal @hbjORbj what do you think?

Word after space can be taken as a chapter name

This is hard because we don't have control to edit search configuration in algolia. But there is something that we have improve on our side. Ex, currently searching for "Butto" should show Button as first result but somehow Toggle Button appears first. One possible solution is to remove the spacing from the heading

• Toggle Button => ToggleButton
• Button Group => ButtonGroup

cc @oliviertassinari

[hbjORbj]

Show less irrelevant chapters

I think what if we swap the text to be something like this?

@siriwatknp Since we have indentation with a hashtag for a chapter, I think swapping the two names won't be a problem. 👍

[PabloLION]

@siriwatknp Since we are here already, better to start a new issue next time.

I like your solution on this a lot. In this way the tree shape and '#' icon becomes meaningful.

Also, maybe we can make them less height(hiding the h1 title, we have tree already) or make h2 titles with Chip component so we can show more contents below? They are just occupying all the space.

As for the "word after first space". I never used algolia but if it's open source maybe we can PR that as well?

The point of these two points above was to use more keyboard and less mouse(like Cmd+K for search), since it's far more efficient.

Sorry for the bad styling on this markdown because I'm writing in bed.