[docs-infra] Fix the copy button overlapping with the scrollbar (#40405)

Co-authored-by: alexandre <[email protected]>
mui · Jan 8, 2024 · 69e39c6 · 69e39c6
1 parent 33f24e1
commit 69e39c6
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 40 deletions.
diff --git 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
@@ -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
@@ -477,11 +477,15 @@ export default function AppLayoutDocsFooter(props) {
                     icon={<PanToolRoundedIcon fontSize="small" />}
                     sx={{ my: 1.5 }}
                   >
-                    <Typography id="feedback-description" color="text.secondary">
+                    <Typography id="feedback-description">
                       {t('feedbackMessageToGitHub.usecases')}{' '}
                       <Link
                         href={`${process.env.SOURCE_CODE_REPO}/issues/new?template=${process.env.GITHUB_TEMPLATE_DOCS_FEEDBACK}&page-url=${window.location.href}`}
                         target="_blank"
+                        underline="always"
+                        sx={{
+                          fontWeight: 'semiBold',
+                        }}
                       >
                         {t('feedbackMessageToGitHub.callToAction.link')}
                       </Link>{' '}

diff --git 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 (
-    <button
-      {...other}
-      aria-label="Copy the code"
-      type="button"
-      className="MuiCode-copy"
-      onClick={async () => {
-        // event.stopPropagation();
-        await copy(code);
-      }}
-    >
-      {/* material-ui/no-hardcoded-labels */}
-      {isCopied ? (
-        <LibraryAddCheckRoundedIcon sx={{ fontSize: 18 }} />
-      ) : (
-        <ContentCopyRoundedIcon sx={{ fontSize: 18 }} />
-      )}
-      <span className="MuiCode-copyKeypress">
-        <span>(or</span> {key}C<span>)</span>
-      </span>
-    </button>
+    <div className="MuiCode-copy-container">
+      <button
+        {...other}
+        aria-label="Copy the code"
+        type="button"
+        className="MuiCode-copy"
+        onClick={async () => {
+          // event.stopPropagation();
+          await copy(code);
+        }}
+      >
+        {/* material-ui/no-hardcoded-labels */}
+        {isCopied ? (
+          <LibraryAddCheckRoundedIcon sx={{ fontSize: 18 }} />
+        ) : (
+          <ContentCopyRoundedIcon sx={{ fontSize: 18 }} />
+        )}
+        <span className="MuiCode-copyKeypress">
+          <span>(or</span> {key}C<span>)</span>
+        </span>
+      </button>
+    </div>
   );
 }
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
@@ -115,6 +115,9 @@ export default function DemoEditor(props: DemoEditorProps) {
     >
       <div className="MuiCode-root" {...handlers}>
         <div className="scrollContainer">
+          <NoSsr>
+            <CodeCopyButton {...copyButtonProps} code={value} />
+          </NoSsr>
           <StyledSimpleCodeEditor
             padding={contextTheme.spacing(2)}
             highlight={(code: any) =>
@@ -162,9 +165,6 @@ export default function DemoEditor(props: DemoEditorProps) {
             __html: t('editorHint'),
           }}
         />
-        <NoSsr>
-          <CodeCopyButton {...copyButtonProps} code={value} />
-        </NoSsr>
         {children}
       </div>
     </StyledMarkdownElement>

diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js
@@ -23,18 +23,18 @@ const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) {
   return (
     <Component ref={ref} {...other}>
       <div className="MuiCode-root" {...handlers}>
+        {copyButtonHidden ? null : (
+          <NoSsr>
+            <CodeCopyButton code={code} {...copyButtonProps} />
+          </NoSsr>
+        )}
         <pre>
           <code
             className={`language-${language}`}
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: renderedCode }}
           />
         </pre>
-        {copyButtonHidden ? null : (
-          <NoSsr>
-            <CodeCopyButton code={code} {...copyButtonProps} />
-          </NoSsr>
-        )}
       </div>
     </Component>
   );

diff --git 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
@@ -169,7 +169,7 @@ ${headers.hooks
       rendered.unshift(
         `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
       <symbol id="comment-link-icon" viewBox="0 0 24 24">
-      <path d="M5.025 14H6.95c.183 0 .35-.029.5-.087a1.24 1.24 0 0 0 .425-.288L13.65 7.9a.622.622 0 0 0 .2-.45.622.622 0 0 0-.2-.45l-2.3-2.3a.622.622 0 0 0-.45-.2.622.622 0 0 0-.45.2l-5.725 5.775a1.24 1.24 0 0 0-.287.425 1.37 1.37 0 0 0-.088.5v1.925c0 .184.067.342.2.475a.65.65 0 0 0 .475.2Zm5.325 0h5.725c.367 0 .68-.129.938-.387.258-.258.387-.57.387-.938 0-.366-.13-.679-.387-.937a1.277 1.277 0 0 0-.938-.388H13L10.35 14Zm-5.5 4.4-2.4 2.4c-.417.417-.896.509-1.437.275C.47 20.842.2 20.434.2 19.85V3.55c0-.733.258-1.358.775-1.875A2.554 2.554 0 0 1 2.85.9h16.3c.733 0 1.358.259 1.875.775.517.517.775 1.142.775 1.875v12.2c0 .734-.258 1.359-.775 1.875a2.554 2.554 0 0 1-1.875.775H4.85Z"/>
+      <path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />
       </symbol>
       </svg>`,
       );
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ const Main = styled('main', { @@
             },
           }),
       '& .markdown-body .comment-link': {
-        display: 'inline-block',
+        display: 'flex',
       },
     }));
@@ Expand Down @@