(
- function ProductSubMenu({ icon, name, description, href, ...props }, ref) {
+ function ProductSubMenu({ icon, name, description, chip, href, ...props }, ref) {
return (
(
display: 'flex',
alignItems: 'center',
py: 2,
+ pr: 3,
'&:hover, &:focus': {
backgroundColor: (theme) =>
theme.palette.mode === 'dark'
@@ -92,14 +102,15 @@ const ProductSubMenu = React.forwardRef(
>
{icon}
-
-
+
+
{name}
{description}
-
+
+ {chip}
);
},
@@ -315,6 +326,21 @@ export default function HeaderNavBar() {
onKeyDown={handleKeyDown}
/>
+ {/* @ts-ignore */}
+ {process.env.STAGING === true ? (
+
+ }
+ name="MUI Toolpad"
+ chip={}
+ description="Low-code tool builder, powered by MUI."
+ onKeyDown={handleKeyDown}
+ />
+
+ ) : null}
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index 2c779d86b4fadd..76f406a69f91ff 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
+import Chip from '@mui/material/Chip';
import ClickAwayListener from '@mui/base/ClickAwayListener';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
@@ -13,7 +14,7 @@ import ROUTES from 'docs/src/route';
const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
({ theme }) => ({
...theme.typography.body2,
- fontWeight: 700,
+ fontWeight: theme.typography.fontWeightBold,
textDecoration: 'none',
border: 'none',
width: '100%',
@@ -63,6 +64,17 @@ const PRODUCTS = [
description: 'Our components available in your favorite design tool.',
href: ROUTES.productDesignKits,
},
+ // @ts-ignore
+ ...(process.env.STAGING === true
+ ? [
+ {
+ name: 'MUI Toolpad',
+ description: 'Low-code tool builder, powered by MUI.',
+ href: ROUTES.productToolpad,
+ chip: 'Alpha',
+ },
+ ]
+ : []),
];
const DOCS = [
@@ -91,6 +103,16 @@ const DOCS = [
description: 'Advanced and powerful components for complex use cases.',
href: ROUTES.advancedComponents,
},
+ // @ts-ignore
+ ...(process.env.STAGING === true
+ ? [
+ {
+ name: 'MUI Toolpad',
+ description: 'Low-code tool builder, powered by MUI.',
+ href: ROUTES.toolpadDocs,
+ },
+ ]
+ : []),
];
export default function HeaderNavDropdown() {
@@ -188,7 +210,18 @@ export default function HeaderNavDropdown() {
noLinkStyle
sx={{ flexDirection: 'column', alignItems: 'initial' }}
>
- {item.name}
+
+ {item.name}
+ {item.chip ? (
+
+ ) : null}
+
{item.description}
@@ -232,7 +265,7 @@ export default function HeaderNavDropdown() {
noLinkStyle
sx={{ flexDirection: 'column', alignItems: 'initial' }}
>
- {item.name}
+ {item.name}
{item.description}
diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
index 10242fcdd1a820..993f64e068f03c 100644
--- a/docs/src/components/icon/IconImage.tsx
+++ b/docs/src/components/icon/IconImage.tsx
@@ -7,6 +7,7 @@ export type IconImageProps = {
name:
| 'product-core'
| 'product-advanced'
+ | 'product-toolpad'
| 'product-templates'
| 'product-designkits'
| 'block-green'
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index eba051bca3ef36..0b86e88b8ea9eb 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -16,6 +16,7 @@ export default function SectionHeadline({
const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
+
return (
MUI X
Templates
Design kits
+ MUI Toolpad
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 04a09bf0ac1775..4a9282bb80b7e9 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -37,6 +37,12 @@ declare module '@mui/material/styles/createTypography' {
}
}
+declare module '@mui/material/Chip' {
+ interface ChipPropsColorOverrides {
+ grey: true;
+ }
+}
+
// TODO: enable this once types conflict is fixed
// declare module '@mui/material/Button' {
// interface ButtonPropsVariantOverrides {
@@ -128,19 +134,26 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
common: {
black: '#1D1D1D',
},
- ...(mode === 'light' && {
- text: {
+ text: {
+ ...(mode === 'light' && {
primary: grey[900],
secondary: grey[700],
- },
- }),
- ...(mode === 'dark' && {
- text: {
+ }),
+ ...(mode === 'dark' && {
primary: '#fff',
secondary: grey[400],
- },
- }),
- grey,
+ }),
+ },
+ grey: {
+ ...(mode === 'light' && {
+ main: grey[100],
+ contrastText: grey[600],
+ }),
+ ...(mode === 'dark' && {
+ main: blueDark[700],
+ contrastText: grey[600],
+ }),
+ },
error: {
50: '#FFF0F1',
100: '#FFDBDE',
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 11ff22297f2bdc..216d0954bbabc0 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -466,6 +466,9 @@ export default function AppNavDrawer(props) {
])}
/>
)}
+ {asPathWithoutLang.startsWith('/toolpad') && (
+
+ )}
// Foo
//
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index 77627755bcdba5..e79e0f43eec501 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -9,24 +9,23 @@ import ROUTES from 'docs/src/route';
import Link from 'docs/src/modules/components/Link';
import useRouterExtra from 'docs/src/modules/utils/useRouterExtra';
-function ProductSubMenu({
- icon,
- name,
- description,
- sx = [],
- ...props
-}: {
+interface ProductSubMenuProp extends BoxProps {
icon: React.ReactNode;
name: React.ReactNode;
description: React.ReactNode;
-} & BoxProps) {
+ chip?: React.ReactNode;
+}
+
+function ProductSubMenu(props: ProductSubMenuProp) {
+ const { icon, name, description, chip, sx = [], ...other } = props;
return (
{icon}
-
+
{name}
{description}
-
+
+ {chip}
);
}
@@ -89,6 +89,7 @@ export default function MuiProductSelector() {
role="none"
sx={{
p: 2,
+ pr: 3,
borderBottom: '1px solid',
borderColor: (theme) =>
theme.palette.mode === 'dark'
@@ -102,14 +103,7 @@ export default function MuiProductSelector() {
name="MUI Core"
description="Ready-to-use foundational components, free forever."
/>
-
+
+ theme.palette.mode === 'dark'
+ ? alpha(theme.palette.primary[100], 0.08)
+ : theme.palette.grey[100],
width: '100%',
'&:hover': {
backgroundColor: (theme) =>
@@ -157,15 +157,43 @@ export default function MuiProductSelector() {
}
- name={
-
- MUI X
-
- }
+ name="MUI X"
description="Advanced and powerful components for complex use cases."
/>
+ {/* @ts-ignore */}
+ {process.env.STAGING === true ? (
+
+
+ theme.palette.mode === 'dark'
+ ? alpha(theme.palette.primary[100], 0.08)
+ : theme.palette.grey[100],
+ width: '100%',
+ '&:hover': {
+ backgroundColor: (theme) =>
+ theme.palette.mode === 'dark'
+ ? alpha(theme.palette.primaryDark[700], 0.4)
+ : theme.palette.grey[50],
+ },
+ }}
+ >
+ }
+ name="MUI Toolpad"
+ description="Low-code tool builder, powered by MUI."
+ chip={}
+ />
+
+
+ ) : null}
);
}
diff --git a/docs/src/route.ts b/docs/src/route.ts
index e9af9116ea774b..804959531dc6ad 100644
--- a/docs/src/route.ts
+++ b/docs/src/route.ts
@@ -2,6 +2,7 @@ const ROUTES = {
home: '/',
productCore: '/core/',
productAdvanced: '/x/',
+ productToolpad: '/toolpad/',
productTemplates: '/templates/',
productDesignKits: '/design-kits/',
careers: '/careers/',
@@ -29,6 +30,7 @@ const ROUTES = {
goldSponsor: '/material-ui/discover-more/backers/#gold',
store: 'https://mui.com/store/',
advancedComponents: '/x/introduction/',
+ toolpadDocs: '/toolpad/getting-started/setup/',
dataGridSpace: '/x/react-data-grid/getting-started/',
dataGridDocs: '/x/react-data-grid/getting-started/',
dataGridFeatures: '/x/react-data-grid/#features',