Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[website] Add Toolpad to Navigation #33937

Merged
merged 15 commits into from Aug 29, 2022
Merged

[website] Add Toolpad to Navigation #33937

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ac3a909
[docs] Add Toolpad (alpha) to nav bars
bharatkashyap Aug 11, 2022
4f0c612
[docs] SectionHeadline configurable for Toolpad
bharatkashyap Aug 12, 2022
2ab3ea7
[docs] Add Toolpad to Footer Nav
bharatkashyap Aug 16, 2022
24bd53e
[docs] Add Toolpad to App Nav Drawer
bharatkashyap Aug 16, 2022
1892320
[docs] add Toolpad logos
bharatkashyap Aug 18, 2022
12c072d
Fix element nesting issue
bharatkashyap Aug 18, 2022
2a1c17c
New way of including the Submenu chip
bharatkashyap Aug 18, 2022
49ac005
Include Toolpad Docs later
bharatkashyap Aug 18, 2022
c2c6ae3
Custom grey for Products chip
bharatkashyap Aug 18, 2022
ab4086e
[docs] Clarify GA button documentation
bharatkashyap Aug 18, 2022
669d92d
polish
oliviertassinari Aug 20, 2022
5be938d
prettier
oliviertassinari Aug 20, 2022
3167ce7
code style
oliviertassinari Aug 20, 2022
e059101
[docs] Remove local override for sec. headline
bharatkashyap Aug 22, 2022
60f3a6f
Merge branch 'master' of github.com:bharatkashyap/material-ui
bharatkashyap Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 32 additions & 1 deletion docs/src/components/header/HeaderNavBar.tsx
View file
Open in desktop
@@ -1,6 +1,7 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Popper from '@mui/material/Popper';
import Paper from '@mui/material/Paper';
import { unstable_debounce as debounce } from '@mui/utils';
Expand Down Expand Up @@ -45,7 +46,13 @@ const Navigation = styled('nav')(({ theme }) => ({
},
}));

const PRODUCT_IDS = ['product-core', 'product-advanced', 'product-templates', 'product-design'];
const PRODUCT_IDS = [
'product-core',
'product-advanced',
'product-templates',
'product-design',
'product-toolpad',
];

