From 69e39c6ace4b11dfcec6341f416dbce7aa4f2002 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 8 Jan 2024 09:23:02 -0300 Subject: [PATCH] [docs-infra] Fix the copy button overlapping with the scrollbar (#40405) Co-authored-by: alexandre --- docs/src/modules/brandingTheme.ts | 3 ++ docs/src/modules/components/AppLayoutDocs.js | 2 +- .../modules/components/AppLayoutDocsFooter.js | 6 ++- .../src/modules/components/CodeCopyButton.tsx | 42 ++++++++++--------- docs/src/modules/components/DemoEditor.tsx | 6 +-- .../src/modules/components/HighlightedCode.js | 10 ++--- .../src/modules/components/MarkdownElement.js | 26 ++++++++---- packages/markdown/prepareMarkdown.js | 2 +- 8 files changed, 57 insertions(+), 40 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 899fa4e1523572..425888bde3c4f0 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1168,6 +1168,9 @@ export function getThemedComponents(): ThemeOptions { theme.applyDarkStyles({ color: theme.palette.grey[300], borderColor: theme.palette.primaryDark[700], + '&:hover': { + backgroundColor: alpha(theme.palette.primaryDark[600], 0.2), + }, '&.Mui-selected': { color: (theme.vars || theme).palette.primary[200], borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 5759dc8c769a94..ec5605a845a13c 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -34,7 +34,7 @@ const Main = styled('main', { }, }), '& .markdown-body .comment-link': { - display: 'inline-block', + display: 'flex', }, })); diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index 86e44ba3fc7000..7857133a8a4277 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -477,11 +477,15 @@ export default function AppLayoutDocsFooter(props) { icon={} sx={{ my: 1.5 }} > - + {t('feedbackMessageToGitHub.usecases')}{' '} {t('feedbackMessageToGitHub.callToAction.link')} {' '} diff --git a/docs/src/modules/components/CodeCopyButton.tsx b/docs/src/modules/components/CodeCopyButton.tsx index 98885ff1a6bf35..1a036057ee383a 100644 --- a/docs/src/modules/components/CodeCopyButton.tsx +++ b/docs/src/modules/components/CodeCopyButton.tsx @@ -15,25 +15,27 @@ export default function CodeCopyButton(props: CodeCopyButtonProps) { const key = macOS ? '⌘' : 'Ctrl + '; return ( - +
+ +
); } diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index fb658c44ac5460..09635d291597eb 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -115,6 +115,9 @@ export default function DemoEditor(props: DemoEditorProps) { >
+ + + @@ -162,9 +165,6 @@ export default function DemoEditor(props: DemoEditorProps) { __html: t('editorHint'), }} /> - - - {children}
diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js index b07c03b3b9ca8c..e613533f1a7283 100644 --- a/docs/src/modules/components/HighlightedCode.js +++ b/docs/src/modules/components/HighlightedCode.js @@ -23,6 +23,11 @@ const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) { return (
+ {copyButtonHidden ? null : ( + + + + )}
- {copyButtonHidden ? null : ( - - - - )}
); diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 3f6b857e0b45cf..fec99e40a86ea0 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -133,6 +133,7 @@ const Root = styled('div')( '& .anchor-link': { // To prevent the link to get the focus. display: 'inline-flex', + alignItems: 'center', visibility: 'hidden', }, '& a:not(.anchor-link):hover': { @@ -142,6 +143,7 @@ const Root = styled('div')( textDecoration: 'none', }, '& .anchor-link, & .comment-link': { + padding: 0, cursor: 'pointer', alignItems: 'center', justifyContent: 'center', @@ -151,18 +153,18 @@ const Root = styled('div')( height: 26, width: 26, backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`, border: '1px solid', borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, borderRadius: 8, - color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, '&:hover': { backgroundColor: alpha(lightTheme.palette.primary[100], 0.4), borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`, color: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`, }, '& svg': { - height: '14px', - width: '14px', + height: 14, + width: 14, fill: 'currentColor', pointerEvents: 'none', verticalAlign: 'middle', @@ -178,8 +180,8 @@ const Root = styled('div')( duration: theme.transitions.duration.shortest, }), '& svg': { - verticalAlign: 'middle', fill: 'currentColor', + marginRight: 1.5, }, }, }, @@ -450,6 +452,12 @@ const Root = styled('div')( // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set fontSize: 10, }, + '& .MuiCode-copy-container': { + // This container is only used in demo and highlight code + position: 'sticky', + zIndex: 1, + top: 0, + }, '& .MuiCode-copy': { display: 'inline-flex', flexDirection: 'row-reverse', @@ -458,7 +466,7 @@ const Root = styled('div')( height: 26, cursor: 'pointer', position: 'absolute', - top: theme.spacing(1.5), + top: 12, right: 12, padding: theme.spacing(0.5), fontFamily: 'inherit', @@ -479,16 +487,16 @@ const Root = styled('div')( flexShrink: 0, fontSize: '18px', margin: 'auto', - opacity: 0.6, + opacity: 0.5, }, '& .MuiCode-copied-icon': { display: 'none', }, '&:hover, &:focus': { + backgroundColor: lightTheme.palette.primaryDark[600], '& svg': { opacity: 1, }, - backgroundColor: lightTheme.palette.primaryDark[500], '& .MuiCode-copyKeypress': { display: 'block', // Approximate no hover capabilities with no keyboard @@ -576,9 +584,9 @@ const Root = styled('div')( }, '& h1, & h2, & h3, & h4': { '&:hover .anchor-link, & .comment-link': { - color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`, borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, - backgroundColor: alpha(darkTheme.palette.primary[900], 0.5), + backgroundColor: alpha(darkTheme.palette.primary[900], 0.3), '&:hover': { borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`, backgroundColor: alpha(darkTheme.palette.primary[900], 0.6), diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js index 8af10d4a47c5f8..296a6fdafe3cb4 100644 --- a/packages/markdown/prepareMarkdown.js +++ b/packages/markdown/prepareMarkdown.js @@ -169,7 +169,7 @@ ${headers.hooks rendered.unshift( ` - + `, );