[docs] Set up MD3 experiments pages (#39323)

mui · Oct 7, 2023 · a31e2c7 · a31e2c7
1 parent 4db093d
commit a31e2c7
Show file tree

Hide file tree

Showing 4 changed files with 389 additions and 346 deletions.
diff --git a/docs/pages/experiments/index.js b/docs/pages/experiments/index.js
@@ -33,108 +33,113 @@ export default function Experiments({ experiments }) {
   return (
     <React.Fragment>
       <CssBaseline />
-      <Container>
+      <Box sx={{ display: 'flex', flexFlow: 'column nowrap', minHeight: '100vh' }}>
+        <Container>
+          <Box
+            sx={{
+              minHeight: 300,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              maxWidth: 600,
+              mx: 'auto',
+              textAlign: 'center',
+            }}
+          >
+            <Typography variant="body2" color="primary.600" fontWeight="bold">
+              Welcome to
+            </Typography>
+            <Typography component="h1" variant="h2" sx={{ my: 1 }}>
+              MUI <GradientText>Experiments</GradientText>
+            </Typography>
+
+            <Box sx={{ textAlign: 'left' }}>
+              <ul>
+                <Typography component="li">
+                  The files under <code>/experiments/*</code> are committed to git.
+                </Typography>
+                <Typography component="li">
+                  These URLs (start with <code>/experiments/*</code>) are not accessible in
+                  production.
+                </Typography>
+              </ul>
+            </Box>
+          </Box>
+        </Container>
         <Box
           sx={{
-            minHeight: 300,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            maxWidth: 600,
-            mx: 'auto',
-            textAlign: 'center',
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+            flexGrow: 1,
           }}
         >
-          <Typography variant="body2" color="primary.600" fontWeight="bold">
-            Welcome to
-          </Typography>
-          <Typography component="h1" variant="h2" sx={{ my: 1 }}>
-            MUI <GradientText>Experiments</GradientText>
-          </Typography>
-
-          <Box sx={{ textAlign: 'left' }}>
-            <ul>
-              <Typography component="li">
-                The files under <code>/experiments/*</code> are committed to git.
-              </Typography>
-              <Typography component="li">
-                These URLs (start with <code>/experiments/*</code>) are not accessible in
-                production.
-              </Typography>
-            </ul>
-          </Box>
-        </Box>
-      </Container>
-      <Box
-        sx={{ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50') }}
-      >
-        <Container sx={{ py: { xs: 4, md: 8 } }}>
-          <Typography
-            variant="body2"
-            color="grey.600"
-            fontWeight="bold"
-            textAlign="center"
-            sx={{ mb: 2 }}
-          >
-            All Experiments ({experiments.length})
-          </Typography>
-          {experiments.length > 0 && (
-            <Box
-              sx={{
-                display: 'grid',
-                gap: 2,
-                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-              }}
+          <Container sx={{ py: { xs: 4, md: 8 } }}>
+            <Typography
+              variant="body2"
+              color="grey.600"
+              fontWeight="bold"
+              textAlign="center"
+              sx={{ mb: 2 }}
             >
-              {Object.entries(categories).map(([categoryName, children]) => (
-                <Box key={categoryName} sx={{ pb: 2 }}>
-                  <Typography
-                    component="h2"
-                    variant="body2"
-                    sx={{
-                      fontWeight: 500,
-                      color: 'grey.600',
-                      px: 1,
-                    }}
-                  >
-                    {categoryName}
-                  </Typography>
-                  <List>
-                    {(children || []).map((aPage) => {
-                      return (
-                        <ListItem key={aPage.pathname} disablePadding>
-                          <ListItemButton
-                            component={Link}
-                            noLinkStyle
-                            href={aPage.pathname}
-                            sx={{
-                              px: 1,
-                              py: 0.5,
-                              fontSize: '0.84375rem',
-                              fontWeight: 500,
-                              '&:hover, &:focus': { '& svg': { opacity: 1 } },
-                            }}
-                          >
-                            {aPage.name}
-                            <KeyboardArrowRightRounded
+              All Experiments ({experiments.length})
+            </Typography>
+            {experiments.length > 0 && (
+              <Box
+                sx={{
+                  display: 'grid',
+                  gap: 2,
+                  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                }}
+              >
+                {Object.entries(categories).map(([categoryName, children]) => (
+                  <Box key={categoryName} sx={{ pb: 2 }}>
+                    <Typography
+                      component="h2"
+                      variant="body2"
+                      sx={{
+                        fontWeight: 500,
+                        color: 'grey.600',
+                        px: 1,
+                      }}
+                    >
+                      {categoryName}
+                    </Typography>
+                    <List>
+                      {(children || []).map((aPage) => {
+                        return (
+                          <ListItem key={aPage.pathname} disablePadding>
+                            <ListItemButton
+                              component={Link}
+                              noLinkStyle
+                              href={aPage.pathname}
                               sx={{
-                                ml: 'auto',
-                                fontSize: '1.125rem',
-                                opacity: 0,
-                                color: 'primary.main',
+                                px: 1,
+                                py: 0.5,
+                                fontSize: '0.84375rem',
+                                fontWeight: 500,
+                                '&:hover, &:focus': { '& svg': { opacity: 1 } },
                               }}
-                            />
-                          </ListItemButton>
-                        </ListItem>
-                      );
-                    })}
-                  </List>
-                </Box>
-              ))}
-            </Box>
-          )}
-        </Container>
+                            >
+                              {aPage.name}
+                              <KeyboardArrowRightRounded
+                                sx={{
+                                  ml: 'auto',
+                                  fontSize: '1.125rem',
+                                  opacity: 0,
+                                  color: 'primary.main',
+                                }}
+                              />
+                            </ListItemButton>
+                          </ListItem>
+                        );
+                      })}
+                    </List>
+                  </Box>
+                ))}
+              </Box>
+            )}
+          </Container>
+        </Box>
       </Box>
     </React.Fragment>
   );