[docs-infra] Tigthen up the header design (#42180)

mui · May 24, 2024 · b886c84 · b886c84
1 parent a5c5ca9
commit b886c84
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 121 deletions.
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -163,7 +163,7 @@ function AppWrapper(props) {
 
     if (productId === 'material-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Material UI',
         versions: [
           { text: `v${materialPkgJson.version}`, current: true },
@@ -182,15 +182,15 @@ function AppWrapper(props) {
 
     if (productId === 'joy-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Joy UI',
         versions: [{ text: `v${joyPkgJson.version}`, current: true }],
       };
     }
 
     if (productId === 'system') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'MUI System',
         versions: [
           { text: `v${systemPkgJson.version}`, current: true },
@@ -206,7 +206,7 @@ function AppWrapper(props) {
 
     if (productId === 'base-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Base UI',
         versions: [{ text: `v${basePkgJson.version}`, current: true }],
       };

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -43,7 +43,7 @@ export default function BrandingThemeTest() {
             <Button variant="outlined" size="small" color="secondary">
               Outlined secondary
             </Button>
-            <Button variant="text" size="small" color="info">
+            <Button variant="text" size="small">
               This button
             </Button>
             <IconButton color="primary">

diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
@@ -14,6 +14,7 @@ function CssVarsModeToggle(props: { onChange: (newMode: string) => void }) {
     <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
       <IconButton
         color="primary"
+        size="small"
         disableTouchRipple
         disabled={!calculatedMode}
         onClick={() => {
@@ -51,6 +52,7 @@ export default function ThemeModeToggle() {
       <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
         <IconButton
           color="primary"
+          size="small"
           disableTouchRipple
           onClick={() => {
             setMode(calculatedMode === 'dark' ? 'light' : 'dark');

diff --git a/docs/src/icons/SvgHamburgerMenu.tsx b/docs/src/icons/SvgHamburgerMenu.tsx
@@ -5,8 +5,8 @@ export default function SvgHamburgerMenu(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
+      width={18}
+      height={18}
       viewBox="0 0 16 16"
       fill="none"
       {...props}

diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
@@ -64,6 +64,7 @@ export default function AppHeader(props: AppHeaderProps) {
             <IconButton
               component="a"
               color="primary"
+              size="small"
               href={gitHubRepository}
               target="_blank"
               rel="noopener"

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -7,7 +7,6 @@ import NProgress from 'nprogress';
 import CssBaseline from '@mui/material/CssBaseline';
 import AppBar from '@mui/material/AppBar';
 import Stack from '@mui/material/Stack';
-import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
@@ -102,7 +101,7 @@ const StyledAppBar = styled(AppBar, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
   return {
-    padding: theme.spacing(1, 2),
+    padding: theme.spacing(1.5),
     transition: theme.transitions.create('width'),
     ...(disablePermanent && {
       boxShadow: 'none',
@@ -112,25 +111,19 @@ const StyledAppBar = styled(AppBar, {
         width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
       },
     }),
+    justifyContent: 'center',
     boxShadow: 'none',
     backdropFilter: 'blur(8px)',
-    borderStyle: 'solid',
-    borderColor: (theme.vars || theme).palette.divider,
-    borderWidth: 0,
-    borderBottomWidth: 'thin',
-    backgroundColor: 'rgba(255,255,255,0.8)',
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+    backgroundColor: 'hsla(0, 0%, 100%, 0.6)',
     color: (theme.vars || theme).palette.grey[800],
     ...theme.applyDarkStyles({
-      backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
+      backgroundColor: alpha(theme.palette.primaryDark[900], 0.6),
       color: (theme.vars || theme).palette.grey[500],
     }),
   };
 });
 
-const GrowingDiv = styled('div')({
-  flex: '1 1 auto',
-});
-
 const NavIconButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
@@ -156,7 +149,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) =>
   };
 });
 
-export const HEIGHT = 64;
+export const HEIGHT = 57;
 
 export default function AppFrame(props) {
   const { children, disableDrawer = false, className, BannerComponent = AppFrameBanner } = props;
@@ -178,18 +171,22 @@ export default function AppFrame(props) {
       <CssBaseline />
       <SkipLink />
       <MarkdownLinks />
-      <StyledAppBar disablePermanent={disablePermanent}>
+      <StyledAppBar
+        disablePermanent={disablePermanent}
+        sx={{ minHeight: 'var(--MuiDocs-header-height)' }}
+      >
         <GlobalStyles
           styles={{
             ':root': {
               '--MuiDocs-header-height': `${HEIGHT}px`,
             },
           }}
         />
-        <Toolbar variant="dense" disableGutters>
+        <Stack direction="row" alignItems="center" sx={{ position: 'relative', width: '100%' }}>
           <NavIconButton
             edge="start"
             color="primary"
+            size="small"
             aria-label={t('appFrame.openDrawer')}
             disablePermanent={disablePermanent}
             onClick={() => setMobileOpen(true)}
@@ -206,14 +203,14 @@ export default function AppFrame(props) {
               <SvgMuiLogomark width={30} />
             </Box>
           </NextLink>
-          <GrowingDiv />
-          <Stack direction="row" spacing={1} useFlexGap>
+          <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
             <BannerComponent />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>
               <IconButton
                 component="a"
                 color="primary"
+                size="small"
                 href={process.env.SOURCE_CODE_REPO}
                 data-ga-event-category="header"
                 data-ga-event-action="github"
@@ -223,12 +220,12 @@ export default function AppFrame(props) {
             </Tooltip>
             <Notifications />
             <Tooltip title={t('appFrame.toggleSettings')} enterDelay={300}>
-              <IconButton color="primary" onClick={() => setSettingsOpen(true)} sx={{ px: '8px' }}>
+              <IconButton color="primary" size="small" onClick={() => setSettingsOpen(true)}>
                 <SettingsIcon fontSize="small" />
               </IconButton>
             </Tooltip>
           </Stack>
-        </Toolbar>
+        </Stack>
       </StyledAppBar>
       <StyledAppNavDrawer
         disablePermanent={disablePermanent}

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -44,6 +44,15 @@ function transitionTheme(theme) {
 
 const savedScrollTop = {};
 
+const customButtonStyles = (theme) => ({
+  pl: 1,
+  pr: '6px',
+  height: 26,
+  fontSize: theme.typography.pxToRem(13),
+  fontWeight: theme.typography.fontWeightMedium,
+  letterSpacing: '0.01rem',
+});
+
 function ProductDrawerButton(props) {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -67,26 +76,14 @@ function ProductDrawerButton(props) {
   return (
     <React.Fragment>
       <Button
+        size="small"
         id="mui-product-selector"
         aria-haspopup="true"
         aria-controls={open ? 'drawer-open-button' : undefined}
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
-        sx={(theme) => ({
-          minWidth: 0,
-          p: '1px 8px',
-          fontSize: theme.typography.pxToRem(13),
-          fontWeight: theme.typography.fontWeightMedium,
-          color: (theme.vars || theme).palette.primary[600],
-          '& svg': {
-            width: 18,
-            height: 18,
-          },
-          ...theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.primary[300],
-          }),
-        })}
+        sx={customButtonStyles}
       >
         {props.productName}
       </Button>
@@ -121,8 +118,8 @@ function ProductIdentifier(props) {
     <Box sx={{ flexGrow: 1 }}>
       <Typography
         sx={(theme) => ({
-          ml: 1,
-          fontSize: theme.typography.pxToRem(11),
+          ml: '6px',
+          fontSize: theme.typography.pxToRem(10),
           fontWeight: theme.typography.fontWeightBold,
           textTransform: 'uppercase',
           letterSpacing: '.1rem',
@@ -184,7 +181,7 @@ PersistScroll.propTypes = {
 };
 
 const ToolbarDiv = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1.6, 2),
+  padding: theme.spacing(1.5),
   paddingRight: 0,
   flexShrink: 0,
   height: 'var(--MuiDocs-header-height)',
@@ -193,6 +190,8 @@ const ToolbarDiv = styled('div')(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+  borderBottom: '1px solid',
+  borderColor: (theme.vars || theme).palette.divider,
 }));
 
 const StyledDrawer = styled(Drawer)(({ theme }) => ({
@@ -323,7 +322,7 @@ export default function AppNavDrawer(props) {
   const drawer = React.useMemo(() => {
     const navItems = renderNavItems({ onClose, pages, activePageParents, depth: 0, t });
 
-    const renderVersionSelector = (versions, sx) => {
+    const renderVersionSelector = (versions) => {
       if (!versions?.length) {
         return null;
       }
@@ -332,6 +331,9 @@ export default function AppNavDrawer(props) {
       return (
         <React.Fragment>
           <Button
+            variant="text"
+            color="secondary"
+            size="small"
             id="mui-version-selector"
             onClick={(event) => {
               setAnchorEl(event.currentTarget);
@@ -341,24 +343,7 @@ export default function AppNavDrawer(props) {
                 <ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />
               ) : null
             }
-            sx={[
-              (theme) => ({
-                py: 0.1,
-                minWidth: 0,
-                fontSize: theme.typography.pxToRem(13),
-                fontWeight: 500,
-                color: (theme.vars || theme).palette.primary[600],
-                '& svg': {
-                  ml: -0.6,
-                  width: 18,
-                  height: 18,
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[300],
-                }),
-              }),
-              ...(Array.isArray(sx) ? sx : [sx]),
-            ]}
+            sx={customButtonStyles}
           >
             {currentVersion.text}
           </Button>
@@ -371,7 +356,7 @@ export default function AppNavDrawer(props) {
             {versions.map((item) => {
               if (item.text === 'View all versions') {
                 return [
-                  <Divider key="divider" />,
+                  <Divider key="divider" sx={{ mx: -1 }} />,
                   <MenuItem key="all-versions" component="a" href={item.href} onClick={onClose}>
                     {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */}
                     {`View all versions`}
@@ -392,7 +377,7 @@ export default function AppNavDrawer(props) {
                         onClick: onClose,
                       })}
                 >
-                  {item.text} {item.current && <DoneRounded sx={{ fontSize: 16, ml: 0.25 }} />}
+                  {item.text} {item.current && <DoneRounded sx={{ fontSize: 16, ml: 'auto' }} />}
                 </MenuItem>
               );
             })}
@@ -405,17 +390,7 @@ export default function AppNavDrawer(props) {
       <React.Fragment>
         <ToolbarDiv>
           <NextLink href="/" passHref legacyBehavior>
-            <Box
-              component="a"
-              onClick={onClose}
-              aria-label={t('goToHome')}
-              sx={{
-                pr: '12px',
-                mr: '8px',
-                borderRight: '1px solid',
-                borderColor: 'divider',
-              }}
-            >
+            <Box component="a" onClick={onClose} aria-label={t('goToHome')} sx={{ mr: 1.5 }}>
               <SvgMuiLogomark width={30} />
             </Box>
           </NextLink>
@@ -425,7 +400,6 @@ export default function AppNavDrawer(props) {
             versionSelector={renderVersionSelector(productIdentifier.versions)}
           />
         </ToolbarDiv>
-        <Divider />
         <Box
           sx={{
             pt: 0.5,