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

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

Merged
merged 11 commits into from
May 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bc15359
overall tighten up to the header design
danilo-leal May 9, 2024
44fe455
remove "MUI Core" from the product selector label
danilo-leal May 9, 2024
2695ad7
icon button; remove size definition from color declarations
danilo-leal May 9, 2024
b504896
remove unused import
danilo-leal May 9, 2024
9ba7125
remove unnecessary padding declaration
danilo-leal May 9, 2024
17e8084
fix lint: remove unused sx prop
danilo-leal May 9, 2024
566ae95
Merge branch 'next' into tigthen-up-docs-website-header
danilo-leal May 10, 2024
0a06ef2
add refinements based on Colm's feedback
danilo-leal May 10, 2024
6ab2cd8
Merge branch 'next' into tigthen-up-docs-website-header
danilo-leal May 22, 2024
f25fa07
add in small missing details
danilo-leal May 23, 2024
2eb24c7
cut unnecessary border line
danilo-leal May 23, 2024
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
8 changes: 4 additions & 4 deletions docs/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -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 },
Expand All @@ -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 }],
};
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/experiments/website/branding-theme-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions docs/src/components/header/ThemeModeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand Down Expand Up @@ -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"
Copy link
Member

Choose a reason for hiding this comment

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

If we change the hydrated version, we also need to change the placeholder for hydration. Right now, in https://next--material-ui.netlify.app/material-ui/ we have:

Screen.Recording.2024-06-08.at.11.59.15.mov

Fixed with a small commit straight to HEAD: 3c0b821.

After:

Screen.Recording.2024-06-08.at.12.17.21.mov

(I noticed this while I was navigating the docs on the go)

disableTouchRipple
onClick={() => {
setMode(calculatedMode === 'dark' ? 'light' : 'dark');
Expand Down
4 changes: 2 additions & 2 deletions docs/src/icons/SvgHamburgerMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions docs/src/layouts/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export default function AppHeader(props: AppHeaderProps) {
<IconButton
component="a"
color="primary"
size="small"
href={gitHubRepository}
target="_blank"
rel="noopener"
Expand Down
35 changes: 16 additions & 19 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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',
Expand All @@ -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 }) => {
Expand All @@ -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;
Expand All @@ -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)}
Expand All @@ -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"
Expand All @@ -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}
Expand Down
74 changes: 24 additions & 50 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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>
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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)',
Expand All @@ -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 }) => ({
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
Expand All @@ -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>
Expand All @@ -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`}
Expand All @@ -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>
);
})}
Expand All @@ -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>
Expand All @@ -425,7 +400,6 @@ export default function AppNavDrawer(props) {
versionSelector={renderVersionSelector(productIdentifier.versions)}
/>
</ToolbarDiv>
<Divider />
<Box
sx={{
pt: 0.5,
Expand Down