"Copy Text" component

[vankhoawin]

Hello team, there's a component in the roadmap that is described as "a pattern for copying text to clipboard." Our team has been using a component built in antd to implement this pattern, but now that we've been moving more things to Paste it might be a good time to get any feedback on it, or features we've overlooked. For a11y, i used opacity and :hover to hide it from sighted users and added :focus pseudo-selectors to handle keyboard users (hoping that covers all those cases):

https://codesandbox.io/s/copybox-implementation-0v74c?file=/sandbox.config.json

I'm having some kind of codesandbox permission error when copying using the Clipboard API, but you can at least kind of get a sense of how it would work by seeing the error toast 😅

[richbachman]

Hey @vnguyen94. This is great. Thanks for putting this together and sharing. It's really amazing to see what you've come up with Paste. Some initial feedback:

• It'd be nice to add a little transition to the opacity change.
• I also wonder if we could use a isHovered hook to get away from using class names.

Overall I think this is a great start. I'm sharing with the rest of the team to gather more feedback.

[richbachman]

I chatted with the team a bit, and have a couple more suggestions:

1. We'd want this to be a standalone button instead of something that wraps components. That way there are no restrictions on where it could be used, i.e. it'd be tough to use in its current state inside the Input prefix or suffix.
2. We feel that it should always be visible.
3. It definitely needs to be tested in a lot various places within console.

I took a pass on a revised version that uses use-clipboard-copy https://github.com/wsmd/use-clipboard-copy, which we use on the docs site. It's not perfect by any means, but just wanted to give you a visual on it being a standalone button component. https://codesandbox.io/s/copybox-implementation-rb-w9imn?file=/src/ClickToCopy.tsx

The copy part isn't quite working, but I wonder if that has to do with CodeSandbox.

Let me know what you think of that concept, and if you're on board we can keep iterating on it. Maybe you'd be up to contributing it to Paste.

[vankhoawin]

1. I think this is a fair suggestion, it would open up its usage to more situations 👍
2. In our current use of CopyBox, we have tables with rows of SID links; it feels like it would make the UI much busier if we were always to show the Copy Icon (not to mention the Copy text). I'm certain it's related to a11y, but can you write down the context on why it should always be visible?
3. Yeah i'm definitely open to contributing the component to Paste, after we get larger sample size on use-cases. Since DSYS has a more encompassing bird's-eye view, I can keep adding to this sandbox with any other use-cases that the team can think of, and then at that point I think we'll have a good starting point for an alpha component. How's that sound?

[richbachman]

In our current use of CopyBox, we have tables with rows of SID links; it feels like it would make the UI much busier if we were always to show the Copy Icon (not to mention the Copy text). I'm certain it's related to a11y, but can you write down the context on why it should always be visible?

Totally understand about that use-case making the UI very busy. If in that situation the icon is only visible on hover, we also need to make sure that it is visible on focus as well. That way all users have a way to see the button either visually or via a screen reader. As you explore use-cases, those will help everyone decide on the best path forward.

Yeah i'm definitely open to contributing the component to Paste, after we get larger sample size on use-cases. Since DSYS has a more encompassing bird's-eye view, I can keep adding to this sandbox with any other use-cases that the team can think of, and then at that point I think we'll have a good starting point for an alpha component. How's that sound?

This sounds great. Feel free to share the CodeSandbox in the dsys committee slack channel as well for some async feedback. Or if you want to present it at a committee meeting, we'd be open to that. Let us know.

[vankhoawin]

Cool, shared it in the Slack channel. Will update back here once we get more eyes on it.

[TheSisb]

Courtesy of @vnguyen94, we now have a library for copying to clipboard in Paste. We still need to create some docs, but you can view the stories on our hosted Storybook instance.