[material-ui] Refine Dashboard template #41757

zanivan · 2024-04-03T15:47:55Z

I have followed (at least) the PR section of the contributing guide.

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 · 2024-04-03T15:50:41Z

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

docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx

…aterial-ui into material-ui-template-dashbaord

docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx

…mplate-dashbaord

…aterial-ui into material-ui-template-dashbaord

…mplate-dashbaord

noraleonte

@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 🤗 💙

oliviertassinari · 2024-06-01T18:00:14Z

docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx

+  'hsl(220, 25%, 20%)',
+];
+
+export default function ChartUserByCountry() {


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)

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

oliviertassinari · 2024-06-01T19:01:09Z

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:

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

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:

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:

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:

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 👌✨:

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

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 · 2024-06-03T12:50:46Z

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 · 2024-06-10T20:51:07Z

I'll add those items to

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

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>

Set files up

c5b8f11

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

zanivan assigned zanivan and noraleonte Apr 3, 2024

zanivan mentioned this pull request Apr 3, 2024

[material-ui] Revamp the free templates design #37555

Open

9 tasks

noraleonte added 4 commits April 8, 2024 22:47

Navbar WIP

7a2cbdd

scripts

27a7ec9

Navbar buttons

6b8c999

add breadcrumbs

80cb21a

zanivan commented Apr 9, 2024

View reviewed changes

docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx Outdated Show resolved Hide resolved

noraleonte and others added 14 commits April 10, 2024 13:50

Secondary nav + theme updates

ecfac72

small fix

90e2f2f

Merge branch 'next' into material-ui-template-dashbaord

0b0f637

Bring latest changes to theme

ad5e681

Add UsersByCountry

eac2072

Add custom styles to theme

5d95848

Run docs:typescript:formatted

7cfe75e

wip

a0afc8b

add dayjs

1b1a3c8

update pickers

63c0935

Add header section

06ef734

add header

77418f3

Merge branch 'material-ui-template-dashbaord' of github.com:zanivan/m…

580b44e

…aterial-ui into material-ui-template-dashbaord

scripts

f646c55

noraleonte reviewed Apr 12, 2024

View reviewed changes

docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx Outdated Show resolved Hide resolved

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

Stray design tweaks

5212f98

zanivan and others added 14 commits May 28, 2024 12:14

Change line chart's label

08e1fc2

Run docs:typescript:formatted

6d92302

scripts

965d38b

i

11a71d1

Merge branch 'next' of github.com:mui/material-ui into material-ui-te…

b6bee7d

…mplate-dashbaord

i

afaded8

fix lock file

b5eef73

Merge branch 'material-ui-template-dashbaord' of github.com:zanivan/m…

ca6aa01

…aterial-ui into material-ui-template-dashbaord

fix CI

e159037

refactor CustomDatePicker

80c462d

fix

dbcde31

fix

d2d7de8

tweak grid

97be390

Update thumbnail and description, and some stray tweaks

d1f6991

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

noraleonte added 2 commits May 29, 2024 12:48

tweaks to grid

35adda0

Merge branch 'next' of github.com:mui/material-ui into material-ui-te…

bf79bdd

…mplate-dashbaord

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 approved these changes May 29, 2024

View reviewed changes

zanivan merged commit f098940 into mui:next May 29, 2024
22 checks passed

zanivan mentioned this pull request May 29, 2024

[material-ui][docs] Add improvements to Dashboard template #42445

Merged

6 tasks

oliviertassinari reviewed Jun 1, 2024

View reviewed changes

oliviertassinari mentioned this pull request Jun 1, 2024

[examples] Remove Pigment CSS examples #42471

Merged

zanivan mentioned this pull request Jun 3, 2024

[material-ui][docs] Refine the free templates page #41469

Open

25 tasks

oliviertassinari mentioned this pull request Jun 9, 2024

[code-infra] Skip charts animation for visual regression test #42530

Merged

oliviertassinari mentioned this pull request Jun 10, 2024

[material-ui] Dashboard template improvements #42610

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Refine Dashboard template #41757

[material-ui] Refine Dashboard template #41757

zanivan commented Apr 3, 2024 •

edited

Loading

mui-bot commented Apr 3, 2024 •

edited

Loading

noraleonte left a comment

oliviertassinari Jun 1, 2024 •

edited

Loading

alexfauquette Jun 11, 2024

oliviertassinari commented Jun 1, 2024 •

edited

Loading

zanivan commented Jun 3, 2024

oliviertassinari commented Jun 10, 2024 •

edited

Loading

[material-ui] Refine Dashboard template #41757

[material-ui] Refine Dashboard template #41757

Conversation

zanivan commented Apr 3, 2024 • edited Loading

mui-bot commented Apr 3, 2024 • edited Loading

Netlify deploy preview

Bundle size report

noraleonte left a comment

Choose a reason for hiding this comment

oliviertassinari Jun 1, 2024 • edited Loading

Choose a reason for hiding this comment

alexfauquette Jun 11, 2024

Choose a reason for hiding this comment

oliviertassinari commented Jun 1, 2024 • edited Loading

zanivan commented Jun 3, 2024

oliviertassinari commented Jun 10, 2024 • edited Loading

zanivan commented Apr 3, 2024 •

edited

Loading

mui-bot commented Apr 3, 2024 •

edited

Loading

oliviertassinari Jun 1, 2024 •

edited

Loading

oliviertassinari commented Jun 1, 2024 •

edited

Loading

oliviertassinari commented Jun 10, 2024 •

edited

Loading