Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] Refine Dashboard template #41757

Merged
merged 128 commits into from
May 29, 2024

Conversation

zanivan
Copy link
Contributor

@zanivan zanivan commented Apr 3, 2024

Part of #37555

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

Current New
image image

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/

@zanivan zanivan added docs Improvements or additions to the documentation package: material-ui Specific to @mui/material design This is about UI or UX design, please involve a designer labels Apr 3, 2024
@mui-bot
Copy link

mui-bot commented Apr 3, 2024

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 🚫 dangerJS against bf79bdd

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 15, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 29, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 29, 2024
Copy link
Contributor

@noraleonte noraleonte left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zanivan This looks good on my side 👌 Any further tweaks or improvements can be done in follow-ups IMO 😬 I think we can merge whenever you're ready 🎉

AMAZING work 💙 I'm really happy with how it turned out

Thanks everyone for the reviews and suggestions 🤗 💙

@zanivan zanivan merged commit f098940 into mui:next May 29, 2024
22 checks passed
'hsl(220, 25%, 20%)',
];

export default function ChartUserByCountry() {
Copy link
Member

@oliviertassinari oliviertassinari Jun 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR component is flaky: https://app.argos-ci.com/mui/material-ui/builds/28511/92821674. It seems that we need @alexfauquette patch in https://github.com/mui/mui-x/pull/9926/files#diff-26370639d5cddf1b1016c2de2ceb142f773f358cf916cbc637bdd327be854495

It shouldn't be in the visual regressions test in the first place, since the parent one is into it. To remove.

(I landed here from #42471)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Argos has been quick patch, and a refinement PR is on the way #42537

@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 1, 2024

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:

  • 1. The scrollbar origin is wrong:
scrollbar

Similar to #37770

  • 2. The dark mode toggle, doesn't persist between loads
Screen.Recording.2024-06-01.at.20.32.43.mov
  • 3. Keyboard focus style is not working on the tabs
overflow tab
  • 4. The data grid keyboard focus doesn't scroll the page.
broken.scroll.mov

It seems to be mui/mui-x#8054. The tree view behaves correctly for comparison.

  • 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.
Screen.Recording.2024-06-01.at.20.35.35.mov

Issue open mui/mui-x#13332.

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

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 #42445


Zooming out:

SCR-20240601-sbjj
  • 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 👌✨:

SCR-20240601-shhh
  • 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
SCR-20240601-sctl
  • 7.3 I can't click on the image to open it. I trick me each time 🙃
  • 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
  • 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 #41469

@zanivan
Copy link
Contributor Author

zanivan commented Jun 3, 2024

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
Copy link
Member

oliviertassinari commented Jun 10, 2024

I'll add those items to

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

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024
Signed-off-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Co-authored-by: noraleonte <noraleonte00@gmail.com>
Co-authored-by: alexandre <alex.fauquette@gmail.com>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants