Merge branch 'master' of github.com:bharatkashyap/material-ui

mui · Aug 22, 2022 · 60f3a6f · 60f3a6f
2 parents e059101 + 3167ce7
commit 60f3a6f
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 133 deletions.
diff --git a/docs/public/static/branding/product-toolpad-dark.svg b/docs/public/static/branding/product-toolpad-dark.svg
diff --git a/docs/public/static/branding/product-toolpad-light.svg b/docs/public/static/branding/product-toolpad-light.svg
diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
@@ -124,7 +124,6 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
             px: 1,
             py: 0.5,
             typography: 'body2',
-
             '&:hover': {
               borderColor: (theme) =>
                 theme.palette.mode === 'dark'
@@ -135,7 +134,6 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
                   ? '0 1px 2px 0 rgba(0 0 0 / 1)'
                   : '0 1px 2px 0 rgba(0 0 0 / 0.2)',
             },
-
             [`&.${inputBaseClasses.focused}`]: {
               borderColor: (theme) =>
                 theme.palette.mode === 'dark'

diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -22,7 +22,7 @@ const Navigation = styled('nav')(({ theme }) => ({
   '& li': {
     color: theme.palette.text.primary,
     ...theme.typography.body2,
-    fontWeight: 700,
+    fontWeight: theme.typography.fontWeightBold,
     '& > a, & > div': {
       display: 'inline-block',
       color: 'inherit',
@@ -51,7 +51,8 @@ const PRODUCT_IDS = [
   'product-advanced',
   'product-templates',
   'product-design',
-  'product-toolpad',
+  // @ts-ignore
+  ...(process.env.STAGING === true ? ['product-toolpad'] : []),
 ];
 
 type ProductSubMenuProps = {
@@ -73,6 +74,7 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
           display: 'flex',
           alignItems: 'center',
           py: 2,
+          pr: 3,
           '&:hover, &:focus': {
             backgroundColor: (theme) =>
               theme.palette.mode === 'dark'
@@ -100,14 +102,14 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
         >
           {icon}
         </Box>
-        <div>
-          <Typography color="text.primary" variant="body2" fontWeight="700">
+        <Box sx={{ flexGrow: 1 }}>
+          <Typography color="text.primary" variant="body2" fontWeight="bold">
             {name}
           </Typography>
           <Typography color="text.secondary" variant="body2">
             {description}
           </Typography>
-        </div>
+        </Box>
         {chip}
       </Box>
     );
@@ -324,25 +326,21 @@ 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={'MUI Toolpad'}
-                        chip={
-                          <Chip
-                            label="Alpha"
-                            size="small"
-                            color="grey"
-                            sx={{ display: 'flex', marginY: '0', marginX: 'auto' }}
-                          />
-                        }
-                        description="Low-code tool builder, powered by MUI."
-                        onKeyDown={handleKeyDown}
-                      />
-                    </li>
+                    {/* @ts-ignore */}
+                    {process.env.STAGING === true ? (
+                      <li role="none">
+                        <ProductSubMenu
+                          id={PRODUCT_IDS[4]}
+                          role="menuitem"
+                          href={ROUTES.productToolpad}
+                          icon={<IconImage name="product-toolpad" />}
+                          name="MUI Toolpad"
+                          chip={<Chip label="Alpha" size="small" color="grey" />}
+                          description="Low-code tool builder, powered by MUI."
+                          onKeyDown={handleKeyDown}
+                        />
+                      </li>
+                    ) : null}
                   </ul>
                 </Paper>
               </Fade>

diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -14,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%',
@@ -64,12 +64,17 @@ 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.',
-    href: ROUTES.productToolpad,
-    chip: 'Alpha',
-  },
+  // @ts-ignore
+  ...(process.env.STAGING === true
+    ? [
+        {
+          name: 'MUI Toolpad',
+          description: 'Low-code tool builder, powered by MUI.',
+          href: ROUTES.productToolpad,
+          chip: 'Alpha',
+        },
+      ]
+    : []),
 ];
 
 const DOCS = [
@@ -98,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() {
@@ -202,7 +217,7 @@ export default function HeaderNavDropdown() {
                               justifyContent: 'space-between',
                             }}
                           >
-                            <span>{item.name}</span>
+                            {item.name}
                             {item.chip ? (
                               <Chip size="small" label={item.chip} color="grey" />
                             ) : null}
@@ -250,15 +265,7 @@ export default function HeaderNavDropdown() {
                           noLinkStyle
                           sx={{ flexDirection: 'column', alignItems: 'initial' }}
                         >
-                          <Box
-                            sx={{
-                              display: 'flex',
-                              flexDirection: 'row',
-                              justifyContent: 'space-between',
-                            }}
-                          >
-                            <div>{item.name}</div>
-                          </Box>
+                          {item.name}
                           <Typography variant="body2" color="text.secondary">
                             {item.description}
                           </Typography>

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -134,21 +134,25 @@ 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: {
-        main: grey[100],
-        contrastText: grey[600],
+        ...(mode === 'light' && {
+          main: grey[100],
+          contrastText: grey[600],
+        }),
+        ...(mode === 'dark' && {
+          main: blueDark[700],
+          contrastText: grey[600],
+        }),
       },
       error: {
         50: '#FFF0F1',