Replace mailto links under Team Status to be copy link

[ClaireValdivia]

Why is this issue important?

behavior for clicking mailto links is confusing and very dependent on user's mail settings

Current State

On new grant details page, under Team Status, a user's email appears as a mailto: link under the status they applied

Expected State

Acceptance Criteria:

• In the team status section of the grant details page, when a user updates a status, their email will show beneath the assignment
• mail icon will be removed from in from of the email address
• clicking the email link will copy the email
• Toast will display to show "Copied" to the right of the email for 2500ms
• a clickable prototype of the toast is here
• specifics on the toast design component, including colors, size, timing, etc are here

Implementation Plan

• Define a custom Vue component under packages/client/src/components that implements the following:
  • Renders a click-to-copy icon and optional clickable content.
  • Use the Bootstrap "files" icon as the copy icon, which immediately follows the additional clickable content (if any). In other words, at minimum, this component's default state should be a single icon, but it should be configuration so that the icon follows (i.e. is placed to the right of) optionally-configured content.
  • When the component's rendered content is clicked, it should:
    1. Write the configured value to the clipboard (see navigator.clipboard.writeText())
    2. Display a confirmation tooltip (described below)
  • The confirmation tooltip content should consist of the Bootstrap "check-circle" icon, followed by the text "Copied".
  • The confirmation tooltip should have a display duration (timeout) of 2500ms.
  • Accepts the following inputs
  • A required property for defining the value to write (copy) to the clipboard.
  • An optional slot for additional content that when clicked, executes the copy action. This content should directly precede the copy icon (on the same line) when the component is rendered.
• Update the Grant Details view so that the Team Status section makes use of the new custom component.
  • The clickable content should consist of each displayed email address paired with a "files" click-to-copy icon.
  • When clicked, the email address should be written to the clipboard.
  • Clicking the email address should no longer activate the browser's mailto: handler.

Relevant Code Snippets

Rough draft provided by @jeffsmohan

[caitlinwinner]

https://www.figma.com/proto/0TAG7bAtKIyRBxtCcknrxz/Users-%26-Teams?type=design&node-id=402-15506&t=UGeOmqqiCgNXVkrt-0&scaling=contain&page-id=308%3A10487&starting-point-node-id=402%3A15481

See Sam's prototype for copy / toast behavior.

[samserif23]

Please Note

The prototype has an alternative toast version, as seen with the last user on the page, "David Saris." This toast is in line with that table row and appears directly next to the email link the user has clicked. I find this more evident in this context than our 'full page' toast seen with the other users, and I welcome discussion on which version to take.

[ClaireValdivia]

Thanks Sam! a few follow up questions for @samserif23 and @caitlinwinner

• I think the alternative toast version (applied to David Saris) looks really nice... wondering where this would display on the grant details page if the email is really long - would it cause the text to wrap? screenshot below for reference of what the status section looks like
• similarly, if we were to apply the toast version applied to Gretchen Mango in the design, where would the toast display on the grant details page? would it be at the bottom right of the Status section?
• Also in terms of technical requirements, is there a name of each design component you can provide? And is it correct that the design component includes info about how long the toast displays, colors, fonts, icons, etc that display on the toast?

[samserif23]

Hi Claire, Initial responses are below. Will talk through these with Caitlin and edit as necessary:

• For all of these inline toasts, I imagine they cover up the tail end of the information (e.g., emails) instead of wrapping anything and re-structuring page elements. Toasts would be visible for 3-5 seconds, which wouldn't hinder any information for that long.

• For the primary toast, I would display it in the exact location, no matter the page. If we decide on the bottom right, it would be anchored from the bottom of the viewport + right margin

• I am uploading a design prototype for the grants detail page. Both show an inline-toast since we copy emails (a low-impact action).

• Naming conventions:

  • Component: Toast
  • Style: Default, Inline
  • Status: Positive, Negative, Neutral

[samserif23]

@ClaireValdivia Link to Figma > USDR Design System > Toast Component

[ClaireValdivia]

@TylerHendrickson acceptance criteria and designs have been added, passing to you for implementation details! let me know of any questions

[TylerHendrickson]

@samserif23 What do you think about changing the icon to the left of the email address to the Bootstrap files icon instead of removing the icon altogether?

I see two benefits in moving to the files icon:

• This icon is something of a standard symbol for "copy" functionality, and in particular is consistent with the "Copy Link" button displayed elsewhere on the same page.
• As a user, I think the presence of the icon would help me better understand what will happen when I click on the email address. Without an icon, I assume it's still a mailto: link.

Here's an example of what this would look like according to our styling:

[samserif23]

@TylerHendrickson @caitlinwinner Ty, our initial decision to remove the icon was to avoid having something redundant on each line, for instance, if we had multiple email addresses in that section.

I agree with your two benefits in helping users understand this is a copy action. What do you think about the icon appearing only on hover and to the right of the email value so as not to shift the text?

[TylerHendrickson]

To my eyes, it looks like there are enough lines of text and blank space separating the email addresses that the copy icon doesn't feel like significant visual clutter when there are multiple email addresses.

Regarding the right-hover icon, I think the caveat is that the copy action only becomes apparent when the a user is already interacting with the text in some way, so it doesn't really "advertise" the functionality. That said, I'm happy to defer to you on what makes the most sense here.

---

On a slightly different topic, I'm not able to find a Bootstrap toast behavior that fully conforms to the Figma designs – what would you think about using a tooltip instead?

[TylerHendrickson]

@samserif23 To offer another example, @jeffsmohan mentioned that GitHub has a pretty solid implementation of this type of behavior in Pull Request views, and provided this example:

https://github.com/usdigitalresponse/usdr-gost/assets/1851017/56310a51-f37f-45a1-830c-193786a205ce

Thoughts?

[samserif23]

I believe the GitHub solution works best.

I'm still thinking the icon should be on the right because on the left, it reads more like a value_type than an action.

[TylerHendrickson]

@ClaireValdivia Implementation details added.

[jeffsmohan]

@ClaireValdivia totally happy to keep this out of scope for this issue, but I'm curious if we want to try to make the copy behavior more consistent between the emails here and the big "copy link" button at the top of the page.

1. The copy link button confirmation shows for 1s, whereas the tooltip here is spec'd to show for 2.5s.
2. The big button vs small copy icon present very different UIs for the ~same action. Do we want to try to unify the UIs more? (Personally, I'm not sure we want/need to, but wanted to raise it for consideration.)

[samserif23]

@jeffsmohan Regarding the confirmation time, the 1s confirmation should work fine for the tooltip since we are moving away from our in-line toast.

[ClaireValdivia]

just confirming also that we're good with the separate UIs for now. thanks for raising, Jeff!