From 6c11fe11a62c1d771f1ce93865bd1fd38d303423 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 14 Aug 2023 13:33:58 -0300 Subject: [PATCH] [docs-infra] Improve affordance on the code block expansion (#38421) Co-authored-by: Olivier Tassinari --- docs/src/modules/components/DemoToolbar.js | 81 ++++++++++------------ docs/translations/translations.json | 8 +-- 2 files changed, 39 insertions(+), 50 deletions(-) diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js index 2fab90d1fd0713..df9b9b00ad3032 100644 --- a/docs/src/modules/components/DemoToolbar.js +++ b/docs/src/modules/components/DemoToolbar.js @@ -4,16 +4,14 @@ import copy from 'clipboard-copy'; import { useTheme, styled, alpha } from '@mui/material/styles'; import IconButton from '@mui/material/IconButton'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import CheckIcon from '@mui/icons-material/Check'; import useMediaQuery from '@mui/material/useMediaQuery'; +import CheckIcon from '@mui/icons-material/Check'; import Fade from '@mui/material/Fade'; import MDButton from '@mui/material/Button'; import Box from '@mui/material/Box'; import MDToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton'; import MDToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; -import CodeRoundedIcon from '@mui/icons-material/CodeRounded'; import SvgIcon from '@mui/material/SvgIcon'; -import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'; import Snackbar from '@mui/material/Snackbar'; import Menu from '@mui/material/Menu'; import MDMenuItem, { menuItemClasses } from '@mui/material/MenuItem'; @@ -22,6 +20,7 @@ import Tooltip from '@mui/material/Tooltip'; import Divider from '@mui/material/Divider'; import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded'; import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak'; +import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'; import { useRouter } from 'next/router'; import { getCookie } from 'docs/src/modules/utils/helpers'; import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants'; @@ -109,36 +108,29 @@ const Button = styled(MDButton)(({ theme }) => ({ flexShrink: 0, borderRadius: 999, border: 'none', - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(0.5), fontSize: theme.typography.pxToRem(13), fontWeight: theme.typography.fontWeightMedium, - color: theme.palette.primary.main, - '& svg': { - fill: theme.palette.primary.main, - }, - [`:hover`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` - : alpha( - theme.palette.primary.main, - theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, - ), + color: theme.palette.text.secondary, + '&:hover': { + backgroundColor: theme.palette.grey[50], + // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` - : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), + backgroundColor: 'transparent', }, }, ...theme.applyDarkStyles({ - color: theme.palette.primaryDark[200], - '& svg': { - fill: theme.palette.primaryDark[200], + '&:hover': { + backgroundColor: theme.palette.primaryDark[700], + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }), })); const MenuItem = styled(MDMenuItem)(({ theme }) => ({ + padding: theme.spacing(1), [`& .${menuItemClasses.selected}`]: { backgroundColor: theme.palette.primary[50], }, @@ -148,8 +140,8 @@ const ToggleButton = styled(MDToggleButton)(({ theme }) => [ theme.unstable_sx({ padding: theme.spacing(0, 1, 0.1, 1), fontSize: theme.typography.pxToRem(13), - borderRadius: 99, borderColor: 'grey.200', + borderRadius: '999px', '&.Mui-disabled': { opacity: 0.5, }, @@ -388,7 +380,6 @@ export default function DemoToolbar(props) { }; const showSourceHint = demoHovered && !sourceHintSeen; - let showCodeLabel; if (codeOpen) { showCodeLabel = showPreview ? t('hideFullSource') : t('hideSource'); @@ -521,6 +512,7 @@ export default function DemoToolbar(props) { aria-expanded={stylingMenuOpen ? 'true' : undefined} onClick={handleStylingButtonClick} {...getControlProps(0)} + sx={{ pr: 0.5 }} > {codeStylingLabels[styleSolution]} @@ -544,8 +536,9 @@ export default function DemoToolbar(props) { data-ga-event-action="source-js" data-ga-event-label={demo.gaLabel} {...getControlProps(1)} + // eslint-disable-next-line material-ui/no-hardcoded-labels > - {t('JS')} + JS - {t('TS')} + TS - - - - - + {showCodeLabel} + {demoOptions.hideEditButton ? null : ( @@ -681,7 +667,7 @@ export default function DemoToolbar(props) { > {codeStylingLabels[CODE_STYLING.SYSTEM]} {styleSolution === CODE_STYLING.SYSTEM && ( - + )} {codeStylingLabels[CODE_STYLING.TAILWIND]} {styleSolution === CODE_STYLING.TAILWIND && ( - + )} handleStylingSolutionChange(CODE_STYLING.CSS)} > {codeStylingLabels[CODE_STYLING.CSS]} - {styleSolution === CODE_STYLING.CSS && } + {styleSolution === CODE_STYLING.CSS && ( + + )} + /* eslint-enable material-ui/no-hardcoded-labels */ ); } diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 2d5ad7411d01d3..7270fcd53ddd0f 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -112,8 +112,8 @@ "getStarted": "Get Started", "githubLabel": "Feedback", "headTitle": "MUI: A popular React UI framework", - "hideFullSource": "Hide the full source", - "hideSource": "Hide the source", + "hideFullSource": "Collapse code", + "hideSource": "Hide code", "homeQuickWord": "A quick word from our sponsors:", "increaseSpacing": "increase spacing", "initialFocusLabel": "A generic container that is programmatically focused to test keyboard navigation of our components.", @@ -154,9 +154,9 @@ "system": "System", "language": "Language" }, - "showFullSource": "Show the full source", + "showFullSource": "Expand code", "showJSSource": "Show JavaScript source", - "showSource": "Show the source", + "showSource": "Show code", "showTSSource": "Show TypeScript source", "signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.", "signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",