[docs] Upgrade Algolia search UI

[arpitBhalla]

• I have followed (at least) the PR section of the contributing guide.

Preview: https://deploy-preview-26397--material-ui.netlify.app/

Closes #26112

---

Benchmark

• https://tailwindcss.com/docs/clear
• https://popper.js.org/docs/v2/migration-guide/
• https://chakra-ui.com/docs/feedback/alert
• https://blueprintjs.com/docs/versions/4/#select/omnibar
• https://raycast.com/

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 83acbf3

[eps1lon]

Not sure what happened with your lockfile. Try reverting that change (but keep the change to the package.json) and then run yarn install again. But make sure your run yarn install from the workspace root not ./docs

[oliviertassinari]

Having a quick look at the preview URL, I can notice that:

• the background-color is broken
• the colors aren't working when in dark mode

Regarding the button that triggers the modal, we will likely need to rework the UI. I would propose we keep the previous style (both for the docs, and the website, so two different versions)

[siriwatknp]

@oliviertassinari styling is done but I think the search result is not good.

• when I search TextField, the components should comes first, not the API?
• the Hit path should be removed, I think it is too much (compare with tailwind, chakra-ui)
  • https://tailwindcss.com/
  • https://chakra-ui.com/

Light mode

Dark mode

• Color contrast checked

[oliviertassinari]

@siriwatknp Great, thanks for taking the lead on this one. This can be a great side project when you are waiting for feedback on one of the breaking changes.

What I could find, so far:

1. The instructions at the bottom seem overzealous, over-explaining how the UI work. What do you think about hiding them?

2. The vertical alignment of the search seems off, compared to where the input is:

3. The link font-weight and color seems off:

4. When we trigger the link, a full-page navigation is executed, not a client-side navigation with Next.js (this is harming the UX)

5. By default, when we open the modal, there is a strange scroll: visible even if there is no scroll bar. It doesn't looks great.

6. The font-variant of "No recent searches" is off, maybe it should be theme.typography.body2

7. The results seems completely off. I suspect we need to ask Algolia to configure our index. Compare the same query:

If it's true, then we might need to have two accounts, one for v4, and one for v5.

8. Sebastian started to raise issues in [docs-infra] Improve Algolia internal search results on mui.com #16502
9. "Recent" is empty, is it expected? It doesn't seem to manage to save the history.
10. Regarding the integration with the rest of the website. We will need to have it in https://deploy-preview-26397--material-ui.netlify.app/branding/about/ too :). We will need to customize the look of the input, probably best to write our own input here.

---

when I search TextField, the components should comes first, not the API?

Agree

the Hit path should be removed, I think it is too much

What do you mean by "Hit path"?

[arpitBhalla]

@siriwatknp Please review the changes,

[oliviertassinari]

@arpitBhalla thanks for the udpate. I had a look at the changes 7 days ago. We are off from the target, so much so that, it felt like a WIP, I didn't take the time to comment as I felt most of the feedback of #26397 (comment) were not taken into account yet (I see 2/10 that might have been fixed). Note that these ten items are unlikely to be enough. I could already found a new obvious one, so I assume a deeper review will uncover improvement opportunities. I hope it helps.