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

zanivan · 2024-05-29T15:02:22Z

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

Closes #42610
Preview: https://deploy-preview-42445--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/

Objective

👉 This is a further PR to add small tweaks and fixes to the Dashboard template after #41757.

Tasks

Adding some tweaks to the template based on Olivier's feedback #42610

1. Fix scrollbar origin

2. Fix the dark mode toggle to persist between loads (will be addressed in a future PR)

Screen.Recording.2024-06-01.at.20.32.43.mov

~~3. Fix keyboard focus style on the tabs~~ Fixed since we removed tabs

4. Polish out the table design (still missing some tweaks on the menu, and spacing)

#41757 (comment)

5. Add side navigation menu (add mobile version)

mui-bot · 2024-05-29T15:05:42Z

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 6eb9198

danilo-leal

Awesome — dropping a first pass here.

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

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

docs/data/material/getting-started/templates/dashboard/components/Navbar.js

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

zanivan · 2024-05-29T17:23:54Z

@noraleonte I noticed that the TreeView has a custom class for focus, and I couldn't disable it on click. I believe the focus-visible styles are showing up here because this class acts in place of the native classes, right? What is the difference/benefit of this custom class versus the native one? 🤔

noraleonte

Great work on these improvement 🎉 I am leaving some nitpicks to finetune, let me know if you need help with any of them. 🎉

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

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

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

…polishing

zanivan · 2024-06-06T17:45:42Z

Hey @noraleonte, thanks for the feedback! I'm still adding many changes, but I'll definitely need some help code-wise. Can you help me with these?

1. Making menus consistent:

All these menus should look similar regarding states and padding. The 'Development' select is IMO the best, so if others could be like that would be amazing!

2. Some of Olivier's feedbacks:

Fix scrollbar origin
Fix the dark mode toggle to persist between loads
Fix keyboard focus style on the tabs
Make the data grid keyboard focus scroll the page

3. Performance and best practices

This should be the reference of best practices regarding customising Material UI and X, so it's important to review everything and reassure that:

Users can learn how to customize components from this;
Users can easily copy chunks of code, regardless the theme is selected;
No third-party code from docs or other sources that the users won't know of;
Be accessible and score as high as possible on Lighthouse score;

I tried to cover all of these, but someone with a better code knowledge would likely spot some loose ends 👍

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

DiegoAndai

@zanivan here is some feedback, I haven't gone through the entire PR yet

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

docs/data/material/getting-started/templates/dashboard/components/MainGrid.js

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

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

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

…ivan/material-ui into pr/42445

DiegoAndai · 2024-07-03T20:37:06Z

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

