Skip to content

Commit

Permalink
[docs-infra] Improve affordance on the code block expansion (#38421)
Browse files Browse the repository at this point in the history 
Co-authored-by: Olivier Tassinari <[email protected]>
  • Loading branch information
@danilo-leal @oliviertassinari
danilo-leal and oliviertassinari authored Aug 14, 2023
1 parent 7b087d2 commit 6c11fe1
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 50 deletions.
81 changes: 35 additions & 46 deletions docs/src/modules/components/DemoToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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],
},
Expand All @@ -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,
},
Expand Down Expand Up @@ -388,7 +380,6 @@ export default function DemoToolbar(props) {
};

const showSourceHint = demoHovered && !sourceHintSeen;

let showCodeLabel;
if (codeOpen) {
showCodeLabel = showPreview ? t('hideFullSource') : t('hideSource');
Expand Down Expand Up @@ -521,6 +512,7 @@ export default function DemoToolbar(props) {
aria-expanded={stylingMenuOpen ? 'true' : undefined}
onClick={handleStylingButtonClick}
{...getControlProps(0)}
sx={{ pr: 0.5 }}
>
{codeStylingLabels[styleSolution]}
<ExpandMoreIcon />
Expand All @@ -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
</ToggleButton>
<ToggleButton
value={CODE_VARIANTS.TS}
Expand All @@ -555,32 +548,25 @@ export default function DemoToolbar(props) {
data-ga-event-action="source-ts"
data-ga-event-label={demo.gaLabel}
{...getControlProps(2)}
// eslint-disable-next-line material-ui/no-hardcoded-labels
>
{t('TS')}
TS
</ToggleButton>
</ToggleButtonGroup>
</Box>
</Fade>
<Box sx={{ ml: 'auto' }}>
<ToggleCodeTooltip
<Button
aria-controls={openDemoSource ? demoSourceId : null}
data-ga-event-category="demo"
data-ga-event-label={demo.gaLabel}
data-ga-event-action="expand"
onClick={handleCodeOpenClick}
showSourceHint={showSourceHint}
PopperProps={{ disablePortal: true }}
title={showCodeLabel}
placement="bottom"
{...getControlProps(3)}
>
<IconButton
aria-controls={openDemoSource ? demoSourceId : null}
data-ga-event-category="demo"
data-ga-event-label={demo.gaLabel}
data-ga-event-action="expand"
onClick={handleCodeOpenClick}
color="default"
{...getControlProps(3)}
sx={{ borderRadius: 1 }}
>
<CodeRoundedIcon />
</IconButton>
</ToggleCodeTooltip>
{showCodeLabel}
</Button>
{demoOptions.hideEditButton ? null : (
<React.Fragment>
<DemoTooltip title={t('codesandbox')} placement="bottom">
Expand Down Expand Up @@ -681,7 +667,7 @@ export default function DemoToolbar(props) {
>
{codeStylingLabels[CODE_STYLING.SYSTEM]}
{styleSolution === CODE_STYLING.SYSTEM && (
<CheckIcon sx={{ fontSize: '0.85rem', ml: 2 }} />
<CheckIcon sx={{ fontSize: '0.85rem', ml: 'auto' }} />
)}
</MenuItem>
<MenuItem
Expand All @@ -694,7 +680,7 @@ export default function DemoToolbar(props) {
>
{codeStylingLabels[CODE_STYLING.TAILWIND]}
{styleSolution === CODE_STYLING.TAILWIND && (
<CheckIcon sx={{ fontSize: '0.85rem', ml: 2 }} />
<CheckIcon sx={{ fontSize: '0.85rem', ml: 'auto' }} />
)}
</MenuItem>
<MenuItem
Expand All @@ -706,7 +692,9 @@ export default function DemoToolbar(props) {
onClick={() => handleStylingSolutionChange(CODE_STYLING.CSS)}
>
{codeStylingLabels[CODE_STYLING.CSS]}
{styleSolution === CODE_STYLING.CSS && <CheckIcon sx={{ fontSize: '0.85rem', ml: 2 }} />}
{styleSolution === CODE_STYLING.CSS && (
<CheckIcon sx={{ fontSize: '0.85rem', ml: 'auto' }} />
)}
</MenuItem>
</Menu>
<Menu
Expand Down Expand Up @@ -760,6 +748,7 @@ export default function DemoToolbar(props) {
message={snackbarMessage}
/>
</React.Fragment>
/* eslint-enable material-ui/no-hardcoded-labels */
);
}

Expand Down
8 changes: 4 additions & 4 deletions docs/translations/translations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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.",
Expand Down

0 comments on commit 6c11fe1

Please sign in to comment.