[website] Implement algolia redesign #28252

hbjORbj · 2021-09-10T07:09:02Z

close #26112
close #28415
close #28467

Summary

add @docsearch/react, css latest version
refactor some part AppSearch.js to use built-in keyboard handler from docsearch.
override styles to match branding

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

Preview: https://deploy-preview-28252--material-ui.netlify.app/ (Try the search bar)

mui-pr-bot · 2021-09-10T07:11:27Z

No bundle size changes

Generated by 🚫 dangerJS against d1e7ecc

siriwatknp · 2021-09-10T08:00:49Z

I think we should try the docsearch lib. https://autocomplete-experimental.netlify.app/docs/DocSearch

cc @oliviertassinari what do you think between custom style the current dropdown to modal and use @docsearch/react?

mnajdova · 2021-09-10T12:17:58Z

I think we should try the docsearch lib. https://autocomplete-experimental.netlify.app/docs/DocSearch

Agree 👍

…l-ui into pr/28252

docs/src/modules/components/AppSearch.js

docs/src/modules/components/Link.tsx

eps1lon · 2021-09-20T10:55:23Z

docs/src/modules/components/AppSearch.js

-  const [focused, setFocused] = React.useState(false);
-  const theme = useTheme();
+  useLazyCSS(
+    'https://cdn.jsdelivr.net/npm/@docsearch/[email protected]/dist/style.min.css',


Do you know why @docsearch/css is a dependency of @docsearch/react? Maybe we don't need this hook anymore.

They just reexport from @docsearch/react/style in here but I don't see it is using in their component.

What if we import the module like this? so that if the package version updated we don't need to update multiple places.

import "@docsearch/react/style" // equal to @docsearch/css

What if we import the module like this? so that if the package version updated we don't need to update multiple places.

I am trying this

We need to keep this.

We can go with the current approach and open another PR for improvement?

danilo-leal

This is looking awesome. Nice work @hbjORbj and @siriwatknp!

mnajdova

It looks awesome! 🎉

oliviertassinari

The new search UX feels much better! I have left a couple of notes so we can follow-up to polish:

On mobile should we remove the border radius or add a little bit of margin to see the black overlay?

On user agents with width scrollbar, the header moves:

Maybe an issue to open at https://github.com/algolia/docsearch or something for us to batch as we handle the Modal

oliviertassinari · 2021-09-22T09:30:03Z

docs/src/modules/components/AppSearch.js

+              '&::-webkit-scrollbar-thumb': {
+                borderColor:
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.primaryDark[900]
+                    : theme.palette.background.paper,
+                backgroundColor:
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.primaryDark[700]
+                    : theme.palette.grey[500],
+              },
+              '&::-webkit-scrollbar-track': {
+                backgroundColor: theme.palette.background.paper,
+              },


AFAIK, we could remove this, and use colorScheme: theme.palette.mode at the root

Suggested change

'&::-webkit-scrollbar-thumb': {

borderColor:

theme.palette.mode === 'dark'

? theme.palette.primaryDark[900]

: theme.palette.background.paper,

backgroundColor:

theme.palette.mode === 'dark'

? theme.palette.primaryDark[700]

: theme.palette.grey[500],

},

'&::-webkit-scrollbar-track': {

backgroundColor: theme.palette.background.paper,

},

oliviertassinari · 2021-09-22T09:31:31Z

docs/src/modules/components/AppSearch.js

+        addStartScreen();
+      }
+      if (searchInput) {
+        const handleInput = (e) => {


Please no shortcuts

Suggested change

const handleInput = (e) => {

const handleInput = (event) => {

oliviertassinari · 2021-09-22T09:32:01Z

docs/src/modules/components/AppSearch.js

+    if (modal) {
+      // fade out transition
+      modal.style.opacity = 0;
+      setTimeout(() => {


clearTimeout?

oliviertassinari · 2021-09-22T09:32:37Z

docs/src/modules/components/AppSearch.js

+      items: [
+        { name: 'Material Icons', href: '/components/material-icons/' },
+        { name: 'Text Fields', href: '/components/text-fields/' },
+        { name: 'Button', href: '/components/buttons' },


Suggested change

{ name: 'Button', href: '/components/buttons' },

{ name: 'Button', href: '/components/buttons/' },

oliviertassinari · 2021-09-22T09:35:17Z

docs/src/modules/components/AppSearch.js

+            searchParameters={{
+              facetFilters: ['version:master', facetFilterLanguage],
+            }}
+            placeholder="Search..."


Suggested change

placeholder="Search..."

placeholder="Search…"

siriwatknp · 2021-09-22T14:05:03Z

On mobile should we remove the border radius or add a little bit of margin to see the black overlay?

We don't have search on mobile 😂

siriwatknp · 2021-09-22T14:06:28Z

will batch some minor fixes from @oliviertassinari in another PR.

hbjORbj added the website Pages that are not documentation-related, marketing-focused. label Sep 10, 2021

hbjORbj requested a review from siriwatknp September 10, 2021 07:09

github-actions bot mentioned this pull request Sep 10, 2021

Update snapshots for pr/28252 eps1lon/mui-scripts-incubator#3091

Closed

hbjORbj changed the title ~~[website] Implement algolia redesign~~ [WIP] [website] Implement algolia redesign Sep 10, 2021

hbjORbj force-pushed the algolia-redesign branch from 5955fa4 to 04ab442 Compare September 13, 2021 10:37

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 13, 2021

hbjORbj added 4 commits September 13, 2021 13:00

Initial implementation using docsearch library

e0688fb

Display clickable search input that leads to modal and enable shortcuts

e630775

Apply correct style for dark theme

f30d024

Minor improvements in design

528dece

hbjORbj force-pushed the algolia-redesign branch from 0bed37a to 528dece Compare September 13, 2021 13:55

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 13, 2021

hbjORbj and others added 4 commits September 13, 2021 16:20

Fix lint error

b2676ac

search styling and nav drawer/ app frame adjustments

b9c88bd

more polishing

13dfb92

Merge branch 'algolia-redesign' of https://github.com/hbjORbj/materia…

95ee639

…l-ui into pr/28252

danilo-leal self-requested a review September 13, 2021 19:20

hbjORbj added 2 commits September 14, 2021 06:00

Remove unused imports

de39b54

Refactor code

62243a8

hbjORbj changed the title ~~[WIP] [website] Implement algolia redesign~~ [website] Implement algolia redesign Sep 14, 2021

Use relative URL for search results

804e076

hbjORbj requested review from mnajdova and eps1lon September 14, 2021 08:13

eps1lon changed the base branch from next to master September 14, 2021 08:30

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 15, 2021

siriwatknp mentioned this pull request Sep 16, 2021

[RFC] Improve docsearch result #28333

Closed

4 tasks

update styling

2c339f0

search input tweaks

3b8f618

danilo-leal reviewed Sep 17, 2021

View reviewed changes

docs/src/modules/components/AppSearch.js Show resolved Hide resolved

siriwatknp added 3 commits September 18, 2021 07:54

use previous version code

c371eb6

add fade in, out transition

4f92ec4

adjust fade duration

d6e0a20

oliviertassinari mentioned this pull request Sep 19, 2021

[Docs] Close Button on Search Bar is Bad #28467

Closed

2 tasks

hbjORbj added 2 commits September 19, 2021 19:13

Add custom start screen and display it when input is empty

513fe18

Add icons to start screen and refactor start screen

c1c16b2

This comment has been minimized.

Sign in to view

Run prettier

e008c24

This comment has been minimized.

Sign in to view

adjust styling and use Link to leverage Nextjs prefetch

6697fe2

siriwatknp force-pushed the algolia-redesign branch from 04b318b to 6697fe2 Compare September 20, 2021 03:12

eps1lon requested changes Sep 20, 2021

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 20, 2021

danilo-leal added 2 commits September 20, 2021 17:41

reduce fade duration time

0c9029e

use pxToRem utility

cc4af29

danilo-leal approved these changes Sep 20, 2021

View reviewed changes

Merge branch 'master' into algolia-redesign

6ca674a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 21, 2021

siriwatknp and others added 2 commits September 21, 2021 10:31

simplify the code

64d950e

Change a variable name

d1e7ecc

mnajdova approved these changes Sep 21, 2021

View reviewed changes

mnajdova requested a review from eps1lon September 21, 2021 13:09

mnajdova removed the on hold There is a blocker, we need to wait label Sep 22, 2021

eps1lon approved these changes Sep 22, 2021

View reviewed changes

mnajdova merged commit 97b1709 into mui:master Sep 22, 2021

oliviertassinari reviewed Sep 22, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Implement algolia redesign #28252

[website] Implement algolia redesign #28252

hbjORbj commented Sep 10, 2021 •

edited by oliviertassinari

Loading

mui-pr-bot commented Sep 10, 2021 •

edited

Loading

siriwatknp commented Sep 10, 2021

mnajdova commented Sep 10, 2021

This comment has been minimized.

This comment has been minimized.

eps1lon Sep 20, 2021

siriwatknp Sep 20, 2021 •

edited

Loading

mnajdova Sep 22, 2021

mnajdova Sep 22, 2021

mnajdova Sep 22, 2021

siriwatknp Sep 22, 2021

danilo-leal left a comment

mnajdova left a comment

oliviertassinari left a comment •

edited

Loading

oliviertassinari Sep 22, 2021

oliviertassinari Sep 22, 2021

oliviertassinari Sep 22, 2021

oliviertassinari Sep 22, 2021

oliviertassinari Sep 22, 2021

siriwatknp commented Sep 22, 2021

siriwatknp commented Sep 22, 2021

	const handleInput = (e) => {
	const handleInput = (event) => {

	{ name: 'Button', href: '/components/buttons' },
	{ name: 'Button', href: '/components/buttons/' },

[website] Implement algolia redesign #28252

[website] Implement algolia redesign #28252

Conversation

hbjORbj commented Sep 10, 2021 • edited by oliviertassinari Loading

mui-pr-bot commented Sep 10, 2021 • edited Loading

siriwatknp commented Sep 10, 2021

mnajdova commented Sep 10, 2021

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

siriwatknp Sep 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Sep 22, 2021

siriwatknp commented Sep 22, 2021

hbjORbj commented Sep 10, 2021 •

edited by oliviertassinari

Loading

mui-pr-bot commented Sep 10, 2021 •

edited

Loading

siriwatknp Sep 20, 2021 •

edited

Loading

oliviertassinari left a comment •

edited

Loading