[material-ui][docs] Add an "All components" page #40256
Conversation
danilo-leal
added
docs
Netlify deploy previewBundle size report |
docs/src/modules/components/MaterialUIComponents/MaterialInputComponents.js
Show resolved
Hide resolved
|
This looks good! It's great to have an overview like this, with a visual aid for components—it can help developers who aren't so sure about which component to use for a specific situation; now, it's just a matter of eyeing this page 👀 One nit, the Also, do you think it'd makes sense to add a button to the component API page? |
While I definitely don't think that's a bad idea, I'm hesitating to add the visual and interaction complexity that will come with the two buttons we'd need to add (one for the API page, another for the demo page), given the entire card wouldn't be clickable anymore. Also, another thing that makes me hold on a bit is that there are more component API pages than demo pages (e.g., the Card component has Card Action, Card Media, Card Content, etc.), which wouldn't map 1:1 to the illustrations. 😕 |
There was a problem hiding this comment.
Happy to see this page 👍
I created #40304 to cover the color.
| <ComponentShowcaseCard | ||
| link={link} | ||
| name={name} | ||
| srcLight={srcLight} | ||
| srcDark={srcDark} | ||
| md1={md1} | ||
| md2={md2} | ||
| md3={md3} | ||
| noGuidelines={noGuidelines} | ||
| /> |
There was a problem hiding this comment.
Regarding the performance of the page, there is room to significantly improve the UX:
prefetch={false}on the Next.js link, on the side nav. We load a tone of JavaScript. Effectively Next.js fetches each page as soon as it is in the viewport. This would defer it to be only on hover.loading="lazy"on the images, it seems that we load them too eagerly.- Use SVG over PNG image to reduce the load time where it helps.
Same issues on https://mui.com/base-ui/all-components/.
This PR adds an "All components" page to the Material UI docs, similar to the one we have on Base UI. It serves the same purpose as the "Supported components" page, as it also displays which guidelines each component follows. The difference is that on that page, we mention components that Material UI currently doesn't support but are documented in the Material Design documentation. There's also a handy link to the Material docs there that this new one doesn't. These two pages are definitely overlapping, but we can keep pondering whether or not to maintain both (which I wonder if it makes sense).
https://deploy-preview-40256--material-ui.netlify.app/material-ui/all-components/