[docs] Add copy button to code block #32390
Conversation
There was a problem hiding this comment.
Woah, cool! This is a really handy functionality, I use it all the time for the terminal commands I have saved in my private Notion, awesome to see in the docs too!
I have only a couple of considerations for moving forward:
- Regarding command code blocks like the one you recorded as example, should we use this PR to separate all the ones that have more than one command in the same block? What I mean is: I wouldn't want to copy the npm and yarn command at the same time.
- Should we add on hover, alongside the "Copy" button, a "⌘C" as well? If you haven't told it on the PR description, I guess I'd have figured that out by accident only, and it's way handier than clicking!
I think fixing the doc should be a separate PR (I assume that there are more than one file)
I am not sure I get this. Do you mean when hovering, it will copy automatically? Can you explain the UX you have in mind? |
| @@ -1,30 +1,72 @@ | |||
| /* eslint-disable material-ui/no-hardcoded-labels */ | |||
There was a problem hiding this comment.
Why not translate 'Copied' and 'Copy'?
There was a problem hiding this comment.
Updated. But I am not sure how we can translate the markdown generated by marked.js.
There was a problem hiding this comment.
I think we should not translate this one. It is not consistent with the button generated by markedjs. We can revisit later when we have a better way.
| color: '#fff', | ||
| backgroundColor: blueDark[600], | ||
| }, | ||
| '&:focus-visible': { |
There was a problem hiding this comment.
If we want to be strict, then we would need to use ButtonBase or our hook
| '&:focus-visible': { | |
| '&.Mui-focusVisible': { |
https://caniuse.com/?search=focus-visible vs. https://mui.com/material-ui/getting-started/supported-platforms/
There was a problem hiding this comment.
In our case, it is tricky. There are 2 places:
- the button generated at file system read (markdown file)
- the button created by React
It is possible to use ButonBase for the second one but I don't think the first point is possible, that's why I decide to go with focus-visible to keep the consistency. For a safer choice, we could go with :focus.
|
@siriwatknp following up on my suggestion, this is what I tried to describe:
Just add a "Press ⌘C" alongside the "Copy" button to make sure folks know that by doing so, you can copy the snippet just as you would by clicking the button. Alternatively, we could simply do the below, which is definitely wordier but maybe clearer?!
|
|
I think "Click to copy or press ⌘C" is too long. We should keep it short, "Copy" is the best I guess. Once the users know that they can press "⌘C" to copy, the text will become annoying. I propose that we show the text only when mouse is hovering on the copy button like this: Screen.Recording.2565-04-26.at.09.56.22.mov
I have set up the analytics to track the keypress copy. We can revisit the UX again if my proposal does not work well. @danilo-leal What do you think? |
github-actions
bot
added
the
PR: out-of-date
|
I like that! It's indeed way better than what I had previously suggested. Let's go for it! |
github-actions
bot
removed
the
PR: out-of-date
|
Small detail but the button in https://master--material-ui.netlify.app/ doesn't look correctly.
|
Thanks, will create a hotfix. |
|
Turns out that @flaviendelangle already did it: #32638 |
Preview: https://deploy-preview-32390--material-ui.netlify.app/material-ui/getting-started/installation/
Add a copy button to the code block in docs and blog pages
Screen.Recording.2565-04-20.at.23.39.52.mov