[docs][docs-infra] Early feedback v2
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
## Summary
This is a refresh of #588 with the up-to-date problems/opportunities with the documentation, since we made a lot of changes since.
The goal is to cover more table stack expectations that users can have, looking at what could be seen a missing coming as a user from Material UI docs.
## Motivation
Try to provide great DX.
## List
In no specific order, some should probably be moved to their own issue:
- [x] 3. There are no links to the source. It feels impactful to help the community contribute fixes. Shouldn't there be one (under a triple dot menu)?
- [x] 7. Having a terminal toggle would be nice for lazy people. I'm using pnpm, I would rather have a direct copy & paste that is saved in a cookie.
https://base-ui.com/react/overview/quick-start. e.g. https://ui.shadcn.com/docs/installation/next
- [x] 9. The TOCs headers seem strange. Is it expected?
https://base-ui.com/react/components/checkbox
I would have thought it would be clearer with "On this page"?
- [x] 10. The scroll in the TOCs is broken; to move, you need to scroll the page. You lose your current reading context:
https://github.com/user-attachments/assets/e8b0793a-6fab-4da8-a066-9ba9c3284cbc
- [x] 18. The link to the source is not correct. It points to HEAD, which will break. See https://github.com/mui/material-ui/blob/de1cecbb73234055fb9923cc9a6c592f7a9fcbd3/packages-internal/core-docs/src/MarkdownDocs/RichMarkdownElement.tsx#L138 for what looks correct. (fixed via https://github.com/mui/base-ui/pull/5082)
- [ ] 19. We have link to the source that will break once we version the docs. For example https://github.com/mui/base-ui/blob/bbff4e3d0742857a55cb6132a2e9e94922661708/docs/src/app/(docs)/react/overview/about/page.mdx?plain=1#L46
I believe this would be the correct solution: https://github.com/mui/material-ui/pull/36729.
- [ ] 1. Headers text are harder to select than in Material UI. When it comes to the header, I believe that I use them 50% of the time to share a link with someone else, and 50% of the time to search on the page all the hits about that specific topic in the header (since I'm lazy, I copy part of the header)
https://github.com/user-attachments/assets/1cab1313-1672-4acb-bf4d-2e5a1370f31a
- [ ] 2. There are no "reset focus" feature. It seems harder to test without. Shouldn't there be one (under a triple dot menu)?
- [ ] 4. There is no light/dark mode toggle. It's not obvious that everyone uses the same mode for their OS and code. For example, I'm personally mostly in light mode. I moved to dark mode for some code-related tasks.
- [ ] 5. Demos are not editable. Waiting 5-10 seconds to open a demo in CodeSandbox or StackBlitz is not the best experience. Better would be to be able to test prop combinations instantly.
- [ ] 6. Element that handles `onClick` don't have `cursor: pointer`. Current behavior seems great for people who are building Electron apps, where on desktop, the expectation is that the UI is so normalized, everything looks the same, that, as a user, you can predict what's clickable, and hence, you don't need to be distracted with cursor changes.
However, for the rest of the people, building for the web, every website is different; it feels a lot more frustrating to not know if an element can be interacted with or not than to have a cursor change distraction, blurring the lines of what is a link and what is a button.
To be clear, this point is not me saying that we should make this change; it's me not confused, trying to understand the logic. Related to https://github.com/shadcn-ui/ui/issues/6843.
Edit: tradeoff discussed more ⬇️ in the comments.
- [ ] 8. Docs search #2144
- [ ] 11. Social cards per component https://www.opengraph.xyz/url/https%3A%2F%2Fmui.com%2Fmaterial-ui%2Freact-tabs%2F vs. https://base-ui.com/react/components/tabs. Compare:
- [ ] 12. Restore SEO / EAO from before #1615.
- [ ] 13. StackBlitz and CodeSandbox are almost equally used by the React community. GA usage in Material UI also show this pattern. So it seems that people tend to pick one and stick to it. Offering only one option can be frustrating (if it's not the one you prefer). I imagine there must be a way to allow people to toggle and change the default open action.
- [ ] 14. The TOCs don't show the current position on the page. I felt a bit lost on https://deploy-preview-2719--base-ui.netlify.app/react/handbook/customization#controlling-components-with-state. I would expect an indicator to know my scroll position, for example:
https://github.com/user-attachments/assets/8c4fb014-f72b-48f7-b6b6-567feeb768c5
https://clerk.com/docs/upgrade-guides/upgrading-from-v2-to-v3
- [ ] 15. The list items feel a bit too close to read comfortably; 1, 2, 3 more pixels in the gap could help. https://master--base-ui.netlify.app/react/handbook/animation#elements-removed-from-the-dom-when-closed
But where it gets broken for me is: paragraph lists. For example, I fail to read this: https://master--base-ui.netlify.app/react/handbook/typescript#other-accessible-types
The notion of a loose list for large paragraphs in lists could fix this if we want to have tight lists. Quick benchmark in: https://github.com/mui/base-ui/pull/2824#issuecomment-3330901910.
- [ ] 16. The number list looks broken, aren't the style broken: https://master--base-ui.netlify.app/react/utils/use-render#merging-props
- [ ] 17. There can be mistakes on the docs; without an edit source button, we are less likely to see contributors open PRs.
- [ ] 18. The scrollbar of Linear feels clearly better than ours. Compare https://linear.app/docs
It responds to the hover and active state, ours doesn't:
Contributor guide
Assessment
This issue has not been assessed yet.