type ProductSubMenuProps = {
icon: React.ReactElement;
Expand Down Expand Up @@ -315,6 +322,30 @@ export default function HeaderNavBar() {
onKeyDown={handleKeyDown}
/>
</li>
<li role="none">
<ProductSubMenu
id={PRODUCT_IDS[4]}
role="menuitem"
href={ROUTES.productToolpad}
icon={<IconImage name="product-toolpad" />}
name={
<Box
sx={{
display: 'flex',
component: 'span',
flexDirection: 'row',
justifyContent: 'space-between',
width: '150%',
}}
>
<div>MUI&nbsp;Toolpad</div>
<Chip size="small" label={'Alpha'} />
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
</Box>
}
description="Low-code tool builder, powered by MUI."
onKeyDown={handleKeyDown}
/>
</li>
</ul>
</Paper>
</Fade>
Expand Down
35 changes: 33 additions & 2 deletions docs/src/components/header/HeaderNavDropdown.tsx
View file
Open in desktop
Expand Up @@ -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';
Expand Down Expand Up @@ -63,6 +64,12 @@ const PRODUCTS = [
description: 'Our components available in your favorite design tool.',
href: ROUTES.productDesignKits,
},
{
name: 'MUI Toolpad',
description: 'Low-code tool builder, powered by MUI.',
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
href: ROUTES.productToolpad,
chip: 'Alpha',
},
];

const DOCS = [
Expand Down Expand Up @@ -91,6 +98,12 @@ const DOCS = [
description: 'Advanced and powerful components for complex use cases.',
href: ROUTES.advancedComponents,
},
{
name: 'MUI Toolpad',
description: 'Low-code tool builder, powered by MUI.',
href: ROUTES.toolpadDocs,
chip: 'Alpha',
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the docs of Toolpad is mature enough to be linked 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My opinion is that we can include the Docs link later

];

export default function HeaderNavDropdown() {
Expand Down Expand Up @@ -188,7 +201,16 @@ export default function HeaderNavDropdown() {
noLinkStyle
sx={{ flexDirection: 'column', alignItems: 'initial' }}
>
<div>{item.name}</div>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<div>{item.name}</div>
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
{item.chip ? <Chip size="small" label={item.chip} /> : null}
</Box>
<Typography variant="body2" color="text.secondary">
{item.description}
</Typography>
Expand Down Expand Up @@ -232,7 +254,16 @@ export default function HeaderNavDropdown() {
noLinkStyle
sx={{ flexDirection: 'column', alignItems: 'initial' }}
>
<div>{item.name}</div>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<div>{item.name}</div>
{item.chip ? <Chip size="small" label={item.chip} /> : null}
</Box>
<Typography variant="body2" color="text.secondary">
{item.description}
</Typography>
Expand Down
1 change: 1 addition & 0 deletions docs/src/components/icon/IconImage.tsx
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export type IconImageProps = {
name:
| 'product-core'
| 'product-advanced'
| 'product-toolpad'
| 'product-templates'
| 'product-designkits'
| 'block-green'
Expand Down
19 changes: 16 additions & 3 deletions docs/src/components/typography/SectionHeadline.tsx
View file
Open in desktop
Expand Up @@ -2,20 +2,33 @@ import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

interface SectionHeadlineTheme {
overlineColor?: string;
titleColor?: string;
descriptionColor?: string;
}

export default function SectionHeadline({
overline,
title,
description,
localTheme,
}: {
overline: React.ReactNode;
title: React.ReactNode;
description?: React.ReactNode;
localTheme?: (mode?: string) => SectionHeadlineTheme;
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
}) {
const globalTheme = useTheme();
const mode = globalTheme.palette.mode;
const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
const defaultOverlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
const defaultTitleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
const defaultDescriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';

const overlineColor: string = localTheme?.(mode)?.overlineColor ?? defaultOverlineColor;
const titleColor: string = localTheme?.(mode)?.titleColor ?? defaultTitleColor;
const descriptionColor: string = localTheme?.(mode)?.descriptionColor ?? defaultDescriptionColor;

return (
<React.Fragment>
<Typography
Expand Down
1 change: 1 addition & 0 deletions docs/src/layouts/AppFooter.tsx
View file
Open in desktop
Expand Up @@ -66,6 +66,7 @@ export default function AppFooter() {
<Link href={ROUTES.productAdvanced}>MUI X</Link>
<Link href={ROUTES.productTemplates}>Templates</Link>
<Link href={ROUTES.productDesignKits}>Design kits</Link>
<Link href={ROUTES.productToolpad}>MUI Toolpad</Link>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography fontWeight="bold" variant="body2">
Expand Down
3 changes: 3 additions & 0 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Expand Up @@ -466,6 +466,9 @@ export default function AppNavDrawer(props) {
])}
/>
)}
{asPathWithoutLang.startsWith('/toolpad') && (
<ProductIdentifier name="Toolpad" metadata="MUI Toolpad" />
)}
</ToolbarDiv>
<Divider
sx={{
Expand Down
41 changes: 41 additions & 0 deletions docs/src/modules/components/MuiProductSelector.tsx
View file
Open in desktop
Expand Up @@ -145,6 +145,11 @@ export default function MuiProductSelector() {
href={ROUTES.advancedComponents}
sx={{
p: 2,
borderBottom: '1px solid',
borderColor: (theme) =>
theme.palette.mode === 'dark'
? alpha(theme.palette.primary[100], 0.08)
: theme.palette.grey[100],
width: '100%',
'&:hover': {
backgroundColor: (theme) =>
Expand All @@ -166,6 +171,42 @@ export default function MuiProductSelector() {
/>
</Link>
</li>
<li role="none">
<Link
href={ROUTES.toolpadDocs}
sx={{
p: 2,
width: '100%',
'&:hover': {
backgroundColor: (theme) =>
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[700], 0.4)
: theme.palette.grey[50],
},
}}
>
<ProductSubMenu
role="menuitem"
sx={{ width: '100%' }}
icon={<IconImage name="product-toolpad" />}
name={
<Box
sx={{
display: 'flex',
component: 'span',
flexDirection: 'row',
justifyContent: 'space-between',
width: '150%',
}}
>
<div>MUI&nbsp;Toolpad</div>
<Chip size="small" label={'Alpha'} />
</Box>
}
description="Low-code tool builder, powered by MUI."
/>
</Link>
</li>
</React.Fragment>
);
}
2 changes: 2 additions & 0 deletions docs/src/route.ts
View file
Open in desktop
Expand Up @@ -2,6 +2,7 @@ const ROUTES = {
home: '/',
productCore: '/core/',
productAdvanced: '/x/',
productToolpad: '/toolpad/',
productTemplates: '/templates/',
productDesignKits: '/design-kits/',
careers: '/careers/',
Expand Down Expand Up @@ -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',
Expand Down