Copy value/token to clipboard

[andrezero]

Why

As a designer or developer I want to copy a value or token name so that I can paste it in my tools

Context

We want to hold out on designing this one until we have more

• Tokenize Epic #35 - informs API and layout
• Typeface Epic #41 - informs layout
• Create DecisionPill component #11 - informs layout

Authoring use cases

Use in ShowDecision/ShowDecisionSet

• copy singe value
• copy token name
• copy any visible format
• copy any specific format (even if not displayed)

Usage in ShowDecisionCard

It should be possible to use in this component and "hoist" the display with an extra card option.

Options inlined with the values should still show, i.e.: show both

• icon with drop-down on top of card
• icon next to each value (or hover/replace)

Design

❓ Icon: always the same (copy) or different depending on whether it's specific value/token?

❓ Placement:

• before value,
• after value?
• replace value (implies hover and inline)
• on top of the viz?

❓ Display/Bhaviour

• display always vs on hover
• display tooltip
  • useful to visualize what you are about to copy, e.g.: copies "token name" but token is not visible
  • or useful to label the action "copy value" vs "copy token"
• show a dropdown
  • when it is set to copy value AND token or more than 1 format (not visible)
  • invalidates before/after/ placement
• click or double click value to copy

❓ Feedback:

• icon feedback (must)
• aria-live (must)
• popup (could)
• ❓ what happens when you copy via click/double-click? icon feedback doesn't make sense in this case (it might even not be visible)

API

Exposing all options in a single prop carrying both: flags and formats

<ShowDecision ... copy={['token', 'value', 'hover']} /> // multiple flags
<ShowDecision ... copy={['token', ['rgb', 'hsv']]} /> // flag and formats

Possible options

• inline
• hover
• before | after | viz
• replace
• click
• double-click
• token - copy the token instead
• value - copy the value as well (first displayed format only)
• ['*'] - copy all displayed formats
• ['rgb'] - copy this format, whether displayed or not
• ['hsl', 'oklch'] - copy all these, whether displayed or not

What

Add new "copy" component

• name TBD, depending on design and capabilities
• probably more than one component (especially if popup is used)

Add new prop(s) to Decision Components

🚧🚧

Document