[material-ui][docs] Add improvements to Dashboard template by zanivan · Pull Request #42445 · mui/material-ui

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 e4b9a20

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

…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

 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

…ivan/material-ui into pr/42445

noraleonte

Looks good to me 🎉

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: noraleonte <noraleonte00@gmail.com>

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

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

Closed

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 4 commits July 9, 2024 18:07

fix tree view and grid pagination

cfe1afd

wip

6eb9198

fix filterform

528569e

fix

dc92ade

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

zanivan added 4 commits July 15, 2024 09:30

Merge branch 'next' into pr/42445

eb40a6d

run scripts

4c76bb4

run pnpm template:screenshot material-ui

4a4f49e

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

ae8149c

…ivan/material-ui into pr/42445

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

Updated images

328d00d

noraleonte approved these changes Jul 16, 2024

View reviewed changes

zanivan and others added 6 commits July 16, 2024 14:27

Run pnpm docs:typescript:formatted

177a0b3

Merge branch 'next' into pr/42445

c5804f6

fix shadows

7e4b6ba

Run pnpm docs:api

e14e970

Fix tests

91dce47

fix

e4b9a20

zanivan merged commit 611a2ca into mui:next Jul 17, 2024

Uh oh!

Conversation

zanivan commented May 29, 2024 • edited by danilo-leal Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Objective

Tasks

Uh oh!

mui-bot commented May 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

danilo-leal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zanivan commented May 29, 2024

Uh oh!

noraleonte left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zanivan commented Jun 6, 2024

1. Making menus consistent:

2. Some of Olivier's feedbacks:

3. Performance and best practices

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kenanyusuf left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

noraleonte left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

zanivan commented May 29, 2024 •

edited by danilo-leal

Loading

mui-bot commented May 29, 2024 •

edited

Loading

kenanyusuf left a comment •

edited

Loading