Skip to content

Commit

Permalink
[docs] Migrate rest of the docs to emotion (#27184)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnajdova
mnajdova authored Jul 9, 2021
1 parent f5d0366 commit 0dc8e79
Show file tree
Hide file tree
Showing 15 changed files with 770 additions and 974 deletions.
27 changes: 12 additions & 15 deletions docs/src/modules/components/ComponentLinkHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,18 @@ import BundleSizeIcon from 'docs/src/modules/components/BundleSizeIcon';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import W3CIcon from 'docs/src/modules/components/W3CIcon';
import MaterialDesignIcon from 'docs/src/modules/components/MaterialDesignIcon';
import { makeStyles } from '@material-ui/styles';
import { styled } from '@material-ui/core/styles';
import { useTranslate } from 'docs/src/modules/utils/i18n';

const useStyles = makeStyles((theme) => ({
root: {
margin: 0,
padding: 0,
listStyle: 'none',
display: 'flex',
flexWrap: 'wrap',
marginBottom: theme.spacing(2),
'& li': {
margin: theme.spacing(0.5),
},
const Root = styled('ul')(({ theme }) => ({
margin: 0,
padding: 0,
listStyle: 'none',
display: 'flex',
flexWrap: 'wrap',
marginBottom: theme.spacing(2),
'& li': {
margin: theme.spacing(0.5),
},
}));

Expand All @@ -32,15 +30,14 @@ export default function ComponentLinkHeader(props) {
headers: { packageName = '@material-ui/core' },
options,
} = props;
const classes = useStyles();
const t = useTranslate();

if (headers.materialDesign && options.design === false) {
throw new Error('missing design assets');
}

return (
<ul className={classes.root}>
<Root>
{headers.githubLabel ? (
<li>
<Chip
Expand Down Expand Up @@ -167,7 +164,7 @@ export default function ComponentLinkHeader(props) {
</li>
</React.Fragment>
) : null}
</ul>
</Root>
);
}

Expand Down
215 changes: 95 additions & 120 deletions docs/src/modules/components/Demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/styles';
import { alpha } from '@material-ui/core/styles';
import { alpha, styled } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Collapse from '@material-ui/core/Collapse';
import NoSsr from '@material-ui/core/NoSsr';
Expand All @@ -17,27 +15,19 @@ import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
// Sync with styles from DemoToolbar
// Importing the styles results in no bundle size reduction
const useDemoToolbarFallbackStyles = makeStyles(
(theme) => {
return {
root: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'flex',
height: theme.spacing(6),
},
},
};
},
{ name: 'DemoToolbar' },
);
const DemoToolbarFallbackRoot = styled('div')(({ theme }) => {
return {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'flex',
height: theme.spacing(6),
},
};
});
export function DemoToolbarFallback() {
const classes = useDemoToolbarFallbackStyles();
const t = useTranslate();

return (
<div aria-busy aria-label={t('demoToolbarLabel')} className={classes.root} role="toolbar" />
);
return <DemoToolbarFallbackRoot aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
}

function getDemoName(location) {
Expand Down Expand Up @@ -81,91 +71,86 @@ function useUniqueId(prefix) {
return id ? `${prefix}${id}` : id;
}

const useStyles = makeStyles(
(theme) => ({
root: {
marginBottom: 40,
marginLeft: theme.spacing(-2),
marginRight: theme.spacing(-2),
[theme.breakpoints.up('sm')]: {
padding: theme.spacing(0, 1),
marginLeft: 0,
marginRight: 0,
},
},
demo: {
position: 'relative',
outline: 0,
margin: 'auto',
display: 'flex',
justifyContent: 'center',
[theme.breakpoints.up('sm')]: {
borderRadius: theme.shape.borderRadius,
},
},
/* Isolate the demo with an outline. */
demoBgOutlined: {
padding: theme.spacing(3),
backgroundColor: theme.palette.background.paper,
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
borderLeftWidth: 0,
borderRightWidth: 0,
[theme.breakpoints.up('sm')]: {
borderLeftWidth: 1,
borderRightWidth: 1,
},
const Root = styled('div')(({ theme }) => ({
marginBottom: 40,
marginLeft: theme.spacing(-2),
marginRight: theme.spacing(-2),
[theme.breakpoints.up('sm')]: {
padding: theme.spacing(0, 1),
marginLeft: 0,
marginRight: 0,
},
}));
const DemoRoot = styled('div', {
shouldForwardProp: (prop) => prop !== 'hiddenToolbar' && prop !== 'bg',
})(({ theme, hiddenToolbar, bg }) => ({
position: 'relative',
outline: 0,
margin: 'auto',
display: 'flex',
justifyContent: 'center',
[theme.breakpoints.up('sm')]: {
borderRadius: theme.shape.borderRadius,
},
/* Isolate the demo with an outline. */
...(bg === 'outlined' && {
padding: theme.spacing(3),
backgroundColor: theme.palette.background.paper,
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
borderLeftWidth: 0,
borderRightWidth: 0,
[theme.breakpoints.up('sm')]: {
borderLeftWidth: 1,
borderRightWidth: 1,
},
/* Prepare the background to display an inner elevation. */
demoBgTrue: {
}),
/* Prepare the background to display an inner elevation. */
...(bg === true && {
padding: theme.spacing(3),
backgroundColor: theme.palette.mode === 'dark' ? '#333' : theme.palette.grey[100],
}),
/* Make no difference between the demo and the markdown. */
...(bg === 'inline' && {
// Maintain alignment with the markdown text
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(3),
backgroundColor: theme.palette.mode === 'dark' ? '#333' : theme.palette.grey[100],
},
/* Make no difference between the demo and the markdown. */
demoBgInline: {
// Maintain alignment with the markdown text
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(3),
},
},
demoHiddenToolbar: {
paddingTop: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
paddingTop: theme.spacing(3),
},
},
code: {
padding: 0,
marginBottom: theme.spacing(1),
marginTop: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
marginTop: theme.spacing(0),
},
'& pre': {
overflow: 'auto',
lineHeight: 1.5,
margin: '0 auto',
maxHeight: 'min(68vh, 1000px)',
},
},
anchorLink: {
marginTop: -64, // height of toolbar
position: 'absolute',
},
initialFocus: {
position: 'absolute',
top: 0,
left: 0,
width: theme.spacing(4),
height: theme.spacing(4),
pointerEvents: 'none',
}),
...(hiddenToolbar && {
paddingTop: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
paddingTop: theme.spacing(3),
},
}),
{ name: 'Demo' },
);

}));
const Code = styled(HighlightedCode)(({ theme }) => ({
padding: 0,
marginBottom: theme.spacing(1),
marginTop: theme.spacing(2),
[theme.breakpoints.up('sm')]: {
marginTop: theme.spacing(0),
},
'& pre': {
overflow: 'auto',
lineHeight: 1.5,
margin: '0 auto',
maxHeight: 'min(68vh, 1000px)',
},
}));
const AnchorLink = styled('div')({
marginTop: -64, // height of toolbar
position: 'absolute',
});
const InitialFocus = styled(IconButton)(({ theme }) => ({
position: 'absolute',
top: 0,
left: 0,
width: theme.spacing(4),
height: theme.spacing(4),
pointerEvents: 'none',
}));
export default function Demo(props) {
const { demo, demoOptions, disableAd, githubLocation } = props;
const classes = useStyles();
const t = useTranslate();
const codeVariant = useSelector((state) => state.options.codeVariant);
const demoData = useDemoData(codeVariant, demo, githubLocation);
Expand Down Expand Up @@ -224,25 +209,16 @@ export default function Demo(props) {
const [showAd, setShowAd] = React.useState(false);

return (
<div className={classes.root}>
<div className={classes.anchorLink} id={`${demoName}`} />
<div
className={clsx(classes.demo, {
[classes.demoHiddenToolbar]: demoOptions.hideToolbar,
[classes.demoBgOutlined]: demoOptions.bg === 'outlined',
[classes.demoBgTrue]: demoOptions.bg === true,
[classes.demoBgInline]: demoOptions.bg === 'inline',
})}
<Root>
<AnchorLink id={`${demoName}`} />
<DemoRoot
hiddenToolbar={demoOptions.hideToolbar}
bg={demoOptions.bg}
id={demoId}
onMouseEnter={handleDemoHover}
onMouseLeave={handleDemoHover}
>
<IconButton
aria-label={t('initialFocusLabel')}
className={classes.initialFocus}
action={initialFocusRef}
tabIndex={-1}
/>
<InitialFocus aria-label={t('initialFocusLabel')} action={initialFocusRef} tabIndex={-1} />
<DemoSandboxed
key={demoKey}
style={demoSandboxedStyle}
Expand All @@ -251,9 +227,9 @@ export default function Demo(props) {
name={demoName}
onResetDemoClick={resetDemo}
/>
</div>
<div className={classes.anchorLink} id={`${demoName}.js`} />
<div className={classes.anchorLink} id={`${demoName}.tsx`} />
</DemoRoot>
<AnchorLink id={`${demoName}.js`} />
<AnchorLink id={`${demoName}.tsx`} />
{demoOptions.hideToolbar ? null : (
<NoSsr defer fallback={<DemoToolbarFallback />}>
<React.Suspense fallback={<DemoToolbarFallback />}>
Expand Down Expand Up @@ -281,16 +257,15 @@ export default function Demo(props) {
)}
<Collapse in={openDemoSource} unmountOnExit>
<div>
<HighlightedCode
className={classes.code}
<Code
id={demoSourceId}
code={showPreview && !codeOpen ? jsx : demoData.raw}
language={demoData.sourceLanguage}
/>
</div>
</Collapse>
{showAd && !disableAd && !demoOptions.disableAd ? <AdCarbonInline /> : null}
</div>
</Root>
);
}

Expand Down
26 changes: 10 additions & 16 deletions docs/src/modules/components/DemoSandboxed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import rtlPluginSc from 'stylis-plugin-rtl-sc';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { StyleSheetManager } from 'styled-components';
import { jssPreset, StylesProvider, makeStyles } from '@material-ui/styles';
import { useTheme } from '@material-ui/core/styles';
import { jssPreset, StylesProvider } from '@material-ui/styles';
import { useTheme, styled } from '@material-ui/core/styles';
import rtl from 'jss-rtl';
import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
import { useTranslate } from 'docs/src/modules/utils/i18n';
Expand Down Expand Up @@ -64,23 +64,17 @@ FramedDemo.propTypes = {
document: PropTypes.object.isRequired,
};

const useStyles = makeStyles(
(theme) => ({
frame: {
backgroundColor: theme.palette.background.default,
flexGrow: 1,
height: 400,
border: 0,
boxShadow: theme.shadows[1],
},
}),
{ name: 'DemoFrame' },
);
const Frame = styled('iframe')(({ theme }) => ({
backgroundColor: theme.palette.background.default,
flexGrow: 1,
height: 400,
border: 0,
boxShadow: theme.shadows[1],
}));

function DemoFrame(props) {
const { children, name, ...other } = props;
const title = `${name} demo`;
const classes = useStyles();
/**
* @type {import('react').Ref<HTMLIFrameElement>}
*/
Expand All @@ -107,7 +101,7 @@ function DemoFrame(props) {
const document = frameRef.current?.contentDocument;
return (
<React.Fragment>
<iframe className={classes.frame} onLoad={onLoad} ref={frameRef} title={title} {...other} />
<Frame onLoad={onLoad} ref={frameRef} title={title} {...other} />
{iframeLoaded !== false
? ReactDOM.createPortal(
<FramedDemo document={document}>{children}</FramedDemo>,
Expand Down
Loading

0 comments on commit 0dc8e79

Please sign in to comment.