From 19d81a34a7782c8f31a4ff3b3f27ba11b9f249f0 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 20 Jul 2021 12:35:27 +0200 Subject: [PATCH] [docs] Convert App* components to emotion (#27150) --- docs/src/modules/components/AppContainer.js | 29 +- docs/src/modules/components/AppFooter.js | 123 ++++---- docs/src/modules/components/AppFrame.js | 133 +++++---- docs/src/modules/components/AppLayoutDocs.js | 95 +++---- .../modules/components/AppLayoutDocsFooter.js | 69 +++-- docs/src/modules/components/AppNavDrawer.js | 97 +++---- .../modules/components/AppNavDrawerItem.js | 122 ++++---- docs/src/modules/components/AppSearch.js | 269 +++++++++--------- .../modules/components/AppSettingsDrawer.js | 99 +++---- .../modules/components/AppTableOfContents.js | 85 +++--- 10 files changed, 559 insertions(+), 562 deletions(-) diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js index 5afe4f070f7b58..f2a355352bfb86 100644 --- a/docs/src/modules/components/AppContainer.js +++ b/docs/src/modules/components/AppContainer.js @@ -1,11 +1,9 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; -const useStyles = makeStyles((theme) => ({ - root: { +const StyledContainer = styled(Container)(({ theme }) => { + return { paddingTop: 80 + 16, [theme.breakpoints.up('md')]: { // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable. @@ -17,24 +15,9 @@ const useStyles = makeStyles((theme) => ({ paddingLeft: theme.spacing(6), paddingRight: theme.spacing(6), }, - }, -})); + }; +}); export default function AppContainer(props) { - const { className, ...other } = props; - const classes = useStyles(); - - return ( - - ); + return ; } - -AppContainer.propTypes = { - className: PropTypes.string, -}; diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js index d48d0d2c8975f1..c8b8aecda22f60 100644 --- a/docs/src/modules/components/AppFooter.js +++ b/docs/src/modules/components/AppFooter.js @@ -1,9 +1,7 @@ /* eslint-disable material-ui/no-hardcoded-labels */ import * as React from 'react'; -import PropTypes from 'prop-types'; import Interpolate from '@trendmicro/react-interpolate'; -import { styled, createTheme } from '@material-ui/core/styles'; -import { withStyles } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import Container from '@material-ui/core/Container'; @@ -11,17 +9,29 @@ import Divider from '@material-ui/core/Divider'; import Link from 'docs/src/modules/components/Link'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -const styles = (theme) => ({ - root: { +const Badge = styled('span')(({ theme }) => ({ + alignSelf: 'center', + padding: '1px 3px', + backgroundColor: theme.palette.mode === 'light' ? 'rgb(235, 87, 87)' : '#c55e5e', + color: '#fff', + borderRadius: 3, + marginLeft: 6, + fontSize: '10px', + lineHeight: '1.3', + textTransform: 'uppercase', + fontWeight: '600', + letterSpacing: '0.5px', + display: 'inline-block', +})); + +const Root = styled('div')(({ theme }) => { + return { marginTop: theme.spacing(6), - }, - footer: { - padding: theme.spacing(3, 0), - [theme.breakpoints.up('sm')]: { - padding: theme.spacing(8, 0), - }, - }, - logo: { + }; +}); + +const Logo = styled('div')(({ theme }) => { + return { display: 'flex', alignItems: 'center', marginBottom: theme.spacing(4), @@ -30,8 +40,11 @@ const styles = (theme) => ({ height: 22, marginRight: theme.spacing(1.5), }, - }, - list: { + }; +}); + +const ListGrid = styled(Grid)(({ theme }) => { + return { marginBottom: theme.spacing(4), '& h3': { fontWeight: theme.typography.fontWeightMedium, @@ -45,51 +58,48 @@ const styles = (theme) => ({ padding: '6px 0', color: theme.palette.text.secondary, }, - }, - version: { + }; +}); + +const VersionTypography = styled(Typography)(({ theme }) => { + return { marginTop: theme.spacing(3), - }, - careers: { - display: 'flex', - }, + }; }); -const Badge = styled('span')(({ theme }) => ({ - alignSelf: 'center', - padding: '1px 3px', - backgroundColor: theme.palette.mode === 'light' ? 'rgb(235, 87, 87)' : '#c55e5e', - color: '#fff', - borderRadius: 3, - marginLeft: 6, - fontSize: '10px', - lineHeight: '1.3', - textTransform: 'uppercase', - fontWeight: '600', - letterSpacing: '0.5px', - display: 'inline-block', -})); +const CareersLi = styled('li')({ + display: 'flex', +}); + +const Footer = styled('footer')(({ theme }) => { + return { + padding: theme.spacing(3, 0), + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(8, 0), + }, + }; +}); -function AppFooter(props) { - const { classes } = props; +export default function AppFooter() { const userLanguage = useUserLanguage(); const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`; const t = useTranslate(); return ( -
+ -
+
-
+ Material-UI -
+ - + {t('footerCommunity')} @@ -135,8 +145,8 @@ function AppFooter(props) { - - + + {t('footerResources')} @@ -172,8 +182,8 @@ function AppFooter(props) { - - + + {t('footerCompany')} @@ -188,18 +198,18 @@ function AppFooter(props) { Contact Us -
  • + Careers hiring -
    • + -     +     - + -
    + +
    -
    + ); } - -AppFooter.propTypes = { - classes: PropTypes.object.isRequired, -}; - -const defaultTheme = createTheme(); -export default withStyles(styles, { defaultTheme })(AppFooter); diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index eee6fe93154746..dd3c37234d8f1a 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -1,8 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useRouter } from 'next/router'; -import { createTheme } from '@material-ui/core/styles'; -import { withStyles } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; import NProgress from 'nprogress'; import CssBaseline from '@material-ui/core/CssBaseline'; import MuiLink from '@material-ui/core/Link'; @@ -77,22 +76,19 @@ function DeferredAppSearch() { ); } -const styles = (theme) => ({ - '@global': { - '#main-content': { +const RootDiv = styled('div')(({ theme }) => { + return { + display: 'flex', + backgroundColor: theme.palette.mode === 'dark' && theme.palette.grey[900], + // TODO: Should be handled by the main component + '& #main-content': { outline: 0, }, - }, - root: { - display: 'flex', - ...(theme.palette.mode === 'dark' && { - backgroundColor: theme.palette.grey[900], - }), - }, - grow: { - flex: '1 1 auto', - }, - skipNav: { + }; +}); + +const SkipLink = styled(MuiLink)(({ theme }) => { + return { position: 'fixed', padding: theme.spacing(1), backgroundColor: theme.palette.background.paper, @@ -113,40 +109,64 @@ const styles = (theme) => ({ '@media print': { display: 'none', }, - }, - appBar: { + }; +}); + +const StyledAppBar = styled(AppBar, { + shouldForwardProp: (prop) => prop !== 'disablePermanent', +})(({ disablePermanent, theme }) => { + return { transition: theme.transitions.create('width'), - }, - language: { + ...(!disablePermanent && { + boxShadow: 'none', + [theme.breakpoints.up('lg')]: { + width: 'calc(100% - 240px)', + }, + }), + }; +}); + +const GrowingDiv = styled('div')({ + flex: '1 1 auto', +}); + +const LanguageSpan = styled('span')(({ theme }) => { + return { margin: theme.spacing(0, 0.5, 0, 1), display: 'none', [theme.breakpoints.up('md')]: { display: 'block', }, - }, - appBarHome: { - boxShadow: 'none', - }, - appBarShift: { + }; +}); + +const NavIconButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== 'disablePermanent', +})(({ disablePermanent, theme }) => { + if (disablePermanent) { + return {}; + } + return { [theme.breakpoints.up('lg')]: { - width: 'calc(100% - 240px)', + display: 'none', }, - }, - drawer: { + }; +}); + +const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) => { + if (disablePermanent) { + return {}; + } + return { [theme.breakpoints.up('lg')]: { flexShrink: 0, width: 240, }, - }, - navIconHide: { - [theme.breakpoints.up('lg')]: { - display: 'none', - }, - }, + }; }); function AppFrame(props) { - const { children, classes, disableDrawer = false } = props; + const { children, disableDrawer = false } = props; const t = useTranslate(); const userLanguage = useUserLanguage(); @@ -183,39 +203,29 @@ function AppFrame(props) { const { canonical } = pathnameToLanguage(router.asPath); const { activePage } = React.useContext(PageContext); - let disablePermanent = false; - let navIconClassName = ''; - let appBarClassName = classes.appBar; - - if (activePage?.disableDrawer === true || disableDrawer === true) { - disablePermanent = true; - appBarClassName += ` ${classes.appBarHome}`; - } else { - navIconClassName = classes.navIconHide; - appBarClassName += ` ${classes.appBarShift}`; - } + const disablePermanent = activePage?.disableDrawer === true || disableDrawer === true; return ( -
    + - + {t('appFrame.skipToContent')} - + - + - - -
    + + @@ -295,9 +305,8 @@ function AppFrame(props) { - - + {children} -
    +     ); } AppFrame.propTypes = { children: PropTypes.node.isRequired, - classes: PropTypes.object.isRequired, disableDrawer: PropTypes.bool, }; -const defaultTheme = createTheme(); -export default withStyles(styles, { defaultTheme })(AppFrame); +export default AppFrame; diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index c3dbcfb7f95dcb..f12db82cd51998 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; import { exactProp } from '@material-ui/utils'; import NoSsr from '@material-ui/core/NoSsr'; import Head from 'docs/src/modules/components/Head'; @@ -17,43 +16,51 @@ import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter const TOC_WIDTH = 175; const NAV_WIDTH = 240; -const useStyles = makeStyles((theme) => ({ - root: { +const Main = styled('main', { + shouldForwardProp: (prop) => prop !== 'disableToc', +})(({ disableToc, theme }) => { + return { display: 'flex', width: '100%', + ...(disableToc && { + [theme.breakpoints.up('lg')]: { + marginRight: '5%', + }, + }), [theme.breakpoints.up('lg')]: { width: `calc(100% - ${NAV_WIDTH}px)`, }, - }, - container: { + }; +}); + +const StyledAppContainer = styled(AppContainer, { + shouldForwardProp: (prop) => prop !== 'disableAd' && prop !== 'disableToc', +})(({ disableAd, disableToc, theme }) => { + return { position: 'relative', - }, - actions: { - position: 'absolute', - right: 16, - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-end', - }, - ad: { - '& .description': { - marginBottom: 198, - }, - '& .description.ad': { - marginBottom: 40, - }, - }, - toc: { - [theme.breakpoints.up('sm')]: { - width: `calc(100% - ${TOC_WIDTH}px)`, - }, - }, - disableToc: { - [theme.breakpoints.up('lg')]: { - marginRight: '5%', - }, - }, -})); + ...(!disableAd && { + '& .description': { + marginBottom: 198, + }, + '& .description.ad': { + marginBottom: 40, + }, + ...(!disableToc && { + [theme.breakpoints.up('sm')]: { + width: `calc(100% - ${TOC_WIDTH}px)`, + }, + }), + }), + }; +}); + +const ActionsDiv = styled('div')({ + position: 'absolute', + right: 16, + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-end', +}); function AppLayoutDocs(props) { const { @@ -65,7 +72,6 @@ function AppLayoutDocs(props) { title, toc, } = props; - const classes = useStyles(); if (description === undefined) { throw new Error('Missing description in the page'); @@ -80,27 +86,16 @@ function AppLayoutDocs(props) { )} -
    - -
    - {location && } -
    +
    + + {location && } {children} - + {disableToc ? null : } -
    +
    ); diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 6f02f9f007a4e2..43ed9c9d119e01 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -1,6 +1,6 @@ /* eslint-disable no-restricted-globals */ import * as React from 'react'; -import { makeStyles } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; import DialogActions from '@material-ui/core/DialogActions'; import TextField from '@material-ui/core/TextField'; import Collapse from '@material-ui/core/Collapse'; @@ -20,33 +20,45 @@ import PageContext from 'docs/src/modules/components/PageContext'; import Link from 'docs/src/modules/components/Link'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -const useStyles = makeStyles((theme) => ({ - root: { +const Footer = styled('footer')(({ theme }) => { + return { marginTop: theme.spacing(12), - }, - pagination: { + }; +}); + +const PaginationDiv = styled('div')(({ theme }) => { + return { margin: theme.spacing(3, 0, 4), display: 'flex', justifyContent: 'space-between', [theme.breakpoints.down('sm')]: { flexWrap: 'wrap', }, - }, - pageLinkButton: { + }; +}); + +const PageLinkButton = styled(Button)(({ theme }) => { + return { textTransform: 'none', fontWeight: theme.typography.fontWeightRegular, - }, - feedbackMessage: { - margin: theme.spacing(0, 2), - }, - feedback: { + }; +}); + +const FeedbackGrid = styled(Grid)(({ theme }) => { + return { width: 'auto', [theme.breakpoints.down('sm')]: { order: 3, width: '100%', }, - }, -})); + }; +}); + +const FeedbackMessage = styled(Typography)(({ theme }) => { + return { + margin: theme.spacing(0, 2), + }; +}); /** * @typedef {import('docs/src/pages').MuiPage} MuiPage @@ -160,7 +172,6 @@ function usePageNeighbours() { } export default function AppLayoutDocsFooter() { - const classes = useStyles(); const t = useTranslate(); const userLanguage = useUserLanguage(); const { activePage } = React.useContext(PageContext); @@ -232,42 +243,39 @@ export default function AppLayoutDocsFooter() { return ( -
    +
    {hidePagePagination ? null : ( -
    + {prevPage !== null ? ( - + ) : (
    )} - - {t('feedbackMessage')} - +
    @@ -280,20 +288,19 @@ export default function AppLayoutDocsFooter() {
    -     + {nextPage !== null ? ( - + ) : null} -
    +     )} @@ -330,7 +337,7 @@ export default function AppLayoutDocsFooter() { -
    +
    ({ - paper: { - width: 240, - boxShadow: 'none', - }, - title: { - color: theme.palette.text.secondary, - marginBottom: theme.spacing(0.5), - '&:hover': { - color: theme.palette.primary.main, - }, - }, - // https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items - toolbarIe11: { - display: 'flex', - }, - toolbar: { +// https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items +const ToolbarIE11 = styled('div')({ display: 'flex' }); + +const ToolbarDiv = styled('div')(({ theme }) => { + return { ...theme.mixins.toolbar, paddingLeft: theme.spacing(3), display: 'flex', @@ -77,7 +63,33 @@ const styles = (theme) => ({ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', - }, + }; +}); + +const TitleLink = styled(Link)(({ theme }) => { + return { + color: theme.palette.text.secondary, + marginBottom: theme.spacing(0.5), + '&:hover': { + color: theme.palette.primary.main, + }, + }; +}); + +const StyledDrawer = styled(Drawer)(({ theme }) => { + return { + [theme.breakpoints.up('xs')]: { + display: 'none', + }, + [theme.breakpoints.up('lg')]: { + display: 'block', + }, + }; +}); + +const SwipeableDrawerPaperComponent = styled('div')({ + width: 240, + boxShadow: 'none', }); function renderNavItems(options) { @@ -146,7 +158,7 @@ function reduceChildRoutes(context) { const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent); function AppNavDrawer(props) { - const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props; + const { className, disablePermanent, mobileOpen, onClose, onOpen } = props; const { activePage, pages } = React.useContext(PageContext); const userLanguage = useUserLanguage(); const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`; @@ -158,18 +170,11 @@ function AppNavDrawer(props) { return ( -
    -
    - + + + Material-UI - + {process.env.LIB_VERSION ? ( ) : null} -
    -
    + + @@ -191,15 +196,12 @@ function AppNavDrawer(props) { {navItems}     ); - }, [activePage, pages, onClose, t, classes, languagePrefix]); + }, [activePage, pages, onClose, t, languagePrefix]); return ( ); } AppNavDrawer.propTypes = { - classes: PropTypes.object.isRequired, className: PropTypes.string, disablePermanent: PropTypes.bool.isRequired, mobileOpen: PropTypes.bool.isRequired, @@ -244,5 +246,4 @@ AppNavDrawer.propTypes = { onOpen: PropTypes.func.isRequired, }; -const defaultTheme = createTheme(); -export default withStyles(styles, { defaultTheme })(AppNavDrawer); +export default AppNavDrawer; diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index 650fd5a4da94c4..59d2ca85eb0359 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -1,22 +1,17 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { makeStyles } from '@material-ui/styles'; -import { alpha } from '@material-ui/core/styles'; +import { alpha, styled } from '@material-ui/core/styles'; import Collapse from '@material-ui/core/Collapse'; import ButtonBase from '@material-ui/core/ButtonBase'; import ArrowRightIcon from '@material-ui/icons/ArrowRight'; import Link from 'docs/src/modules/components/Link'; -const useStyles = makeStyles((theme) => ({ - li: { - padding: '1px 0', - display: 'block', - }, - liRoot: { - padding: '0 8px', - }, - item: { +const Item = styled('div', { + shouldForwardProp: + // disable `as` prop + () => true, +})(({ theme }) => { + return { ...theme.typography.body2, display: 'flex', borderRadius: theme.shape.borderRadius, @@ -40,24 +35,13 @@ const useStyles = makeStyles((theme) => ({ paddingTop: 6, paddingBottom: 6, }, - }, - button: { - color: theme.palette.text.primary, - fontWeight: theme.typography.fontWeightMedium, - '& svg': { - fontSize: 18, - marginLeft: -19, - color: theme.palette.text.secondary, - }, - '& svg$open': { - transform: 'rotate(90deg)', - }, - '&:hover svg': { - color: theme.palette.text.primary, - }, - }, - open: {}, - link: { + }; +}); + +const ItemLink = styled(Item.withComponent(Link), { + shouldForwardProp: (prop) => prop !== 'depth', +})(({ depth, theme }) => { + return { color: theme.palette.text.secondary, '&.app-drawer-active': { color: theme.palette.primary.main, @@ -79,8 +63,40 @@ const useStyles = makeStyles((theme) => ({ ), }, }, - }, -})); + paddingLeft: `${8 * (3 + 1.5 * depth)}px`, + }; +}); + +const ItemButtonIcon = styled(ArrowRightIcon, { + shouldForwardProp: (prop) => prop !== 'open', +})(({ open, theme }) => { + return { + fontSize: 18, + marginLeft: -19, + color: theme.palette.text.secondary, + transform: open && 'rotate(90deg)', + }; +}); + +const ItemButton = styled(Item.withComponent(ButtonBase), { + shouldForwardProp: (prop) => prop !== 'depth', +})(({ depth, theme }) => { + return { + color: theme.palette.text.primary, + fontWeight: theme.typography.fontWeightMedium, + [`&:hover ${ItemButtonIcon}`]: { + color: theme.palette.text.primary, + }, + paddingLeft: `${8 * (3 + 1.5 * depth)}px`, + }; +}); + +const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })(({ depth }) => { + return { + padding: depth === 0 ? '0 8px' : '1px 0', + display: 'block', + }; +}); export default function AppNavDrawerItem(props) { const { @@ -94,62 +110,44 @@ export default function AppNavDrawerItem(props) { linkProps, ...other } = props; - const classes = useStyles(); const [open, setOpen] = React.useState(openImmediately); const handleClick = () => { setOpen((oldOpen) => !oldOpen); }; - const sx = { - pl: `${8 * (3 + 1.5 * depth)}px`, - }; - if (href) { return ( -
  • - + {title} - -
    • + + ); } return ( -
  • - + - + {title} - + {children} -
    • + ); } diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 6a92db970513ac..df3dc197ce4bda 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -1,9 +1,8 @@ import * as React from 'react'; -import clsx from 'clsx'; import useLazyCSS from 'docs/src/modules/utils/useLazyCSS'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { makeStyles } from '@material-ui/styles'; -import { alpha, useTheme } from '@material-ui/core/styles'; +import { alpha, styled, useTheme } from '@material-ui/core/styles'; +import GlobalStyles from '@material-ui/core/GlobalStyles'; import Input from '@material-ui/core/Input'; import SearchIcon from '@material-ui/icons/Search'; import { handleEvent } from 'docs/src/modules/components/MarkdownLinks'; @@ -11,125 +10,141 @@ import docsearch from 'docsearch.js'; import { LANGUAGES_SSR } from 'docs/src/modules/constants'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -const useStyles = makeStyles( - (theme) => ({ - '@global': { - '.algolia-autocomplete': { - '& .ds-dropdown-menu': { - boxShadow: theme.shadows[1], - borderRadius: theme.shape.borderRadius, - '&::before': { - display: 'none', - }, - '& [class^=ds-dataset-]': { - border: 0, - maxHeight: 'calc(100vh - 100px)', - borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.paper, - }, - }, - '& .algolia-docsearch-suggestion--category-header-lvl0': { - color: theme.palette.text.primary, - }, - '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column': { - opacity: 1, - padding: '5.33px 10.66px', - textAlign: 'right', - width: '25%', - }, - '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content': { - float: 'right', - padding: '5.33px 0 5.33px 10.66px', - width: '75%', - }, - '& .algolia-docsearch-suggestion--subcategory-column-text': { - color: theme.palette.text.secondary, - fontWeight: theme.typography.fontWeightRegular, - }, - '& .algolia-docsearch-suggestion--highlight': { - color: theme.palette.mode === 'light' ? '#174d8c' : '#acccf1', - }, - '& .algolia-docsearch-suggestion': { - textDecoration: 'none', - backgroundColor: theme.palette.background.paper, - }, - '& .algolia-docsearch-suggestion--title': { - ...theme.typography.h6, - color: theme.palette.text.primary, - }, - '& .algolia-docsearch-suggestion--text': { - ...theme.typography.body2, - color: theme.palette.text.secondary, - }, - '&& .algolia-docsearch-suggestion--no-results': { - width: '100%', - '&::before': { - display: 'none', - }, - }, - '& .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content': { - backgroundColor: `${theme.palette.action.selected} !important`, - }, - }, - }, - root: { - fontFamily: theme.typography.fontFamily, - position: 'relative', - marginRight: theme.spacing(2), - marginLeft: theme.spacing(1), - borderRadius: theme.shape.borderRadius, - backgroundColor: alpha(theme.palette.common.white, 0.15), - '&:hover': { - backgroundColor: alpha(theme.palette.common.white, 0.25), - }, - '& $inputInput': { - transition: theme.transitions.create('width'), - width: 140, - '&:focus': { - width: 170, - }, - }, +const StyledInput = styled(Input)(({ theme }) => ({ + color: 'inherit', + '& input': { + padding: theme.spacing(1), + paddingLeft: theme.spacing(9), + transition: theme.transitions.create('width'), + width: 140, + '&:focus': { + width: 170, }, - search: { - width: theme.spacing(9), - height: '100%', - position: 'absolute', - pointerEvents: 'none', + }, +})); + +function AlgoliaStyles() { + return ( + { + return { + '.algolia-autocomplete': { + '& .ds-dropdown-menu': { + boxShadow: theme.shadows[1], + borderRadius: theme.shape.borderRadius, + '&::before': { + display: 'none', + }, + '& [class^=ds-dataset-]': { + border: 0, + maxHeight: 'calc(100vh - 100px)', + borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.background.paper, + }, + }, + '& .algolia-docsearch-suggestion--category-header-lvl0': { + color: theme.palette.text.primary, + }, + '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column': { + opacity: 1, + padding: '5.33px 10.66px', + textAlign: 'right', + width: '25%', + }, + '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content': { + float: 'right', + padding: '5.33px 0 5.33px 10.66px', + width: '75%', + }, + '& .algolia-docsearch-suggestion--subcategory-column-text': { + color: theme.palette.text.secondary, + fontWeight: theme.typography.fontWeightRegular, + }, + '& .algolia-docsearch-suggestion--highlight': { + color: theme.palette.mode === 'light' ? '#174d8c' : '#acccf1', + }, + '& .algolia-docsearch-suggestion': { + textDecoration: 'none', + backgroundColor: theme.palette.background.paper, + }, + '& .algolia-docsearch-suggestion--title': { + ...theme.typography.h6, + color: theme.palette.text.primary, + }, + '& .algolia-docsearch-suggestion--text': { + ...theme.typography.body2, + color: theme.palette.text.secondary, + }, + '&& .algolia-docsearch-suggestion--no-results': { + width: '100%', + '&::before': { + display: 'none', + }, + }, + '& .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content': { + backgroundColor: `${theme.palette.action.selected} !important`, + }, + }, + }; + }} + /> + ); +} + +const RootDiv = styled('div')(({ theme }) => { + return { + display: 'none', + [theme.breakpoints.up('sm')]: { display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - inputRoot: { - color: 'inherit', }, - inputInput: { - padding: theme.spacing(1, 1, 1, 9), + fontFamily: theme.typography.fontFamily, + position: 'relative', + marginRight: theme.spacing(2), + marginLeft: theme.spacing(1), + borderRadius: theme.shape.borderRadius, + backgroundColor: alpha(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: alpha(theme.palette.common.white, 0.25), }, - shortcut: { - fontSize: theme.typography.pxToRem(13), - lineHeight: '21px', - color: alpha(theme.palette.common.white, 0.8), - border: `1px solid ${alpha(theme.palette.common.white, 0.4)}`, - backgroundColor: alpha(theme.palette.common.white, 0.1), - padding: theme.spacing(0, 0.5), - position: 'absolute', - right: theme.spacing(1), - height: 23, - top: 'calc(50% - 11px)', - borderRadius: theme.shape.borderRadius, - transition: theme.transitions.create('opacity', { - duration: theme.transitions.duration.shortest, - }), - // So that clicks target the input. - // Makes the text non selectable but neither is the placeholder or adornment. - pointerEvents: 'none', - '&.Mui-focused': { - opacity: 0, - }, + }; +}); + +const SearchDiv = styled('div')(({ theme }) => { + return { + width: theme.spacing(9), + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }; +}); + +const Shortcut = styled('div')(({ theme }) => { + return { + fontSize: theme.typography.pxToRem(13), + lineHeight: '21px', + color: alpha(theme.palette.common.white, 0.8), + border: `1px solid ${alpha(theme.palette.common.white, 0.4)}`, + backgroundColor: alpha(theme.palette.common.white, 0.1), + padding: theme.spacing(0, 0.5), + position: 'absolute', + right: theme.spacing(1), + height: 23, + top: 'calc(50% - 11px)', + borderRadius: theme.shape.borderRadius, + transition: theme.transitions.create('opacity', { + duration: theme.transitions.duration.shortest, + }), + // So that clicks target the input. + // Makes the text non selectable but neither is the placeholder or adornment. + pointerEvents: 'none', + '&.Mui-focused': { + opacity: 0, }, - }), - { name: 'AppSearch' }, -); + }; +}); /** * When using this component it is recommend to include a preload link @@ -137,7 +152,6 @@ const useStyles = makeStyles( * to potentially reduce load times */ export default function AppSearch() { - const classes = useStyles(); const inputRef = React.useRef(null); const [focused, setFocused] = React.useState(false); const theme = useTheme(); @@ -244,11 +258,12 @@ export default function AppSearch() { const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; return ( -
    -
    + + -
    - + + { setFocused(false); }} - classes={{ - root: classes.inputRoot, - input: classes.inputInput, - }} /> -
    + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} {macOS ? '⌘' : 'Ctrl+'}K -
    -
    + + ); } diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js index dfda36a29097c8..6fac1e42d591eb 100644 --- a/docs/src/modules/components/AppSettingsDrawer.js +++ b/docs/src/modules/components/AppSettingsDrawer.js @@ -1,10 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/styles'; -import { createTheme, useTheme } from '@material-ui/core/styles'; +import { styled, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import Drawer from '@material-ui/core/Drawer'; import Box from '@material-ui/core/Box'; +import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Divider from '@material-ui/core/Divider'; import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'; @@ -21,20 +21,25 @@ 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 styles = () => ({ - paper: { - width: 352, - }, - heading: { - margin: '16px 0 8px', - }, - icon: { - marginRight: 8, +const DrawerPaper = styled(Paper)({ + width: 352, +}); + +const Heading = styled(Typography)({ + margin: '16px 0 8px', +}); + +const IconToggleButton = styled(ToggleButton)({ + display: 'flex', + justifyContent: 'center', + width: '100%', + '& > *': { + marginRight: '8px', }, }); function AppSettingsDrawer(props) { - const { classes, onClose, open = false, ...other } = props; + const { onClose, open = false, ...other } = props; const t = useTranslate(); const theme = useTheme(); const changeTheme = useChangeTheme(); @@ -71,9 +76,7 @@ function AppSettingsDrawer(props) { anchor="right" onClose={onClose} open={open} - classes={{ - paper: classes.paper, - }} + PaperProps={{ component: DrawerPaper }} {...other} > @@ -84,9 +87,9 @@ function AppSettingsDrawer(props) { - + {t('settings.mode')} - + - - - - {t('settings.light')} - - - + {t('settings.light')} + + - - - {t('settings.system')} - - - + {t('settings.system')} + + - - - {t('settings.dark')} - - + + {t('settings.dark')} + - + {t('settings.direction')} - + - - - - {t('settings.ltr')} - - - + {t('settings.ltr')} + + - - - {t('settings.rtl')} - - + + {t('settings.rtl')} + - - {t('settings.color')} - + {t('settings.color')} ({ - root: { +const Nav = styled('nav')(({ theme }) => { + return { top: 70, // Fix IE11 position sticky issue. marginTop: 70, @@ -24,35 +23,45 @@ const useStyles = makeStyles((theme) => ({ [theme.breakpoints.up('sm')]: { display: 'block', }, - }, - contents: { + }; +}); + +const NavLabel = styled(Typography)(({ theme }) => { + return { marginTop: theme.spacing(2), paddingLeft: theme.spacing(1), - }, - ul: { - padding: 0, - margin: 0, - listStyle: 'none', - }, - item: { + }; +}); + +const NavList = styled(Typography)({ + padding: 0, + margin: 0, + listStyle: 'none', +}); + +const NavItem = styled(Link, { + shouldForwardProp: (prop) => prop !== 'active' && prop !== 'secondary', +})(({ active, secondary, theme }) => { + const activeStyles = { + borderLeftColor: + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800], + }; + + return { fontSize: '.8125rem', - padding: theme.spacing(0.5, 0, 0.5, '5px'), + padding: theme.spacing(0.5, 0, 0.5, secondary ? 2.5 : '5px'), borderLeft: `3px solid transparent`, boxSizing: 'border-box', '&:hover': { borderLeftColor: theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[900], }, - '&$active,&:active': { - borderLeftColor: - theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800], - }, - }, - secondaryItem: { - paddingLeft: theme.spacing(2.5), - }, - active: {}, -})); + // TODO: We probably want `aria-current="location"` instead. + // If so, are we sure "current" and "active" states should have the same styles? + ...(active && activeStyles), + '&:active': activeStyles, + }; +}); // TODO: these nodes are mutable sources. Use createMutableSource once it's stable function getItemsClient(headings) { @@ -99,7 +108,6 @@ function useThrottledOnScroll(callback, delay) { export default function AppTableOfContents(props) { const { items } = props; - const classes = useStyles(); const t = useTranslate(); const itemsWithNodeRef = React.useRef([]); @@ -183,46 +191,41 @@ export default function AppTableOfContents(props) { ); const itemLink = (item, secondary) => ( - - + ); return ( - ); }