refine the inside-the-block copy button

danilo-leal · May 7, 2024 · 249f75d · 249f75d
1 parent 527c9cd
commit 249f75d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 44 deletions.
diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
@@ -423,10 +423,8 @@ function createRender(context) {
         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">',
-        '<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-copy-label">Copy</span>',
+        '<span class="MuiCode-copied-label">Copied</span>',
         '<span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>',
       ].join('')}\n`;
     };

diff --git a/packages/mui-docs/src/CodeCopy/CodeCopyButton.tsx b/packages/mui-docs/src/CodeCopy/CodeCopyButton.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
 import useClipboardCopy from './useClipboardCopy';
 
 export interface CodeCopyButtonProps {
@@ -27,12 +25,8 @@ export function CodeCopyButton(props: CodeCopyButtonProps) {
         }}
       >
         {/* material-ui/no-hardcoded-labels */}
-        {isCopied ? (
-          <LibraryAddCheckRoundedIcon sx={{ fontSize: 18 }} />
-        ) : (
-          <ContentCopyRoundedIcon sx={{ fontSize: 18 }} />
-        )}
-        <span className="MuiCode-copyKeypress">
+        {isCopied ? 'Copied' : 'Copy'}
+        <span className="MuiCode-copyKeypress" style={{ opacity: isCopied ? 0 : 1 }}>
           <span>(or</span> {key}C<span>)</span>
         </span>
       </button>

diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -532,44 +532,34 @@ const Root = styled('div')(
       top: 0,
     },
     '& .MuiCode-copy': {
-      display: 'inline-flex',
-      flexDirection: 'row-reverse',
-      alignItems: 'center',
-      width: 26,
-      height: 26,
       cursor: 'pointer',
       position: 'absolute',
       top: 12,
       right: 12,
+      display: 'inline-flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      height: 24,
       padding: theme.spacing(0.5),
-      fontFamily: 'inherit',
-      fontWeight: 500,
+      paddingBottom: '5px', // optical alignment
+      fontFamily: lightTheme.typography.fontFamily,
+      fontWeight: lightTheme.typography.fontWeightMedium,
+      fontSize: lightTheme.typography.pxToRem(12),
       borderRadius: 6,
-      border: 'none',
-      backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
-      color: '#FFF',
+      border: '1px solid',
+      borderColor: alpha(lightTheme.palette.primaryDark[600], 0.5),
+      backgroundColor: alpha(lightTheme.palette.primaryDark[800], 0.5),
+      color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
       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',
-        opacity: 0.5,
-      },
-      '& .MuiCode-copied-icon': {
+      '& .MuiCode-copied-label': {
         display: 'none',
       },
       '&:hover, &:focus': {
-        backgroundColor: lightTheme.palette.primaryDark[600],
-        '& svg': {
-          opacity: 1,
-        },
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+        color: '#FFF',
         '& .MuiCode-copyKeypress': {
           display: 'block',
           // Approximate no hover capabilities with no keyboard
@@ -582,17 +572,19 @@ const Root = styled('div')(
       '& .MuiCode-copyKeypress': {
         display: 'none',
         position: 'absolute',
-        right: 26,
+        right: 34,
       },
       '&[data-copied]': {
-        // style of the button when it is in copied state.
-        borderColor: lightTheme.palette.primary[700],
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
         color: '#fff',
-        backgroundColor: lightTheme.palette.primaryDark[600],
-        '& .MuiCode-copy-icon': {
+        '& .MuiCode-copyKeypress': {
+          opacity: 0,
+        },
+        '& .MuiCode-copy-label': {
           display: 'none',
         },
-        '& .MuiCode-copied-icon': {
+        '& .MuiCode-copied-label': {
           display: 'block',
         },
       },