[material-ui] Refine Dashboard template

[zanivan]

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

Part of https://github.com/mui/material-ui/issues/37555

This PR is for refining the Dashboard template, showcasing X's components.

Current	New

The thumbnails and other information will be updated after the design is done

👉 https://deploy-preview-41757--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/

[mui-bot]

Netlify deploy preview

https://deploy-preview-41757--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against bf79bdd689a3795d0c3d18ba2320cd7743d5c892

[noraleonte]

The current ts CI errors should be fixed once https://github.com/mui/material-ui/pull/42149 and https://github.com/mui/mui-x/pull/13026 are merged :)

[zanivan]

https://github.com/mui/material-ui/assets/37222944/ec6b03c1-b568-4955-86e2-f1083443ef01

@noraleonte what's the best approach to customize these buttons? Ideally, they could be a text variant, with a gap between buttons and a margin to the title aside. Also, is there a way to standardize them?

I wonder about the a11y of this, with invisible buttons and the huge amount of layout shifts 🤔 What could we do about it?

[zanivan]

@noraleonte, I've switched the icons to the rounded version and I think we're ready for the first round of reviews 🙌

---

Just one note, though: the Page Views label is broken in light mode and I can't figure out why 😬

[alexfauquette]

Very nit pick design feedback

The scroll bar goes behind the nav bar which feels weird

In the docs, or github it's visible on the entire screen

[alexfauquette]

Just one note, though: the Page Views label is broken in light mode and I can't figure out why 😬

It does not break consistently. I suspect the width of the text is mesured before finishing styling the text so its width is underestimated

[danilo-leal]

Adding refinements to be merged on top of this PR here: https://github.com/zanivan/material-ui/pull/2

[oliviertassinari]

Happy to see that we are prioritizing work on the getting started templates, I think one of the key user journey for new users.

Having a quick look, the issues that were most noticeable, in no special order:

• [x] 1. The scrollbar origin is wrong:

Similar to https://github.com/mui/material-ui/pull/37770

• [x] 2. The dark mode toggle, doesn't persist between loads

https://github.com/mui/material-ui/assets/3165635/7c6f4a03-36ab-4e59-8a47-f606589c2a22

• [x] 3. Keyboard focus style is not working on the tabs

• [x] 4. The data grid keyboard focus doesn't scroll the page.

https://github.com/mui/material-ui/assets/3165635/20639022-4e3f-4753-aaa7-6902a1d14424

It seems to be https://github.com/mui/mui-x/issues/8054. The tree view behaves correctly for comparison.

• [x] 5. The date picker focus management is broken, it steals the focus back. If we are going to steal the focus, we better block the click with an overlay in the first place.

https://github.com/mui/material-ui/assets/3165635/b4299aec-0d42-4a7d-adc6-588cefb2286b

Issue open https://github.com/mui/mui-x/issues/13332.

• [x] 6. I'm missing white backgrounds on the custom theme UX. It feels off like this. IMHO, it feels too much Material Design v3:

See https://www.notion.so/mui-org/Olivier-design-review-on-Joy-Design-3ada9a7bcfa44b9fab1fe5032dfb33bb?pvs=4#61750cb48cb94946881811171cfb5d41 or https://twitter.com/shadcn/status/1794054671692144823/photo/1 that I think would work.

Moved to https://github.com/mui/material-ui/pull/42445

---

Zooming out:

• [x] 7. I don't understand https://deploy-preview-41757--material-ui.netlify.app/material-ui/getting-started/templates/. What I think we are missing for it to resonate with the users:

• [x] 7.1 How am I supposed to build a CRUD dashboard now without a side navigation? https://mui.com/material-ui/getting-started/templates/dashboard/ feels much more useful to me. I think we should still have it as the first one. See the Google Analytics events, and then swap the order/retire it once it gets dethroned 🥇 by another one in use metrics.

More generally, I think that having this type of layout https://blocks.tremor.so/templates would be amazing, I would want to use this 👌✨:

• [x] 7.2 These are not following the default look of @mui/material, shouldn't we reverse them for clarity? I think having a style toggle instead would be much better. For example https://ui.shadcn.com/blocks

• [x] 7.3 I can't click on the image to open it. I trick me each time 🙃
• [x] 7.4 When I go to the source, it's a struggle to use this. Would it be much better if everything was in a single file? With I guess the theme not inside it though. Since, down the line, this theme toggle will be the one between Material Design (custom MUI made) and Joy Design
• [x] 7.5 The different custom theme templates don't share the same theme if I understand this right. I would have expected the opposite.

Points moved to https://github.com/mui/material-ui/issues/41469

[zanivan]

Hey @oliviertassinari, thanks so much for the detailed feedback! I'll try to address many of these in #42445. I believe the items related to the template's page should be in different PRs, so I'll add those items to #41469 :)

[oliviertassinari]

I'll add those items to

@zanivan Great, I have finished to update #41469 and #42445 with the gaps I saw.