[docs][joy-ui] Add documentation for Box component in the sidebar

[badalsaibo]

Duplicates

• I have searched the existing issues

Related page

https://mui.com/joy-ui/react-card/

Kind of issue

Missing information

Issue description

There are examples on the doc where use of Box component is prominent, like, Card.
I was looking for Box component's documentation and it appears that it isn't present in Joy UI's doc, even when the component exists.

import Box from '@mui/joy/Box';

Context 🔦

No response

[samuelsycamore]

I do think we need to provide info on the Box to Joy UI users, but it feels redundant to have three different pages (MUI System, Material UI, and then Joy UI) for what is essentially the same component in all cases.

Instead of repeating the content, maybe we should follow the pattern we use for Base UI components that are exported in Material UI? https://mui.com/material-ui/react-click-away-listener/

So Joy UI and Material UI would both have skeletal Box docs with an info callout directing readers to the MUI System doc, which would be the source of truth for the component. Does that make sense? cc @danilo-leal

[danilo-leal]

I dig that! That occurred to me after opening the PR linked above (#39159), and how having to maintain 3 different pages with essentially the same content wouldn't be efficient... plus, it feels like the source documentation for the Box should probably live in the MUI System docs instead of anywhere else.

Wasn't already that we were using this pattern already for the Click Away Listener! Happy to use the PR above to kick off a Box page revision and then just apply the callout in both Material UI and Joy UI!

[oliviertassinari]

for what is essentially the same component in all cases

@samuelsycamore There are more differences in the case of the <Box> compared to <ClickAwayListener>. When there is no theme provided, the Box default tokens are different.

I wouldn't be against documenting this difference, but I don't know if it's important, maybe to wait user to complain.
In any case, I think this moves in the right direction 👍

If we look at the long-term direction. For v6 I suspect that removing this difference could be a net positive. It would mean having MUI System, Joy UI, and Material UI sharing the same default theme, same as either null or with basis values. In practice, developers would need to add a ThemeProvider (otherwise it would be broken), not too different from how it's like to use Tailwind CSS. I imagine that for the zero runtime CSS-in-JS engine, some setup would be required anyway. This would solve:

• @mui/icons-material use between Material UI and Joy UI
• Allow us in all the demos of Material UI and Joy UI to import from MUI System raw, without then need for a wrapper, effectively the UX you have when using Tailwid CSS. Meaning developer would better learn how these are related but independent.

Idea added to #30660.