Icon confusion with `copyClipboard`

[nickofthyme]

For a while now every time I look at https://www.elastic.co I see the icon to copy the code snippets and think to myself why is that a paste, just to hover and see it's a copy 😓.

Digging deeper I found it here and see it comes from eui as the copyClipboard icon .

It seems like we are trying to differentiate the action of copying to clipboard vs a generic copy (as in more like a duplication).

There is a lot of precedent in iconography having the paste icon represented as a paper thing above a clipboard thing, as evidenced by my elaborate google search below 👇🏼 .

To me, the copyClipboard should be renamed to paste and all current usages that are not explicitly a paste-type action should be changed to use copy.

Any thoughts?

[mgadewoll]

I think I can follow your confusion as "copy to clipboard" and "paste" icons can be rather similar sometimes. 😅 That being said, EUI doesn't actually have a "paste" icon and the copyClipboard icon does still make sense as is too, imho. E.g. I'd think of this:

• copy = image of duplicated files
• copy-to-clipboard = a file on a clipboard
• paste = clipboard (not available in EUI)

But I'm wondering if design would see any need or possibility to improve the comprehension of those icons or use cases? Or what's the common sense from Design/UX side? Maybe in some cases it might even make more sense to use a text button instead of an icon to avoid confusion? @MichaelMarcialis

[MichaelMarcialis]

Good topic, @nickofthyme. I agree that the copyClipboard icon is confusing and can be misinterpreted as a paste action. As @mgadewoll already mentioned, I imagine the historical reason for its existence was to differentiate between copy-to-clipboard actions and duplicate actions. I think the first thing we need to ask ourselves is whether we need to differentiate between these two icons, or if the single copy icon a sufficient visual representation for both.

Speaking generally, I imagine copy alone would be fine to use for both actions, assuming there aren't situations in Kibana/Cloud/etc. where a copy-to-clipboard action is in close proximity to a duplicate action, showing the same icon but for different actions. Off the top of my head, I can't think of any such situations, but I suppose it could exist somewhere. CCing @elastic/product-designers to see if anyone is aware of such a scenario or has any objections to consolidating down to a single copy icon.

Assuming there are no objections, I propose we:

• Replace all existing instances of copyClipboard to copy.
• Deprecate/remove copyClipboard. I don't think we have any need for a paste action, so no need to rename and repurpose it in my mind.

Thoughts?

[nickofthyme]

@mgadewoll Thanks for that insight and I do see the value in differentiating the copy from a duplicate. IMHO I think it would be better if a duplicate icon would be a alteration of the copy icon and not the paste. Something like adding a + in the center of the copy icon, which is a pretty commonly used for compact icons.

The original issue https://github.com/elastic/Design/issues/641 that introduced this icon mentions wanting a distinction from the copy link for urls with no real justification as to why.

Even the example they use from GitHub's old UI, has now changed to a simple copy icon. 👇🏼

Old (~2017)	Newer (~2020)	Now

As for using a text button, I think that would be overly verbose and width compared to the copy icon with a title tooltip on hover.

@MichaelMarcialis I love ❤️ your proposal! 🫶

Examples of copy to clipboard

### [Elastic search labs](https://www.elastic.co/search-labs/blog/elasticsearch-learning-to-rank-introduction) ### [Figma](https://www.figma.com/plugin-docs/) à la [Docusaurus](https://docusaurus.io/docs/docusaurus-core) ### [Google documentation](https://firebase.google.com/docs/database/web/start) ### [Github documentation](https://docs.github.com/en/rest/emojis/emojis?apiVersion=2022-11-28#get-emojis)

[tkajtoch]

We're actively discussing this internally and will likely move with @MichaelMarcialis proposal.

[JasonStoltz]

All all 👋 . It looks like we have a path forward here but we've decided to not proactively prioritize this work. On it's own, we don't think there's a significant ROI here. However, we have been discussing a larger effort to rethink / clean up our icons in EUI as a whole, and we would consider doing this as part of that effort.

[cee-chen]

@MichaelMarcialis do you need this issue re-opened as part of your icons work, or do are you fine keeping it closed?

[cee-chen]

Please disregard the above, stalebot went rogue and closed this when it shouldn't have.

[MichaelMarcialis]

We'll be address this issue as part of our larger iconography refactor epic: https://github.com/elastic/platform-ux-team/issues/381. I'm good with closing this issue in favor of this epic if ya'll like.

[JasonStoltz]

Closing per Michael's recommendation