[docs] Improve Toolpad Core docs #43796

bharatkashyap · 2024-09-17T11:51:46Z

Previews:

mui-bot · 2024-09-17T11:54:33Z

Netlify deploy preview

@material-ui/core: parsed: +Infinity% , gzip: +Infinity%
@mui/joy: parsed: +Infinity% , gzip: +Infinity%
@material-ui/lab: parsed: +Infinity% , gzip: +Infinity%
@mui/joy/Autocomplete: parsed: +Infinity% , gzip: +Infinity%
Autocomplete: parsed: +Infinity% , gzip: +Infinity%
TextField: parsed: +Infinity% , gzip: +Infinity%
@material-ui/unstyled: parsed: +Infinity% , gzip: +Infinity%
SpeedDialAction: parsed: +Infinity% , gzip: +Infinity%
@mui/joy/Select: parsed: +Infinity% , gzip: +Infinity%
@mui/joy/Menu: parsed: +Infinity% , gzip: +Infinity%
Tooltip: parsed: +Infinity% , gzip: +Infinity%
SwipeableDrawer: parsed: +Infinity% , gzip: +Infinity%
TabList: parsed: +Infinity% , gzip: +Infinity%
SpeedDial: parsed: +Infinity% , gzip: +Infinity%
Pagination: parsed: +Infinity% , gzip: +Infinity%
Alert: parsed: +Infinity% , gzip: +Infinity%
LoadingButton: parsed: +Infinity% , gzip: +Infinity%
Popover: parsed: +Infinity% , gzip: +Infinity%
Drawer: parsed: +Infinity% , gzip: +Infinity%
PaginationItem: parsed: +Infinity% , gzip: +Infinity%
and 271 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f19f2b6

docs/data/material/components/dialogs/dialogs.md

…pad-core-docs

Janpot

Looks good. We can add a notifications demo in a separate PR. I propose we just copy https://mui.com/toolpad/core/react-use-notifications/#close-notifications

bharatkashyap · 2024-09-20T06:43:17Z

Looks good. We can add a notifications demo in a separate PR. I propose we just copy https://mui.com/toolpad/core/react-use-notifications/#close-notifications

I can update the current notifications demo in this PR itself, should be a small change

…pad-core-docs

oliviertassinari

We are getting there 👍

docs/data/material/components/app-bar/app-bar.md

docs/data/material/components/breadcrumbs/breadcrumbs.md

oliviertassinari · 2024-09-29T12:17:07Z

docs/data/material/components/container/container.md


 ### Page Container

-The [PageContainer](https://mui.com/toolpad/core/react-page-container/) component in `@toolpad/core` is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation aware and extends it with page title, breadcrumbs, actions, and more.
+The [PageContainer](https://mui.com/toolpad/core/react-page-container/) component in `@toolpad/core` is the ideal wrapper for the content of your dashboard. It makes the Material UI Container navigation-aware and extends it with page title, breadcrumbs, actions, and more.

 {{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "hideToolbar": true}}


The dark/light mode is broken on all those demos.

As far as I understand things, theme={demoTheme} shouldn't be provided, not be the AppProvider responsibility to have this. Imagine I already have an application configured with a theme, I want some of my pages to have a Toolpad container, this shouldn't break. I mean, https://marmelab.com/react-admin/Theming.html feels wrong, no?

At minimum, MUI System should support theme nesting where you can inherit the light/dark mode and use different values for the other values.

const demoWindow = window !== undefined ? window() : undefined; feels confusing, I think it should copy

material-ui/docs/data/material/components/app-bar/HideAppBar.js

Line 31 in a80eb39

* Injected by the documentation to work in an iframe.

to be clear.

docs/data/material/components/snackbars/ToolpadNotifications.tsx

docs/data/material/components/snackbars/snackbars.md

oliviertassinari · 2024-09-29T12:38:26Z

docs/data/material/components/snackbars/ToolpadNotifications.tsx

+
+    // preview-start
+    const key = online
+      ? notifications.show('You are now online', {


Can we change the position of the notification? It feels hard to see.

The only way I can see how is to do this sort of a scoped notification: https://mui.com/toolpad/core/react-use-notifications/#scoped-notifications

Then it sounds like a missing API. Creating an issue for Toolapd could be enough.

But the position is the same as the other demos. Isn't this just hard to see because of the color? Maybe it's a matter of matching the look to the other demos?

But the position is the same as the other demos. Isn't this just hard to see because of the color? Maybe it's a matter of matching the look to the other demos?

Yes, to match the look we need to add an alert key to the slotProps for NotificationsProvider so that we can pass in variant: "filled" to the Alert being used in case a severity prop is passed (which is the case in this demo). I can make an issue on Toolpad for this, let me know what you think

the position is the same as the other demos. Isn't this just hard to see because of the color

Right fair, the position is correct, it's the visual design that is broken. https://notistack.com/features/basic for error looks correct;

…pad-core-docs

oliviertassinari · 2024-10-09T00:45:44Z

This looks much better 👍

…pad-core-docs

Janpot · 2024-10-14T07:57:21Z

docs/data/material/components/container/container.md


-{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "hideToolbar": true}}
+{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "defaultExpanded": false}}


Should this be the same as the breadcrumbs page?

Suggested change

{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "defaultExpanded": false}}

{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "bg": "inline", "defaultExpanded": false}}

