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

[docs] Docs redesign adjustments #28203

Merged
merged 21 commits into from
Sep 10, 2021
Merged

[docs] Docs redesign adjustments #28203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a8c1a40
improve sidebar
mnajdova Sep 7, 2021
f6e897f
change settings drawer mode icons
danilo-leal Sep 7, 2021
b614496
add PlusJakatarSans bold
siriwatknp Sep 8, 2021
70a58a9
run prettier
siriwatknp Sep 8, 2021
3df0a43
fix DrawerSettings background
siriwatknp Sep 8, 2021
b9f1caa
update drawer settings Pascal case
siriwatknp Sep 8, 2021
1148eb1
remove unused component
siriwatknp Sep 8, 2021
cf8922c
remove absolute from edit page
siriwatknp Sep 9, 2021
3e0b423
fix drawer item styles
siriwatknp Sep 9, 2021
d19b2f8
fix ads styles and remove jss
siriwatknp Sep 9, 2021
4bfd7f5
reduce h2 code fontsize
siriwatknp Sep 9, 2021
d3d3d79
use pixel to rem utility
danilo-leal Sep 9, 2021
db814cd
minor adjustment on the nav drawer items order
danilo-leal Sep 9, 2021
56d9fae
small color tweak
danilo-leal Sep 9, 2021
e1f03a2
use px to rem utility
danilo-leal Sep 9, 2021
20589fa
more use of px to rem utility
danilo-leal Sep 9, 2021
39e4ab2
prettier
danilo-leal Sep 9, 2021
613df27
add icons to nav drawer
siriwatknp Sep 10, 2021
c009960
h2 code iteration
danilo-leal Sep 10, 2021
f8126da
yarn docs:i18n
siriwatknp Sep 10, 2021
afbbfad
minor styling on drawer item
siriwatknp Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,13 @@ export default class MyDocument extends Document {
__html: `@font-face{font-family:'PlusJakartaSans-ExtraBold';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2') format('woff2');}`,
}}
/>
<style
// the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `@font-face{font-family:'PlusJakartaSans-Bold';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/PlusJakartaSans-Bold-subset.woff2') format('woff2');}`,
}}
/>
</Head>
<body>
<Main />
Expand Down
Binary file added docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions docs/src/modules/brandingTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
fontFamilyCode: ['"IBM Plex Mono"', ...systemFont].join(','),
fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
fontFamilySystem: systemFont.join(','),
fontWeightExtraBold: 800,
h1: {
fontFamily: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
Expand Down
59 changes: 23 additions & 36 deletions docs/src/modules/components/Ad.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@mui/styles';
import { createTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
Expand All @@ -10,33 +8,16 @@ import AdInHouse from 'docs/src/modules/components/AdInHouse';
import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
import { useTranslate } from 'docs/src/modules/utils/i18n';

const styles = (theme) => ({
'placement-body-image': {
margin: theme.spacing(4, 1, 3),
minHeight: 126,
},
'placement-body-inline': {
margin: theme.spacing(4, 0, 3),
minHeight: 126,
display: 'flex',
alignItems: 'flex-end',
},
'placement-body-inline2': {
margin: theme.spacing(4, 0, 3),
minHeight: 126,
display: 'flex',
alignItems: 'flex-end',
},
paper: {
border: `2px solid ${theme.palette.primary.main}`,
},
});

function PleaseDisableAdblock(props) {
const t = useTranslate();

return (
<Paper component="span" elevation={0} sx={{ display: 'block', p: 1.5 }} {...props}>
<Paper
component="span"
elevation={0}
sx={{ display: 'block', p: 1.5, border: '2px solid', borderColor: 'primary.main' }}
{...props}
>
<Typography variant="body2" display="block" component="span" gutterBottom>
{t('likeMui')}
</Typography>
Expand Down Expand Up @@ -133,9 +114,7 @@ class AdErrorBoundary extends React.Component {
}
}

function Ad(props) {
const { classes } = props;

function Ad() {
const [adblock, setAdblock] = React.useState(null);
const [carbonOut, setCarbonOut] = React.useState(null);

Expand All @@ -149,7 +128,7 @@ function Ad(props) {
children = <span />;
} else if (adblock) {
if (randomAdblock < 0.2) {
children = <PleaseDisableAdblock className={classes.paper} />;
children = <PleaseDisableAdblock />;
label = 'in-house-adblock';
} else {
children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]} />;
Expand Down Expand Up @@ -238,8 +217,21 @@ function Ad(props) {
sx={{
position: 'relative',
display: 'block',
m: (theme) => theme.spacing(4, 0, 3),
...(adShape === 'image' && {
minHeight: 126,
}),
...(adShape === 'inline' && {
minHeight: 126,
display: 'flex',
alignItems: 'flex-end',
}),
...(adShape === 'inline2' && {
minHeight: 126,
display: 'flex',
alignItems: 'flex-end',
}),
}}
className={classes[`placement-body-${adShape}`]}
data-ga-event-category="ad"
data-ga-event-action="click"
data-ga-event-label={eventLabel}
Expand All @@ -249,9 +241,4 @@ function Ad(props) {
);
}

Ad.propTypes = {
classes: PropTypes.object.isRequired,
};

const defaultTheme = createTheme();
export default React.memo(withStyles(styles, { defaultTheme })(Ad));
export default Ad;
16 changes: 8 additions & 8 deletions docs/src/modules/components/AppLayoutDocs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@ const StyledAppContainer = styled(AppContainer, {
};
});

const ActionsDiv = styled('div')({
position: 'absolute',
right: 20,
top: 120,
const ActionsDiv = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
});
marginTop: -10,
marginBottom: -15,
[theme.breakpoints.up('lg')]: {
justifyContent: 'flex-end',
},
}));

function AppLayoutDocs(props) {
const {
Expand All @@ -90,7 +90,7 @@ function AppLayoutDocs(props) {
<Head title={`${title} - Material-UI`} description={description} />
{disableAd ? null : (
<AdGuest>
<Ad placement="body" />
<Ad />
</AdGuest>
)}
<Main disableToc={disableToc}>
Expand Down
90 changes: 49 additions & 41 deletions docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import ColorLensOutlinedIcon from '@mui/icons-material/ColorLensOutlined';
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
import BookOutlined from '@mui/icons-material/BookOutlined';
import ChromeReaderModeOutlined from '@mui/icons-material/ChromeReaderModeOutlined';

const iconsMap = {
DescriptionIcon: ArticleOutlinedIcon,
Expand All @@ -25,6 +27,8 @@ const iconsMap = {
VisibilityIcon: VisibilityOutlinedIcon,
StyleIcon: ColorLensOutlinedIcon,
AddIcon: AddCircleOutlineOutlinedIcon,
BookIcon: BookOutlined,
ReaderIcon: ChromeReaderModeOutlined,
};

const Item = styled(({ component: Component = 'div', ...props }) => <Component {...props} />, {
Expand Down Expand Up @@ -60,11 +64,11 @@ const Item = styled(({ component: Component = 'div', ...props }) => <Component {
}));

const ItemLink = styled(Item, {
shouldForwardProp: (prop) => prop !== 'depth',
})(({ theme }) => {
shouldForwardProp: (prop) => prop !== 'depth' && prop !== 'hasIcon',
})(({ theme, hasIcon, depth }) => {
return {
fontSize: theme.typography.pxToRem(13.5),
color: theme.palette.text.secondary,
fontSize: '0.8125rem',
'&.app-drawer-active': {
// color: theme.palette.primary.main,
color:
Expand All @@ -89,7 +93,10 @@ const ItemLink = styled(Item, {
),
},
},
paddingLeft: 38,
paddingLeft: 36 + (depth > 2 ? (depth - 2) * 10 : 0),
...(hasIcon && {
paddingLeft: 2,
}),
};
});

Expand All @@ -105,20 +112,20 @@ const ItemButtonIcon = styled(KeyboardArrowRightRoundedIcon, {
});

const ItemButton = styled(Item, {
shouldForwardProp: (prop) => prop !== 'depth',
})(({ depth, theme }) => {
shouldForwardProp: (prop) => prop !== 'depth' && prop !== 'hasIcon',
})(({ depth, hasIcon, theme }) => {
return {
color: (() => {
if (depth === 1) {
if (depth >= 1) {
if (theme.palette.mode === 'dark') {
return alpha(theme.palette.grey[500], 0.5);
}
return theme.palette.grey[500];
}
return theme.palette.text.primary;
})(),
fontSize: depth === 1 ? '0.75rem' : undefined,
fontWeight: depth === 0 ? 500 : 600,
fontSize: depth === 1 ? theme.typography.pxToRem(12) : theme.typography.pxToRem(14.5),
fontWeight: depth === 1 ? 700 : 500,
margin: theme.spacing(0.5, 0),
'&:hover': {
backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
Expand All @@ -136,24 +143,21 @@ const ItemButton = styled(Item, {
[`&:hover ${ItemButtonIcon}`]: {
color: theme.palette.text.primary,
},
...(depth === 0
? {
paddingLeft: 2,
'& .KeyboardArrowRightRoundedIcon': {
marginLeft: 'auto',
marginRight: '5px',
},
}
: {
paddingLeft: 38,
}),
paddingLeft: 36,
...(hasIcon && {
paddingLeft: 2,
}),
'& .KeyboardArrowRightRoundedIcon': {
marginLeft: 'auto',
marginRight: '5px',
},
};
});

const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })(
({ theme, depth }) => {
return {
padding: depth === 0 ? '0 10px' : '2px 0',
padding: depth === 0 ? '0 10px' : '4px 0',
marginTop: depth === 0 ? theme.spacing(1) : undefined,
display: 'block',
};
Expand Down Expand Up @@ -181,6 +185,26 @@ export default function AppNavDrawerItem(props) {
const hasIcon = icon && iconsMap[icon];
const IconComponent = hasIcon ? iconsMap[icon] : React.Fragment;
const iconProps = hasIcon ? { fontSize: 'small', color: 'primary' } : {};
const iconElement = hasIcon ? (
<Box
sx={{
'& svg': { fontSize: (theme) => theme.typography.pxToRem(14) },
display: 'flex',
alignItems: 'center',
height: '100%',
marginRight: 1.5,
py: 0.5,
px: 0.5,
borderRadius: '5px',
backgroundColor: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.primaryDark[700]
: theme.palette.primary[50],
}}
>
<IconComponent {...iconProps} />
</Box>
) : null;

if (href) {
return (
Expand All @@ -192,8 +216,10 @@ export default function AppNavDrawerItem(props) {
underline="none"
onClick={onClick}
depth={depth}
hasIcon={hasIcon}
{...linkProps}
>
{iconElement}
{title}
</ItemLink>
</StyledLi>
Expand All @@ -206,30 +232,12 @@ export default function AppNavDrawerItem(props) {
<ItemButton
component={ButtonBase}
depth={depth}
hasIcon={hasIcon}
disableRipple
className={topLevel && 'algolia-lvl0'}
onClick={handleClick}
>
{hasIcon && (
<Box
sx={{
'& svg': { fontSize: '0.875rem' },
display: 'flex',
alignItems: 'center',
height: '100%',
marginRight: 1.5,
py: 0.5,
px: 0.5,
borderRadius: '5px',
backgroundColor: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.primaryDark[700]
: theme.palette.primary[50],
}}
>
<IconComponent {...iconProps} />
</Box>
)}
{iconElement}
{title}
{depth === 0 && <ItemButtonIcon open={open} className="KeyboardArrowRightRoundedIcon" />}
</ItemButton>
Expand Down
17 changes: 5 additions & 12 deletions docs/src/modules/components/AppSettingsDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,14 @@ import { styled, useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Drawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Brightness2RoundedIcon from '@mui/icons-material/Brightness2Rounded';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirectionLToR';
import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
Expand All @@ -21,12 +20,6 @@ import { useTranslate } from 'docs/src/modules/utils/i18n';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
import { getCookie } from 'docs/src/modules/utils/helpers';

const DrawerPaper = styled(Paper)({
width: 360,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
});

Comment on lines -24 to -29
Copy link
Member

@siriwatknp siriwatknp Sep 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

@mnajdova we might need to investigate more on this, it is very buggy and hard to reason. by using styled component and pass to <Drawer PaperProps={{ component: DrawerPaper, square: true, elevation: 0 }}, it is still rounded.

Copy link
Member

@siriwatknp siriwatknp Sep 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

also classname got double. elevation-1 elevation-0

Screen Shot 2564-09-08 at 13 52 37

Copy link
Member Author

Choose a reason for hiding this comment

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

Will take a look thanks for pointing it out. I think that the general problem is that the portaled components don't support the components & componentsProps which would replace the components underneath instead of aliasing it to the as property (which is what we currently do).

Copy link
Member Author

Choose a reason for hiding this comment

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

Currently what you have is: <StyledPaper as={AnotherStyledPaper} /> - which results in double classes and non-deterministic classes order in the head.

Copy link
Member Author

Choose a reason for hiding this comment

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

I would probably just set the sx prop :)

Copy link
Member Author

Choose a reason for hiding this comment

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

Ok, we need to have some story around this in the migration guide I think. I agree it is hard to reason about.

In v4 when you provide a component it was changing the element that is rendered, but it also was adding the classes for that element, so the styles were applied.

In v5, to make it work identical, we are mapping the component prop to the as prop, so that the styles defined originally in the component would still be applied. This however does not guarantees that the styles for the component defined via the as property would win.

I think that we should specify in the migration guide, that for cases like this, when SomeComponentProps is used, we recommend sx for overriding the styles. When we add the components & componentsProps API on all components, that would add a possibility for completely replacing that slot with a new component. Note that the new component can actually be a styled version of the original component, and in that case we would be able to actually override the styles for it.

Does this summary makes sense?

Copy link
Member Author

Choose a reason for hiding this comment

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

Here is a sandbox illustrating the current behavior https://codesandbox.io/s/magical-mahavira-6p39p?file=/src/App.js

const Heading = styled(Typography)({
margin: '20px 0 10px',
});
Expand Down Expand Up @@ -78,7 +71,7 @@ function AppSettingsDrawer(props) {
anchor="right"
onClose={onClose}
open={open}
PaperProps={{ component: DrawerPaper }}
PaperProps={{ elevation: 0, sx: { width: 360 } }}
{...other}
>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 2 }}>
Expand Down Expand Up @@ -106,7 +99,7 @@ function AppSettingsDrawer(props) {
data-ga-event-category="settings"
data-ga-event-action="light"
>
<Brightness7Icon fontSize="small" />
<LightModeIcon fontSize="small" />
{t('settings.light')}
</IconToggleButton>
<IconToggleButton
Expand All @@ -124,7 +117,7 @@ function AppSettingsDrawer(props) {
data-ga-event-category="settings"
data-ga-event-action="dark"
>
<Brightness2RoundedIcon fontSize="small" />
<DarkModeOutlinedIcon fontSize="small" />
{t('settings.dark')}
</IconToggleButton>
</ToggleButtonGroup>
Expand Down
Loading