feat: add copy button #698
Conversation
✅ Deploy Preview for new-eslint ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for zh-hans-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for ja-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for es-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for fr-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for de-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for pt-br-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for hi-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for de-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Hi @xbinaryx, thanks for the PR.
Right now copy button appears on hover, as also suggested in this comment we we can make the button and its background appear always?
Also it overrides the content behind it like in these examples
or
should we place it on border as we do with correct/incorrect logo something like this
Would like more opinions on this from team.
|
Hi @Tanujkanti4441, thanks for the review! I'm thinking about two designs: We could make the code block a flexbox row, like GitHub's code blocks.
Or, we could make the copy button a bit transparent, like with opacity: 0.75.
What do you think? |
As we can see in provided images in #698 (review) in both examples, copy button will overlap the code, but for me it's either copy button like GitHub's code block or one i suggested in #698 (review) let's have some opinions from @eslint/eslint-team. |
|
Hi @xbinaryx, for now can you make the copy button appear all the time with its background, like github code block?
we can later change it's position if overriding code will be an issue. |
|
@Tanujkanti4441 The copy button should always be visible now and not overlap the code. |
There was a problem hiding this comment.
Filenames should be in dash-case, so please rename to pre-wrapper.js
Prerequisites checklist
What is the purpose of this pull request?
While reading the ESLint CSS support post, I noticed the code blocks lacked a copy button. I had to select and copy the text manually.
What changes did you make? (Give an overview)
I added a copy button to code blocks.
Related Issues
Is there anything you'd like reviewers to focus on?