Add the option to copy label/text to clipboard.

[mathieu-fournier]

Feature

It might be a ggod addition to have the possibility to copy text to the clipboard with a single mouse press.
Components would enable it by passing something like isCopyToClipboardEnabled = true.

Examples

In the Azure portal it's presented like this.
When hovering on the text, the files icon appear.
When hovering the files icon, the tooltip shows-up.

[mayank99]

Hey @mathieu-fournier, I do not think this necessarily belongs in iTwinUI, considering how easy it is to implement using Button, Tooltip and SvgCopy. I'm also not sure how the isCopyToClipboardEnabled prop would work. Where would it go? Could you elaborate, perhaps with some pseudocode?

[mathieu-fournier]

I dont have the pseudo code yet.
I am planning to add this feature to my app soon tho, I'll make an update when it's done.

I think it's a feature that we could add to every component in Typography, except maybe Keyboard Key.
I am thinking about a boolean props like "is skeleton".
I think that behing easy to implement is a pros more than a cons., as it should be an easy feature to add. IsSkeleton is also kinda easy to implement and its still a feature that benefits a lot of applications. A low hanging fruit.

Example of how the props would work, it would be a boolean control props like isSkeleton.
When activated, the copy icon would appear when hovering, when inactive, nothing would happen. :

[mayank99]

Typography components are a bit too level for this imo. Already not a fan of the isSkeleton prop because it feels unintuitive to use. The typography components are often used as inline elements (meaning display: inline) and can come in different sizes which may not scale 1:1 with an icon button sizes.

All that to say, a prop is not the right abstraction, and if we were to add this, it would likely be a new component.

I will leave this issue open, but in the meantime, here's a sandbox you can base your implementation on: codesandbox.io/s/copy-button-example-itwinui-pncqud (copy doesn't work in iframe, so preview in new window: https://pncqud.csb.app/)

[mathieu-fournier]

A prop would be awesome for usage simplicity, but I agree that it would definitely be more difficult to implement.
It would also have some limitations (like having control of the overflow behaviour).

I created a component that does the trick.
It needs some rework but it's good enough for my needs.
I made it that way, so the text overflows under the icon, when missing horizontal space.

https://codesandbox.io/s/copy-button-example-itwinui-forked-e96tz1?file=/src/CopyTextToClipboard.jsx
(copy doesn't work in iframe, so preview in new window: https://e96tz1.csb.app/)

[mayank99]

One thing I should point out is that for better accessibility, you should consider using visually-hidden styles for hiding the button, and unhiding when hovered or focused. You can read more here: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

I've updated my sandbox to show how that would work:
https://codesandbox.io/s/copy-button-example-itwinui-pncqud?file=/src/App.jsx