theme.palette.primary.main }}>
From e105c15fb96e17c3c15c77c877a218301e3cf33d Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Tue, 30 Apr 2024 19:48:10 +0100
Subject: [PATCH 26/63] DashboardLayout docs, missing API reference
---
...boardLayout.js => DashboardLayoutBasic.js} | 3 +-
.../DashboardLayoutBranding.js | 154 ++++++++++++
.../DashboardLayoutNavigation.js | 221 ++++++++++++++++++
.../dashboard-layout/dashboard-layout.md | 29 ++-
4 files changed, 404 insertions(+), 3 deletions(-)
rename docs/data/toolpad/core/components/dashboard-layout/{DashboardLayout.js => DashboardLayoutBasic.js} (98%)
create mode 100644 docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
create mode 100644 docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayout.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
similarity index 98%
rename from docs/data/toolpad/core/components/dashboard-layout/DashboardLayout.js
rename to docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
index fc381e7279b..091fd7338a5 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayout.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
@@ -113,7 +113,8 @@ const theme = createTheme(baseTheme, {
styleOverrides: {
root: {
borderBottomWidth: 2,
- margin: '8px 16px',
+ marginLeft: '16px',
+ marginRight: '16px',
},
},
},
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
new file mode 100644
index 00000000000..c374ebd1bee
--- /dev/null
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { createTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+const baseTheme = createTheme();
+
+const theme = createTheme(baseTheme, {
+ palette: {
+ background: {
+ default: baseTheme.palette.grey['50'],
+ },
+ },
+ typography: {
+ h6: {
+ fontWeight: '700',
+ },
+ },
+ components: {
+ MuiAppBar: {
+ styleOverrides: {
+ root: {
+ borderWidth: 0,
+ borderBottomWidth: 1,
+ borderStyle: 'solid',
+ borderColor: baseTheme.palette.divider,
+ boxShadow: 'none',
+ },
+ },
+ },
+ MuiList: {
+ styleOverrides: {
+ root: {
+ padding: 0,
+ },
+ },
+ },
+ MuiIconButton: {
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.primary.dark,
+ padding: 8,
+ },
+ },
+ },
+ MuiListSubheader: {
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.grey['600'],
+ fontSize: 12,
+ fontWeight: '700',
+ height: 40,
+ paddingLeft: 32,
+ },
+ },
+ },
+ MuiListItem: {
+ styleOverrides: {
+ root: {
+ paddingTop: 0,
+ paddingBottom: 0,
+ },
+ },
+ },
+ MuiListItemButton: {
+ styleOverrides: {
+ root: {
+ borderRadius: 8,
+ '&.Mui-selected': {
+ '& .MuiListItemIcon-root': {
+ color: baseTheme.palette.primary.dark,
+ },
+ '& .MuiTypography-root': {
+ color: baseTheme.palette.primary.dark,
+ },
+ '& .MuiSvgIcon-root': {
+ color: baseTheme.palette.primary.dark,
+ },
+ '& .MuiTouchRipple-child': {
+ backgroundColor: baseTheme.palette.primary.dark,
+ },
+ },
+ '& .MuiSvgIcon-root': {
+ color: baseTheme.palette.action.active,
+ },
+ },
+ },
+ },
+ MuiListItemText: {
+ styleOverrides: {
+ root: {
+ '& .MuiTypography-root': {
+ fontWeight: '500',
+ },
+ },
+ },
+ },
+ MuiListItemIcon: {
+ styleOverrides: {
+ root: {
+ minWidth: 34,
+ },
+ },
+ },
+ MuiDivider: {
+ styleOverrides: {
+ root: {
+ borderBottomWidth: 2,
+ marginLeft: '16px',
+ marginRight: '16px',
+ },
+ },
+ },
+ },
+});
+
+const NAVIGATION = [
+ {
+ title: 'Dashboard',
+ icon: ,
+ },
+ {
+ title: 'Orders',
+ icon: ,
+ },
+];
+
+const BRANDING = {
+ logo: 
,
+ title: 'MUI',
+};
+
+export default function BrandingDashboardLayout() {
+ return (
+
+
+
+ Dashboard content goes here.
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
new file mode 100644
index 00000000000..4543b306b9d
--- /dev/null
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { createTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DescriptionIcon from '@mui/icons-material/Description';
+import FolderIcon from '@mui/icons-material/Folder';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+const baseTheme = createTheme();
+
+const theme = createTheme(baseTheme, {
+ palette: {
+ background: {
+ default: baseTheme.palette.grey['50'],
+ },
+ },
+ typography: {
+ h6: {
+ fontWeight: '700',
+ },
+ },
+ components: {
+ MuiAppBar: {
+ styleOverrides: {
+ root: {
+ borderWidth: 0,
+ borderBottomWidth: 1,
+ borderStyle: 'solid',
+ borderColor: baseTheme.palette.divider,
+ boxShadow: 'none',
+ },
+ },
+ },
+ MuiList: {
+ styleOverrides: {
+ root: {
+ padding: 0,
+ },
+ },
+ },
+ MuiIconButton: {
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.primary.dark,
+ padding: 8,
+ },
+ },
+ },
+ MuiListSubheader: {
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.grey['600'],
+ fontSize: 12,
+ fontWeight: '700',
+ height: 40,
+ paddingLeft: 32,
+ },
+ },
+ },
+ MuiListItem: {
+ styleOverrides: {
+ root: {
+ paddingTop: 0,
+ paddingBottom: 0,
+ },
+ },
+ },
+ MuiListItemButton: {
+ styleOverrides: {
+ root: {
+ borderRadius: 8,
+ '&.Mui-selected': {
+ '& .MuiListItemIcon-root': {
+ color: baseTheme.palette.primary.dark,
+ },
+ '& .MuiTypography-root': {
+ color: baseTheme.palette.primary.dark,
+ },
+ '& .MuiSvgIcon-root': {
+ color: baseTheme.palette.primary.dark,
+ },
+ '& .MuiTouchRipple-child': {
+ backgroundColor: baseTheme.palette.primary.dark,
+ },
+ },
+ '& .MuiSvgIcon-root': {
+ color: baseTheme.palette.action.active,
+ },
+ },
+ },
+ },
+ MuiListItemText: {
+ styleOverrides: {
+ root: {
+ '& .MuiTypography-root': {
+ fontWeight: '500',
+ },
+ },
+ },
+ },
+ MuiListItemIcon: {
+ styleOverrides: {
+ root: {
+ minWidth: 34,
+ },
+ },
+ },
+ MuiDivider: {
+ styleOverrides: {
+ root: {
+ borderBottomWidth: 2,
+ marginLeft: '16px',
+ marginRight: '16px',
+ },
+ },
+ },
+ },
+});
+
+const NAVIGATION = [
+ {
+ title: 'Item 1',
+ icon: ,
+ },
+ {
+ title: 'Item 2',
+ icon: ,
+ },
+ {
+ title: 'Folder 1',
+ icon: ,
+ children: [
+ {
+ title: 'Item A1',
+ icon: ,
+ },
+ {
+ title: 'Item A2',
+ icon: ,
+ },
+ {
+ title: 'Folder A1',
+ icon: ,
+ children: [
+ {
+ title: 'Item B1',
+ icon: ,
+ },
+ {
+ title: 'Item B2',
+ icon: ,
+ },
+ ],
+ },
+ ],
+ },
+ { kind: 'divider' },
+ {
+ kind: 'header',
+ title: 'Header 1',
+ },
+ {
+ title: 'Item A',
+ icon: ,
+ },
+ {
+ kind: 'header',
+ title: 'Header 2',
+ },
+ {
+ title: 'Item B',
+ icon: ,
+ },
+ {
+ title: 'Folder 3',
+ icon: ,
+ children: [
+ {
+ kind: 'header',
+ title: 'Header A1',
+ },
+ {
+ title: 'Item C1',
+ icon: ,
+ },
+ {
+ title: 'Item C2',
+ icon: ,
+ },
+ { kind: 'divider' },
+ {
+ kind: 'header',
+ title: 'Header A2',
+ },
+ {
+ title: 'Item C3',
+ icon: ,
+ },
+ ],
+ },
+];
+
+export default function NavigationDashboardLayout() {
+ return (
+
+
+
+ Dashboard content goes here.
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
index d8d05c82e28..563c33b1ac6 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
+++ b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
@@ -1,5 +1,30 @@
# Dashboard Layout
-Dashboard layout component.
+The dashboard layout component provides a customizable out-of-the-box layout for a typical dashboard page.
-{{"demo": "DashboardLayout.js", "height": 600, "iframe": true}}
+## Demo
+
+A DashboardLayout comes with a configurable header and sidebar with navigation.
+
+{{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}}
+
+Some features of this layout depend on the `AppProvider` component that must be present at the base application level.
+
+## Branding
+
+The `branding` prop in the `AppProvider` allows for setting a `logo` or `title` in the page header.
+
+{{"demo": "DashboardLayoutBranding.js", "height": 500, "iframe": true}}
+
+## Navigation
+
+The `navigation` prop in the `AppProvider` allows for setting any type of navigation structure in the sidebar, such as links, headings, nested collapsible lists and dividers, in any order.
+
+{{"demo": "DashboardLayoutNavigation.js", "height": 640, "iframe": true}}
+
+## API
+
+See the documentation below for a complete reference to all of the props available to the components mentioned here.
+
+- [``](/toolpad/studio/reference/components/app-provider/#properties)
+- [``](/toolpad/studio/reference/components/dashboard-layout/#properties)
From 0327c4fc645cb28e5dd985e4bf6ad867f3486a49 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 2 May 2024 18:43:34 +0100
Subject: [PATCH 27/63] Update
---
.../core/api/components/dashboard-layout.md | 3 +++
.../data/toolpad/core/api/components/dashboard.md | 3 ---
docs/data/toolpad/core/api/index.md | 2 +-
.../dashboard-layout/DashboardLayoutNavigation.js | 2 +-
.../dashboard-layout/dashboard-layout.md | 8 ++++----
docs/data/toolpad/core/pages.ts | 4 ++--
.../api/{dashboard.js => dashboard-layout.js} | 2 +-
.../create-toolpad-app/src/generateProject.ts | 3 ++-
.../toolpad-core/src/AppProvider/AppProvider.tsx | 2 +-
.../src/DashboardLayout/DashboardLayout.tsx | 15 +++++++++++----
playground/toolpad-core-nextjs/src/app/theme.ts | 3 ++-
11 files changed, 28 insertions(+), 19 deletions(-)
create mode 100644 docs/data/toolpad/core/api/components/dashboard-layout.md
delete mode 100644 docs/data/toolpad/core/api/components/dashboard.md
rename docs/pages/toolpad/core/api/{dashboard.js => dashboard-layout.js} (80%)
diff --git a/docs/data/toolpad/core/api/components/dashboard-layout.md b/docs/data/toolpad/core/api/components/dashboard-layout.md
new file mode 100644
index 00000000000..e099cc8857f
--- /dev/null
+++ b/docs/data/toolpad/core/api/components/dashboard-layout.md
@@ -0,0 +1,3 @@
+# Dashboard Layout API
+
+DashboardLayout API reference
diff --git a/docs/data/toolpad/core/api/components/dashboard.md b/docs/data/toolpad/core/api/components/dashboard.md
deleted file mode 100644
index 4fbe818460c..00000000000
--- a/docs/data/toolpad/core/api/components/dashboard.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Dashboard API
-
-Dashboard API reference
diff --git a/docs/data/toolpad/core/api/index.md b/docs/data/toolpad/core/api/index.md
index 2ee020a6458..b8fa7bc5387 100644
--- a/docs/data/toolpad/core/api/index.md
+++ b/docs/data/toolpad/core/api/index.md
@@ -4,7 +4,7 @@
## Components
-- [Dashboard](/toolpad/core/api/dashboard/)
+- [Dashboard Layout](/toolpad/core/api/dashboard-layout/)
- [Data Grid](/toolpad/core/api/data-grid/)
- [Line Chart](/toolpad/core/api/line-chart/)
- [Select Filter](/toolpad/core/api/select-filter/)
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
index 4543b306b9d..6f427dfaa3e 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
@@ -173,7 +173,7 @@ const NAVIGATION = [
icon: ,
},
{
- title: 'Folder 3',
+ title: 'Folder 2',
icon: ,
children: [
{
diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
index 563c33b1ac6..645e2d2a5e0 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
+++ b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
@@ -4,7 +4,7 @@
## Demo
-A DashboardLayout comes with a configurable header and sidebar with navigation.
+A DashboardLayout has a configurable header and sidebar with navigation.
{{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}}
@@ -22,9 +22,9 @@ The `navigation` prop in the `AppProvider` allows for setting any type of naviga
{{"demo": "DashboardLayoutNavigation.js", "height": 640, "iframe": true}}
-## API
+
diff --git a/docs/data/toolpad/core/pages.ts b/docs/data/toolpad/core/pages.ts
index 054a1ac0b8c..fc88395282b 100644
--- a/docs/data/toolpad/core/pages.ts
+++ b/docs/data/toolpad/core/pages.ts
@@ -110,8 +110,8 @@ const pages: MuiPage[] = [
subheader: 'Components',
children: [
{
- pathname: '/toolpad/core/api/dashboard',
- title: 'Dashboard',
+ pathname: '/toolpad/core/api/dashboard-layout',
+ title: 'DashboardLayout',
},
{
pathname: '/toolpad/core/api/data-grid',
diff --git a/docs/pages/toolpad/core/api/dashboard.js b/docs/pages/toolpad/core/api/dashboard-layout.js
similarity index 80%
rename from docs/pages/toolpad/core/api/dashboard.js
rename to docs/pages/toolpad/core/api/dashboard-layout.js
index 35698b69d33..6eb70763b78 100644
--- a/docs/pages/toolpad/core/api/dashboard.js
+++ b/docs/pages/toolpad/core/api/dashboard-layout.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../data/toolpad/core/api/components/dashboard-layout/dashboard-layout.md?muiMarkdown';
+import * as pageProps from '../../../../data/toolpad/core/api/components/dashboard-layout.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
index 9fd3d194fbe..44fedeb8e7a 100644
--- a/packages/create-toolpad-app/src/generateProject.ts
+++ b/packages/create-toolpad-app/src/generateProject.ts
@@ -205,7 +205,8 @@ export default function generateProject(
styleOverrides: {
root: {
borderBottomWidth: 2,
- margin: '8px 16px',
+ marginLeft: '16px',
+ marginRight: '16px',
},
},
},
diff --git a/packages/toolpad-core/src/AppProvider/AppProvider.tsx b/packages/toolpad-core/src/AppProvider/AppProvider.tsx
index adfe99e1980..d4cb21f5855 100644
--- a/packages/toolpad-core/src/AppProvider/AppProvider.tsx
+++ b/packages/toolpad-core/src/AppProvider/AppProvider.tsx
@@ -4,7 +4,7 @@ import CssBaseline from '@mui/material/CssBaseline';
import type { Theme } from '@emotion/react';
export interface Branding {
- name?: string;
+ title?: string;
logo?: React.ReactNode;
}
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
index 00552ce27f3..0aff5c25be5 100644
--- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
+++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -86,7 +86,7 @@ function DashboardSidebarSubNavigation({
);
return (
-
+
{subNavigation.map((navigationItem, navigationItemIndex) => {
if (navigationItem.kind === 'header') {
return (
@@ -97,7 +97,14 @@ function DashboardSidebarSubNavigation({
}
if (navigationItem.kind === 'divider') {
- return ;
+ const nextItem = subNavigation[navigationItemIndex + 1];
+
+ return (
+
+ );
}
const navigationItemId = `${navigationItem.title}-${depth}-${navigationItemIndex}`;
@@ -178,7 +185,7 @@ export function DashboardLayout({