docs/data/material/components/dialogs/dialogs.md

Janpot · 2024-10-14T08:03:26Z

docs/data/material/components/app-bar/app-bar.md


 The [DashboardLayout](https://mui.com/toolpad/core/react-dashboard-layout/) component from `@toolpad/core` is the starting point for dashboarding applications. It takes care of application layout, theming, navigation, and more. An example usage of this component:

-{{"demo": "DashboardLayoutBasic.js", "height": 400, "iframe": true, "hideToolbar": true}}
+{{"demo": "DashboardLayoutBasic.js", "height": 400, "iframe": true, "defaultExpanded": false}}


Should this also do bg: 'inline'?

docs/data/material/components/dialogs/dialogs.md

Janpot

Just one last suggestion

prakhargupta1 · 2024-10-15T10:52:09Z

https://deploy-preview-43796--material-ui.netlify.app/material-ui/react-dialog/#usedialogs
There seems to be an extra code block below the demo. Not sure if it is intentional.

bharatkashyap · 2024-10-15T12:41:32Z

https://deploy-preview-43796--material-ui.netlify.app/material-ui/react-dialog/#usedialogs There seems to be an extra code block below the demo. Not sure if it is intentional.

A remnant of when the demo had hideToolbar set to true - I'll remove it in a separate PR

bharatkashyap added 2 commits September 17, 2024 16:31

fix: Toolpad Core mentions

cc061e5

fix: Demo spacing

bbdff62

bharatkashyap added the docs Improvements or additions to the documentation label Sep 17, 2024

zannager requested a review from Janpot September 17, 2024 16:02

Janpot reviewed Sep 18, 2024

View reviewed changes

docs/data/material/components/dialogs/dialogs.md Outdated Show resolved Hide resolved

bharatkashyap added 3 commits September 18, 2024 14:44

fix: CI

6d30b3e

fix: Jan feedback

31932f9

fix: CI

3c41def

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

bharatkashyap added 2 commits September 18, 2024 20:35

Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

655ea3e

…pad-core-docs

fix: CI

e55719c

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

fix: CI

eb195e8

Janpot approved these changes Sep 19, 2024

View reviewed changes

bharatkashyap added 2 commits September 20, 2024 14:38

fix: Add better notifs demo

0b7fe3f

fix: CI

92ba569

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

Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

a111ee1

…pad-core-docs

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

fix: CI

bf03532

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

Janpot mentioned this pull request Sep 26, 2024

Broken theme #43891

Closed

oliviertassinari reviewed Sep 29, 2024

View reviewed changes

oliviertassinari added the Toolpad label Sep 29, 2024

bharatkashyap added 2 commits October 1, 2024 00:42

fix: Olivier review

46dcc36

Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

794c4be

…pad-core-docs

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

fix: CI

6936458

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

Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

2faedd3

…pad-core-docs

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Oct 2, 2024

Janpot self-requested a review October 7, 2024 09:48

Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

2e2052c

…pad-core-docs

bharatkashyap mentioned this pull request Oct 14, 2024

[useNotifications] Add alert slot to NotificationsProvider mui/toolpad#4256

Open

Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

54cc265

…pad-core-docs

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

Janpot reviewed Oct 14, 2024

View reviewed changes

docs/data/material/components/dialogs/dialogs.md Outdated Show resolved Hide resolved

Janpot reviewed Oct 14, 2024

View reviewed changes

fix: Jan review

79f374a

Janpot reviewed Oct 14, 2024

View reviewed changes

docs/data/material/components/dialogs/dialogs.md Outdated Show resolved Hide resolved

Janpot approved these changes Oct 14, 2024

View reviewed changes

fix: Jan review 2

f19f2b6

bharatkashyap merged commit 1719ed4 into mui:master Oct 15, 2024
22 checks passed

bharatkashyap mentioned this pull request Oct 16, 2024

[docs][toolpad] Remove extra code block #44120

Open

Hoang-Nguyen-Huy mentioned this pull request Nov 9, 2024

[Snyk] Upgrade @mui/icons-material from 6.1.3 to 6.1.4 Hoang-Nguyen-Huy/fer-lab1#20

Merged

prakhargupta1 mentioned this pull request Nov 12, 2024

[docs] Replace 'Experimental APIs - Toolpad' with 'Toolpad (Beta)' #44388

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Improve Toolpad Core docs #43796

[docs] Improve Toolpad Core docs #43796

bharatkashyap commented Sep 17, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Sep 17, 2024 •

edited

Loading

Janpot left a comment

bharatkashyap commented Sep 20, 2024

oliviertassinari left a comment

oliviertassinari Sep 29, 2024 •

edited

Loading

oliviertassinari Sep 29, 2024 •

edited

Loading

oliviertassinari Sep 29, 2024 •

edited

Loading

bharatkashyap Sep 30, 2024

oliviertassinari Oct 9, 2024

Janpot Oct 9, 2024

bharatkashyap Oct 9, 2024 •

edited

Loading

oliviertassinari Oct 15, 2024

oliviertassinari commented Oct 9, 2024

Janpot Oct 14, 2024

Janpot Oct 14, 2024

Janpot left a comment

prakhargupta1 commented Oct 15, 2024 •

edited

Loading

bharatkashyap commented Oct 15, 2024


		{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "hideToolbar": true}}
		{{"demo": "../breadcrumbs/PageContainerBasic.js", "height": 400, "defaultExpanded": false}}

