From 74588de601c507e44fb710f492dd3b2b734658a3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 27 Sep 2020 18:19:20 +0200 Subject: [PATCH 1/4] [docs] Improve the left side-nav --- docs/src/modules/components/AppDrawer.js | 2 +- .../modules/components/AppDrawerNavItem.js | 100 +++++++++++------- docs/src/modules/components/Link.js | 4 + docs/src/pages.js | 2 +- 4 files changed, 68 insertions(+), 40 deletions(-) diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index 498b07a472d9b2..91dcd2d7c3db47 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -82,7 +82,7 @@ function renderNavItems(options) { const { pages, ...params } = options; return ( - + {pages.reduce( // eslint-disable-next-line @typescript-eslint/no-use-before-define (items, page) => reduceChildRoutes({ items, page, ...params }), diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 5c6d6145470775..90ecdfaa81ab54 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -1,45 +1,72 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { makeStyles } from '@material-ui/core/styles'; -import ListItem from '@material-ui/core/ListItem'; -import Button from '@material-ui/core/Button'; +import { makeStyles, fade } from '@material-ui/core/styles'; import Collapse from '@material-ui/core/Collapse'; +import { createSvgIcon } from '@material-ui/core/utils'; import Link from 'docs/src/modules/components/Link'; const useStyles = makeStyles((theme) => ({ - item: { + li: { display: 'block', paddingTop: 0, paddingBottom: 0, }, - itemLeaf: { + liLeaf: { display: 'flex', - paddingTop: 0, - paddingBottom: 0, + padding: '0 12px', }, button: { - letterSpacing: 0, - justifyContent: 'flex-start', - textTransform: 'none', - width: '100%', - }, - buttonLeaf: { - letterSpacing: 0, - justifyContent: 'flex-start', - textTransform: 'none', + ...theme.typography.body2, + cursor: 'pointer', + padding: '8px 0 6px', + display: 'flex', + color: theme.palette.text.primary, + fontWeight: theme.typography.fontWeightMedium, + WebkitTapHighlightColor: 'transparent', + backgroundColor: 'transparent', // Reset default value + outline: 0, + border: 0, + margin: 0, // Remove the margin in Safari + borderRadius: 0, + textAlign: 'left', + '-moz-appearance': 'none', // Reset + '-webkit-appearance': 'none', // Reset width: '100%', - fontWeight: theme.typography.fontWeightRegular, - '&.depth-0': { - fontWeight: theme.typography.fontWeightMedium, + '& svg': { + fontSize: 18, + marginLeft: -6, + color: theme.palette.text.secondary, + }, + '&:hover svg': { + color: theme.palette.text.primary, }, }, - active: { - color: theme.palette.primary.main, + link: { + ...theme.typography.body2, + borderRadius: theme.shape.borderRadius, + width: '100%', + padding: '6px 0', + textDecoration: 'none', + color: theme.palette.text.secondary, fontWeight: theme.typography.fontWeightMedium, + transition: theme.transitions.create(['color', 'background-color'], { + duration: theme.transitions.duration.shortest, + }), + '&:hover': { + color: theme.palette.text.primary, + backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, + '&$active': { + color: theme.palette.primary.main, + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + }, }, + active: {}, })); +const ArrowRight = createSvgIcon(, 'ArrowRight'); + export default function AppDrawerNavItem(props) { const { children, @@ -65,42 +92,39 @@ export default function AppDrawerNavItem(props) { if (href) { return ( - - - + + ); } return ( - - + {children} - + ); } diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js index 6c515bbca9dd0c..414be77d14778b 100644 --- a/docs/src/modules/components/Link.js +++ b/docs/src/modules/components/Link.js @@ -55,6 +55,10 @@ function Link(props) { const isExternal = href.indexOf('https:') === 0 || href.indexOf('mailto:') === 0; if (isExternal) { + if (naked) { + return ; + } + return ; } diff --git a/docs/src/pages.js b/docs/src/pages.js index c2ae0f6e6d0897..7d255b0ec3aad0 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -275,7 +275,7 @@ const pages = [ { pathname: '/discover-more/languages' }, ], }, - { pathname: '/versions', disableNav: true }, + { pathname: '/versions', displayNav: false }, { pathname: '/', displayNav: false, disableDrawer: true }, { pathname: 'https://medium.com/material-ui', title: 'Blog' }, ]; From 28db42dceb18b16bc28a8b8f5c8b2cd599693250 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 28 Sep 2020 18:11:03 +0200 Subject: [PATCH 2/4] rotate icon when open --- docs/src/modules/components/AppDrawerNavItem.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 90ecdfaa81ab54..87c9fc20ad9136 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -38,10 +38,14 @@ const useStyles = makeStyles((theme) => ({ marginLeft: -6, color: theme.palette.text.secondary, }, + '& svg$open': { + transform: 'rotate(90deg)', + }, '&:hover svg': { color: theme.palette.text.primary, }, }, + open: {}, link: { ...theme.typography.body2, borderRadius: theme.shape.borderRadius, @@ -118,7 +122,7 @@ export default function AppDrawerNavItem(props) { onClick={handleClick} style={style} > - + {title} From 999af0c00fae376228d085671cbc625ef3d8ebdc Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 3 Oct 2020 22:17:07 +0200 Subject: [PATCH 3/4] Matt's review --- docs/src/modules/components/AppDrawerNavItem.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 87c9fc20ad9136..7501b47153ea4c 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { makeStyles, fade } from '@material-ui/core/styles'; import Collapse from '@material-ui/core/Collapse'; -import { createSvgIcon } from '@material-ui/core/utils'; +import ArrowRightIcon from '@material-ui/icons/ArrowRight'; import Link from 'docs/src/modules/components/Link'; const useStyles = makeStyles((theme) => ({ @@ -69,8 +69,6 @@ const useStyles = makeStyles((theme) => ({ active: {}, })); -const ArrowRight = createSvgIcon(, 'ArrowRight'); - export default function AppDrawerNavItem(props) { const { children, @@ -122,7 +120,7 @@ export default function AppDrawerNavItem(props) { onClick={handleClick} style={style} > - + {title} From 96ea69148915cc0e7b4f527697d9e358a191006e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 4 Oct 2020 14:03:38 +0200 Subject: [PATCH 4/4] matt's review --- docs/src/modules/components/AppDrawer.js | 2 +- .../modules/components/AppDrawerNavItem.js | 107 +++++++++++------- 2 files changed, 65 insertions(+), 44 deletions(-) diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index 91dcd2d7c3db47..f8097ee0e675da 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -22,7 +22,7 @@ function PersistScroll(props) { React.useEffect(() => { const parent = rootRef.current ? rootRef.current.parentElement : null; - const activeElement = document.querySelector('.drawer-active'); + const activeElement = document.querySelector('.app-drawer-active'); if (!parent || !activeElement || !activeElement.scrollIntoView) { return undefined; diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 7501b47153ea4c..d5e749386c9001 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -3,39 +3,47 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { makeStyles, fade } 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', - paddingTop: 0, - paddingBottom: 0, }, - liLeaf: { - display: 'flex', - padding: '0 12px', + liRoot: { + padding: '0 8px', }, - button: { + item: { ...theme.typography.body2, - cursor: 'pointer', - padding: '8px 0 6px', display: 'flex', - color: theme.palette.text.primary, - fontWeight: theme.typography.fontWeightMedium, - WebkitTapHighlightColor: 'transparent', - backgroundColor: 'transparent', // Reset default value + borderRadius: theme.shape.borderRadius, outline: 0, - border: 0, - margin: 0, // Remove the margin in Safari - borderRadius: 0, - textAlign: 'left', - '-moz-appearance': 'none', // Reset - '-webkit-appearance': 'none', // Reset width: '100%', + padding: '8px 0', + justifyContent: 'flex-start', + fontWeight: theme.typography.fontWeightMedium, + transition: theme.transitions.create(['color', 'background-color'], { + duration: theme.transitions.duration.shortest, + }), + '&:hover': { + color: theme.palette.text.primary, + backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, + '&.Mui-focusVisible': { + backgroundColor: theme.palette.action.focus, + }, + [theme.breakpoints.up('md')]: { + padding: '6px 0', + }, + }, + button: { + color: theme.palette.text.primary, + fontWeight: theme.typography.fontWeightMedium, '& svg': { fontSize: 18, - marginLeft: -6, + marginLeft: -19, color: theme.palette.text.secondary, }, '& svg$open': { @@ -47,23 +55,26 @@ const useStyles = makeStyles((theme) => ({ }, open: {}, link: { - ...theme.typography.body2, - borderRadius: theme.shape.borderRadius, - width: '100%', - padding: '6px 0', - textDecoration: 'none', color: theme.palette.text.secondary, - fontWeight: theme.typography.fontWeightMedium, - transition: theme.transitions.create(['color', 'background-color'], { - duration: theme.transitions.duration.shortest, - }), - '&:hover': { - color: theme.palette.text.primary, - backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), - }, - '&$active': { + '&.app-drawer-active': { color: theme.palette.primary.main, backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + '&:hover': { + backgroundColor: fade( + theme.palette.primary.main, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + }, + }, + '&.Mui-focusVisible': { + backgroundColor: fade( + theme.palette.primary.main, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), + }, }, }, active: {}, @@ -89,17 +100,22 @@ export default function AppDrawerNavItem(props) { }; const style = { - paddingLeft: 8 * (3 + 2 * depth), + paddingLeft: 8 * (3 + 1.5 * depth), }; if (href) { return ( -
  • +
  • - + {children}