[docs-infra] Use icons instead of words for the code copy button (#37664

) Co-authored-by: alexandre <[email protected]>
mui · Jul 5, 2023 · 8b8136f · 8b8136f
1 parent 4bd5a21
commit 8b8136f
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 39 deletions.
diff --git a/docs/src/modules/components/CodeCopyButton.tsx b/docs/src/modules/components/CodeCopyButton.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
 
 interface CodeCopyButtonProps {
   code: string;
@@ -24,7 +26,11 @@ export default function CodeCopyButton(props: CodeCopyButtonProps) {
       }}
     >
       {/* material-ui/no-hardcoded-labels */}
-      {isCopied ? 'Copied' : 'Copy'}&nbsp;
+      {isCopied ? (
+        <LibraryAddCheckRoundedIcon sx={{ fontSize: 18 }} />
+      ) : (
+        <ContentCopyRoundedIcon sx={{ fontSize: 18 }} />
+      )}
       <span className="MuiCode-copyKeypress">
         <span>(or</span> {key}C<span>)</span>
       </span>

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -381,33 +381,44 @@ const Root = styled('div')(
       position: 'relative',
       // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set
       fontSize: 10,
-      '&:hover': {
-        '& .MuiCode-copy': {
-          display: 'block',
-        },
-      },
     },
     '& .MuiCode-copy': {
-      minWidth: 64,
-      display: 'none',
-      backgroundColor: alpha(lightTheme.palette.primaryDark[600], 0.5),
+      display: 'inline-flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      width: 26,
+      height: 26,
       cursor: 'pointer',
       position: 'absolute',
       top: theme.spacing(1),
       right: theme.spacing(1),
+      padding: theme.spacing(0.5),
       fontFamily: 'inherit',
-      fontSize: lightTheme.typography.pxToRem(13),
       fontWeight: 500,
-      padding: theme.spacing(0.5, 1),
-      borderRadius: 4,
-      border: `1px solid`,
-      borderColor: lightTheme.palette.primaryDark[500],
-      color: lightTheme.palette.primaryDark[50],
+      borderRadius: 6,
+      border: 'none',
+      backgroundColor: 'transparent',
+      color: '#FFF',
+      opacity: 0.6,
+      transition: theme.transitions.create(['background', 'borderColor', 'display'], {
+        duration: theme.transitions.duration.shortest,
+      }),
+      '& svg': {
+        userSelect: 'none',
+        width: theme.typography.pxToRem(16),
+        height: theme.typography.pxToRem(16),
+        display: 'inline-block',
+        fill: 'currentcolor',
+        flexShrink: 0,
+        fontSize: '18px',
+        margin: 'auto',
+      },
+      '& .MuiCode-copied-icon': {
+        display: 'none',
+      },
       '&:hover, &:focus': {
         opacity: 1,
-        color: '#fff',
-        backgroundColor: alpha(lightTheme.palette.primaryDark[600], 0.7),
-        borderColor: lightTheme.palette.primaryDark[500],
+        backgroundColor: lightTheme.palette.primaryDark[500],
         '& .MuiCode-copyKeypress': {
           display: 'block',
           // Approximate no hover capabilities with no keyboard
@@ -419,12 +430,20 @@ const Root = styled('div')(
       },
       '& .MuiCode-copyKeypress': {
         display: 'none',
+        position: 'absolute',
+        right: 26,
       },
       '&[data-copied]': {
         // style of the button when it is in copied state.
         borderColor: lightTheme.palette.primary[700],
         color: '#fff',
         backgroundColor: lightTheme.palette.primaryDark[600],
+        '& .MuiCode-copy-icon': {
+          display: 'none',
+        },
+        '& .MuiCode-copied-icon': {
+          display: 'block',
+        },
       },
       '&:focus-visible': {
         outline: '2px solid',
@@ -435,16 +454,10 @@ const Root = styled('div')(
     '& .MuiCode-copyKeypress': {
       pointerEvents: 'none',
       userSelect: 'none',
-      position: 'absolute',
-      left: '50%',
-      top: '100%',
-      minWidth: '100%',
-      marginTop: theme.spacing(0.5),
+      marginRight: theme.spacing(1.2),
+      marginBottom: theme.spacing(0.2),
       whiteSpace: 'nowrap',
-      transform: 'translateX(-50%)',
-      '& > span': {
-        opacity: 0.72,
-      },
+      opacity: 0.6,
     },
     '& li': {
       // tight lists https://spec.commonmark.org/0.30/#tight

diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx
@@ -110,7 +110,7 @@ function InitCodeCopy() {
 
         const btn = elm.querySelector('.MuiCode-copy') as HTMLButtonElement | null;
         if (btn) {
-          const keyNode = btn.childNodes[1]?.childNodes[1];
+          const keyNode = btn.querySelector('.MuiCode-copyKeypress')?.childNodes[1];
           if (!keyNode) {
             // skip the logic if the btn is not generated from the markdown.
             return;

diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
@@ -340,7 +340,14 @@ function createRender(context) {
 
       return `<div class="MuiCode-root"><pre><code class="language-${escape(lang, true)}">${
         escaped ? code : escape(code, true)
-      }</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">Copy <span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n`;
+      }</code></pre>${[
+        '<button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy">',
+        '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">',
+        '<use class="MuiCode-copy-icon" xlink:href="#copy-icon" />',
+        '<use class="MuiCode-copied-icon" xlink:href="#copied-icon" />',
+        '</svg>',
+        '<span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>',
+      ].join('')}\n`;
     };
 
     const markedOptions = {
@@ -556,16 +563,36 @@ ${headers.hooks
       });
 
       // fragment link symbol
-      rendered.unshift(`<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-  <symbol id="anchor-link-icon" viewBox="0 0 16 16">
-    <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
-  </symbol>
-</svg>`);
-      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="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 14v-2.47l6.88-6.88c.2-.2.51-.2.71 0l1.77 1.77c.2.2.2.51 0 .71L8.47 14H6zm12 0h-7.5l2-2H18v2z" />
-</symbol>
-</svg>`);
+      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="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 14v-2.47l6.88-6.88c.2-.2.51-.2.71 0l1.77 1.77c.2.2.2.51 0 .71L8.47 14H6zm12 0h-7.5l2-2H18v2z" />
+      </symbol>
+      </svg>`,
+      );
+
+      rendered.unshift(
+        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+    <symbol id="anchor-link-icon" viewBox="0 0 16 16">
+      <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
+    </symbol>
+    </svg>`,
+      );
+
+      rendered.unshift(
+        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+      <symbol id="copy-icon" viewBox="0 0 24 24">
+      <path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />
+      +</symbol>
+      </svg>`,
+      );
+
+      rendered.unshift(`
+      <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+      <symbol id="copied-icon" viewBox="0 0 24 24">
+        <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />
+      </symbol>
+      </svg>`);
 
       docs[userLanguage] = {
         description,

diff --git a/packages/mui-material/src/styles/createTransitions.js b/packages/mui-material/src/styles/createTransitions.js
@@ -85,6 +85,15 @@ export default function createTransitions(inputTransitions) {
         console.error('MUI: Argument "delay" must be a number or a string.');
       }
 
+      if (typeof options !== 'object') {
+        console.error(
+          [
+            'MUI: Secong argument of transition.create must be an object.',
+            "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`",
+          ].join('\n'),
+        );
+      }
+
       if (Object.keys(other).length !== 0) {
         console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
       }