From 7b3a164e02aa3bb03b2b9af11dd1e989a6d71d4d Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 29 May 2024 12:59:57 -0300 Subject: [PATCH] [docs-infra] Update the Material logo + add copy functionality (#42435) Co-authored-by: alexandre --- docs/src/components/action/MuiLogoMenu.tsx | 117 ++++++++++++++++++ docs/src/icons/SvgMuiLogomark.tsx | 8 +- docs/src/layouts/AppHeader.tsx | 7 +- docs/src/modules/components/AppFrame.js | 15 +-- docs/src/modules/components/AppNavDrawer.js | 9 +- .../mui-docs/src/branding/brandingTheme.ts | 23 +++- 6 files changed, 149 insertions(+), 30 deletions(-) create mode 100644 docs/src/components/action/MuiLogoMenu.tsx diff --git a/docs/src/components/action/MuiLogoMenu.tsx b/docs/src/components/action/MuiLogoMenu.tsx new file mode 100644 index 00000000000000..8c1f0f2a02cace --- /dev/null +++ b/docs/src/components/action/MuiLogoMenu.tsx @@ -0,0 +1,117 @@ +import * as React from 'react'; +import copy from 'clipboard-copy'; +import { Link } from '@mui/docs/Link'; +import { Portal } from '@mui/base/Portal'; +import Box from '@mui/material/Box'; +import Snackbar from '@mui/material/Snackbar'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Slide from '@mui/material/Slide'; +import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark'; +import TextFieldsRoundedIcon from '@mui/icons-material/TextFieldsRounded'; +import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; + +const logoSvg = ``; + +const logoWordmarkSvg = ``; + +interface MuiLogoMenuProps { + marginLeft?: boolean; + smallerMargin?: boolean; +} + +export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuProps) { + const [contextMenu, setContextMenu] = React.useState<{ + mouseX: number; + mouseY: number; + } | null>(null); + + const handleContextMenu = (event: React.MouseEvent) => { + event.preventDefault(); + setContextMenu( + contextMenu === null + ? { + mouseX: event.clientX + 8, + mouseY: event.clientY - 8, + } + : null, + ); + }; + + const handleClose = () => { + setContextMenu(null); + }; + + const [copied, setCopied] = React.useState(false); + const handleCopy = (svgSnippet: string) => { + setCopied(true); + copy(svgSnippet).then(() => { + setTimeout(() => setCopied(false), 3500); + handleClose(); + }); + }; + + return ( + + svg': { m: '0 !important' }, // override the 2px margin-left coming from the Link component + mr: smallerMargin ? 1 : 1.5, + ml: marginLeft ? 1.5 : undefined, + cursor: 'default', + }} + > + + + ({ + '& .MuiMenuItem-root': { + '& * path, .MuiSvgIcon-root': { + fill: (theme.vars || theme).palette.text.tertiary, + color: (theme.vars || theme).palette.text.tertiary, + }, + '&:hover, &:focus-visible': { + '& * path, .MuiSvgIcon-root': { + fill: (theme.vars || theme).palette.text.primary, + color: (theme.vars || theme).palette.text.primary, + }, + }, + }, + })} + > + handleCopy(logoSvg)}> + + Copy logo as SVG + + handleCopy(logoWordmarkSvg)}> + + Copy wordmark as SVG + + + document.body}> + + + Logo SVG copied to clipboard! + + } + /> + + + ); +} diff --git a/docs/src/icons/SvgMuiLogomark.tsx b/docs/src/icons/SvgMuiLogomark.tsx index 11fedda4e46f42..4cca7a7aaae5eb 100644 --- a/docs/src/icons/SvgMuiLogomark.tsx +++ b/docs/src/icons/SvgMuiLogomark.tsx @@ -5,16 +5,16 @@ export default function SvgMuiLogomark(props: RootSvgProps) { return ( diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx index 1ccb47da5bab8d..058366525e0f5a 100644 --- a/docs/src/layouts/AppHeader.tsx +++ b/docs/src/layouts/AppHeader.tsx @@ -7,11 +7,10 @@ import Container from '@mui/material/Container'; import Tooltip from '@mui/material/Tooltip'; import IconButton from '@mui/material/IconButton'; import GitHubIcon from '@mui/icons-material/GitHub'; -import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark'; +import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu'; import HeaderNavBar from 'docs/src/components/header/HeaderNavBar'; import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown'; import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle'; -import { Link } from '@mui/docs/Link'; import { DeferredAppSearch } from 'docs/src/modules/components/AppFrame'; import { useTranslate } from '@mui/docs/i18n'; @@ -51,9 +50,7 @@ export default function AppHeader(props: AppHeaderProps) { }} /> - - - + diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index ce608cd7b8b339..e10728f8c6db54 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -14,7 +14,6 @@ import SettingsIcon from '@mui/icons-material/SettingsOutlined'; import GitHubIcon from '@mui/icons-material/GitHub'; import NProgressBar from '@mui/docs/NProgressBar'; import { debounce } from '@mui/material/utils'; -import NextLink from 'next/link'; import SvgHamburgerMenu from 'docs/src/icons/SvgHamburgerMenu'; import AppNavDrawer from 'docs/src/modules/components/AppNavDrawer'; import AppSettingsDrawer from 'docs/src/modules/components/AppSettingsDrawer'; @@ -23,7 +22,7 @@ import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks'; import SkipLink from 'docs/src/modules/components/SkipLink'; import PageContext from 'docs/src/modules/components/PageContext'; import { useTranslate } from '@mui/docs/i18n'; -import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark'; +import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu'; import AppFrameBanner from 'docs/src/components/banner/AppFrameBanner'; const nProgressStart = debounce(() => { @@ -194,15 +193,9 @@ export default function AppFrame(props) { > - - - - - + + + diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 1039501c0ed53e..736ece487b4405 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import NextLink from 'next/link'; import Button from '@mui/material/Button'; import Divider from '@mui/material/Divider'; import { styled, ThemeProvider } from '@mui/material/styles'; @@ -15,7 +14,7 @@ import Box from '@mui/material/Box'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded'; import DoneRounded from '@mui/icons-material/DoneRounded'; -import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark'; +import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu'; import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem'; import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import PageContext from 'docs/src/modules/components/PageContext'; @@ -389,11 +388,7 @@ export default function AppNavDrawer(props) { return ( - - - - - + ({ + '& .MuiSnackbarContent-root': { + backgroundColor: '#FFF', + color: (theme.vars || theme).palette.text.primary, + fontWeight: theme.typography.fontWeightMedium, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + boxShadow: `0 4px 16px ${alpha(theme.palette.grey[400], 0.2)}`, + ...theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[800], + boxShadow: '0 4px 16px hsl(0, 100%, 1%)', + }), + }, + }), + }, + }, MuiPaginationItem: { styleOverrides: { root: ({ theme }) => [