[docs] Improve Toolpad Core docs #43796

[docs] Improve Toolpad Core docs #43796

Conversation

bharatkashyap commented Sep 17, 2024 • edited by oliviertassinari Loading

mui-bot commented Sep 17, 2024 • edited Loading

Netlify deploy preview

Bundle size report

Janpot left a comment

Choose a reason for hiding this comment

bharatkashyap commented Sep 20, 2024

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Sep 29, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Sep 29, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Sep 29, 2024 • edited Loading

Choose a reason for hiding this comment

bharatkashyap Sep 30, 2024

Choose a reason for hiding this comment

oliviertassinari Oct 9, 2024

Choose a reason for hiding this comment

Janpot Oct 9, 2024

Choose a reason for hiding this comment

bharatkashyap Oct 9, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Oct 15, 2024

Choose a reason for hiding this comment

oliviertassinari commented Oct 9, 2024

Janpot Oct 14, 2024

Choose a reason for hiding this comment

Janpot Oct 14, 2024

Choose a reason for hiding this comment

Janpot left a comment

Choose a reason for hiding this comment

prakhargupta1 commented Oct 15, 2024 • edited Loading

bharatkashyap commented Oct 15, 2024

bharatkashyap commented Sep 17, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Sep 17, 2024 •

edited

Loading

oliviertassinari Sep 29, 2024 •

edited

Loading

oliviertassinari Sep 29, 2024 •

edited

Loading

oliviertassinari Sep 29, 2024 •

edited

Loading

bharatkashyap Oct 9, 2024 •

edited

Loading

prakhargupta1 commented Oct 15, 2024 •

edited

Loading