New CopyValue Component

[plbabin]

Feature

This update brings the copy conversation id (from hs-app-ui) into a new HSDS component. This behavior will be reused throughout the application so we thought it was a good idea to create a component flexible enough to be customize when needed but also strict enough to keep the behavior the same across the app.

The component will receive a value prop. When the button is clicked, the value will be added to the clipboard. It it still possible for dev to extend the onClick action.

// when the user click on the icon, "123456789" will be added to the clipboard
<CopyValue value="123456789" />

Props

prop name
prefix	will add a muted prefix before the value
renderValue	custom render for the value
onReset	Callback when the indicator has fade out
value	the text that will be copied to the clipboard
resetTimeout	how long the indicator will be visible, default to 1000ms

--HSDSGlobalFontFamilySystem

We started to see a lot more application of a system font to some component. We decided to extract that to an HSDS css variable to make it easier to use across HSDS and hs-app.

export const ValueUI = styled(Text)`
  font-family: var(--HSDSGlobalFontFamilySystem);
  color: ${getColor('charcoal.400')};
`

the variable value is -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

[plbabin]

Only one tiny tiny change is that it'd be great to make this a perfect circle (looked slightly wider than intended from the GIF). Whatever height it is, could you match that for the width?

should be ok now!