+      sx={{
+        maxHeight: 56,
+        width: 215,
+        '&.MuiList-root': {


We should use listClasses.root

Tried replacing it for:

[`&. ${listClasses.root}`]: { p: '8px', },

and importing it like:
import listClasses from '@mui/material/List';

However, I got the error:
Property 'root' does not exist on type 'ExtendList<ListTypeMap<{}, "ul">>'.ts(2339)

DiegoAndai · 2024-07-03T20:40:47Z

docs/data/material/getting-started/templates/dashboard/components/StatCard.js

@@ -10,6 +10,21 @@ import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 import { areaElementClasses } from '@mui/x-charts/LineChart';

+function getDaysInMonth(month, year) {


The docs package has date-fns as a dependency, could we use it for this?

Just to clarify, is it a dependency for MUI/docs or for the Material UI package as well? If it's not a dependency for Material UI, I think we shouldn't include it in the templates, since we don't want to bundle extra stuff in the templates other than Material UI's dependencies.

docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts

docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts

docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts

zanivan · 2024-07-04T17:41:48Z

docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts

+        '&:hover': {
+          backgroundColor: theme.palette.action.hover,
+        },
+        '&.Mui-selected': {


@DiegoAndai couldn't find an alternative for replacing this one

I was also looking for an import for this class recently (commenting to get GH updates on this 👀)

zanivan · 2024-07-04T17:42:30Z

docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx

+        boxShadow:
+          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+        [`& .${buttonBaseClasses.root}`]: {
+          '&.Mui-selected': {


Same as above

zanivan · 2024-07-04T17:45:30Z

docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx

+            backgroundColor: theme.palette.background.paper,
+            boxShadow: 'none',
+          },
+          [`&.${selectClasses.focused}`]: {


I'm getting an error here Property 'focused' does not exist on type 'SelectClasses'.ts(2339), however, it seems that selectClasses does have a focused property 🤔

KenanYusuf

Looking great. There are a few minor things I noticed:

1. The "Rows per page" select is missing a focus style

2. On the tree view, focusing on the parent elements also adds a focus style to the child elements.

product-tree.mp4

3. On the data grid, the horizontal spacing could be tightened slightly in the menu overlays. 4px left/right and 8px top/bottom?

4. The alignment looks off between the checkboxes and search field.

5. The select fields in the filter panel need some horizontal spacing, and the text input could be updated to be more in line with the select styles.

6. The data grid could use an overlay height to prevent it collapsing like this when filters are applied:

7. There is a bit of a visual glitch when grid menus open. The box-shadow is fully visible whilst the menu is animating in and out.

data-grid-shadow.mp4

zanivan added 3 commits May 29, 2024 11:21

Stray design tweaks

656f5ae

Improve a11y

4ed55c1

Run scripts

a691f09

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

zanivan self-assigned this May 29, 2024

zanivan requested review from danilo-leal and noraleonte May 29, 2024 15:02

danilo-leal reviewed May 29, 2024

View reviewed changes

Danilo's feedback

6658704

More design tweaks

214aee7

zanivan mentioned this pull request Jun 3, 2024

[material-ui] Refine Dashboard template #41757

Merged

1 task

zanivan added 3 commits June 4, 2024 14:11

Remove even background color from data grid

d3ad0bc

Replace tabs for sidemenu

325b002

More visual tweaks

c6f3c1e

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

noraleonte reviewed Jun 5, 2024

View reviewed changes

zanivan marked this pull request as draft June 5, 2024 13:36

zanivan added 2 commits June 5, 2024 14:53

Merge remote-tracking branch 'upstream/next' into dashboard-template-…

1f22e2b

…polishing

Stray design tweaks

0a7b7c1

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

Stray tweaks

3e6ab9b

zanivan commented Jun 6, 2024

View reviewed changes

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

danilo-leal and others added 3 commits June 6, 2024 20:50

fix CardAlert

860d0b3

Add visual tweaks to the select

31e188f

Run docs:typescript:formatted

5103c11

zanivan added 4 commits June 28, 2024 13:42

Stray polishing

a406e79

Run scripts

54906f0

Fix tests

522fdf1

Simplify chart colors

4b4d4a6

DiegoAndai reviewed Jun 28, 2024

View reviewed changes

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

zanivan added 6 commits July 1, 2024 15:23

Remove sx-like props

8f37414

Merge branch 'next' into pr/42445

0e4641e

Remove unused items on navbar

d7a29e4

Fix grid changes

f64168d

Remove hardcoded classes

7bbf911

Fix lint

70033a5

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

zanivan requested a review from DiegoAndai July 1, 2024 20:19

zanivan and others added 5 commits July 2, 2024 15:40

Trigger CI

6469a01

Bump contrast

3dddf23

add little round of polish

7dd8ecd

Stray tweaks to data grid

f8a2401

Merge branch 'dashboard-template-polishing' of https://github.com/zan…

593b429

…ivan/material-ui into pr/42445

zanivan mentioned this pull request Jul 3, 2024

[draft][material-ui][docs] Revamp templates page #42710

Draft

1 task

Round of polishing

f6d6b95

DiegoAndai reviewed Jul 3, 2024

View reviewed changes

zanivan added 4 commits July 4, 2024 13:57

Remove 'Mui-'

088d812

Run docs:typescript:formatted

9c558c8

Fix typo on datePickers

1722d3c

Remove whitespace

8b6165c

zanivan commented Jul 4, 2024

View reviewed changes

KenanYusuf reviewed Jul 8, 2024

View reviewed changes

noraleonte added 2 commits July 9, 2024 18:07

fix tree view and grid pagination

cfe1afd

wip

6eb9198

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

zanivan commented May 29, 2024 •

edited by danilo-leal

Loading

mui-bot commented May 29, 2024 •

edited

Loading

danilo-leal left a comment

zanivan commented May 29, 2024

noraleonte left a comment

zanivan commented Jun 6, 2024

DiegoAndai left a comment

DiegoAndai Jul 3, 2024

zanivan Jul 4, 2024

DiegoAndai Jul 3, 2024

zanivan Jul 4, 2024

zanivan Jul 4, 2024

KenanYusuf Jul 8, 2024

zanivan Jul 4, 2024

zanivan Jul 4, 2024

KenanYusuf left a comment •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

zanivan commented May 29, 2024 • edited by danilo-leal Loading

Objective

Tasks

mui-bot commented May 29, 2024 • edited Loading

Netlify deploy preview

Bundle size report

danilo-leal left a comment

Choose a reason for hiding this comment

zanivan commented May 29, 2024

noraleonte left a comment

Choose a reason for hiding this comment

zanivan commented Jun 6, 2024

1. Making menus consistent:

2. Some of Olivier's feedbacks:

3. Performance and best practices

DiegoAndai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf left a comment • edited Loading

Choose a reason for hiding this comment

zanivan commented May 29, 2024 •

edited by danilo-leal

Loading

mui-bot commented May 29, 2024 •

edited

Loading

KenanYusuf left a comment •

edited

Loading