Skip to content

[material-ui] Refine Dashboard template#41757

Merged
zanivan merged 128 commits intomui:nextfrom
zanivan:material-ui-template-dashbaord
May 29, 2024
Merged

[material-ui] Refine Dashboard template#41757
zanivan merged 128 commits intomui:nextfrom
zanivan:material-ui-template-dashbaord

Conversation

@zanivan
Copy link
Collaborator

@zanivan zanivan commented Apr 3, 2024 •
edited
Loading

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 design This is about UI or UX design, please involve a designer. labels Apr 3, 2024
@zanivan zanivan mentioned this pull request Apr 3, 2024
Closed
10 tasks
@mui-bot
Copy link

mui-bot commented Apr 3, 2024 •
edited
Loading

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
noraleonte
noraleonte approved these changes May 29, 2024
View reviewed changes
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
@zanivan zanivan mentioned this pull request May 29, 2024
Merged
6 tasks
oliviertassinari
oliviertassinari reviewed Jun 1, 2024
View reviewed changes
docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
'hsl(220, 25%, 20%)',
];

export default function ChartUserByCountry() {
Copy link
Member

@oliviertassinari oliviertassinari Jun 1, 2024 •
edited
Loading

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

@alexfauquette alexfauquette Jun 11, 2024

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 oliviertassinari mentioned this pull request Jun 1, 2024
Merged
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 1, 2024 •
edited
Loading

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
Collaborator 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 :)

@zanivan zanivan mentioned this pull request Jun 3, 2024
Open
28 tasks
@oliviertassinari oliviertassinari mentioned this pull request Jun 9, 2024
Merged
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 10, 2024 •
edited
Loading

I'll add those items to

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

@oliviertassinari oliviertassinari mentioned this pull request Jun 10, 2024
Closed
5 tasks
joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024
@zanivan @noraleonte
@alexfauquette @danilo-leal @joserodolfofreitas
[material-ui] Refine Dashboard template (mui#41757)
3e45b16 
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

Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

@kenanyusuf kenanyusuf kenanyusuf left review comments

@alexfauquette alexfauquette alexfauquette approved these changes

@flaviendelangle flaviendelangle flaviendelangle approved these changes

@LukasTy LukasTy LukasTy approved these changes

@noraleonte noraleonte noraleonte approved these changes

@joserodolfofreitas joserodolfofreitas Awaiting requested review from joserodolfofreitas

@JCQuintas JCQuintas Awaiting requested review from JCQuintas

@danilo-leal danilo-leal Awaiting requested review from danilo-leal

Assignees

@zanivan zanivan

@noraleonte noraleonte

Labels

design This is about UI or UX design, please involve a designer. docs Improvements or additions to the documentation.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@zanivan @mui-bot @noraleonte @alexfauquette @danilo-leal @oliviertassinari @flaviendelangle @LukasTy @kenanyusuf