search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
36 stars 55 forks source link

Experimental design - Add Save icon #2747

Open emilytaylorux opened 1 month ago

emilytaylorux commented 1 month ago

What

Add a save icon to the VADS.

Purpose

This icon is currently used in Secure Messaging on VA.gov when users save a draft.

Screenshot 2024-04-23 at 4 16 08 PM

The save-alt icon resembles a "download + save" function. The floppy disk that we are proposing is more appropriate for Secure Messaging's type of "saving" that includes drafts that remain in the system. The floppy disk is more inline with established conventions in applications for our purpose.

Usage

This icon can be used to save a user's in-progress form for later use.

Examples

Figma example link screencapture-staging-va-gov-my-health-secure-messages-new-message-2024-04-19-10_30_12

Guidance

This icon can be used to save a user's in-progress form for later use.

humancompanion-usds commented 1 month ago

Discussed in DSC. Here are our thoughts:

  1. There was some question of whether or not the floppy disk is still the best choice for a Save icon but a quick search resolved that it is, despite the fact that floopys haven't been used in quite some time. However, we are moving away from FontAwesome to the USWDS icon set, which surprisingly does not have a save icon. The USWDS icon set is a sub-selection of Google's icons and they have a Save very similar to the Font Awesome version.
  2. Icon choice aside, we're not sure that the icons are necessary here but are not opposed to their use. For deleting a draft perhaps using a color choice (red) that indicates a destructive action might also be helpful.
  3. There seems to be another button variation here which is sort of a mix of the USWDS base gray button and our secondary button (or USWDS outline button). Attach File and Edit Preferences are using this tertiary button. I believe I may have given you something like this button. We've since (actually, just today) introduced an ever lighter tertiary button, Button - Icon. The intention is to use this button within Cards and we'll be using it in the v3 File Input component. Thus it should really appear inside of a container. But there is an opportunity to try this style out with Attach file, if you are interested. The group didn't really understand why Edit preferences was offered here.
  4. We also discussed how the "In the Messages section" nav trigger is also a button and not documented in the Design System because Sidenav is not yet in the Design System. This brought about a discussion of button vs. link and what characteristics define a standard button vs. a menu button, which do different things. DK, Dan, and I are going to continue to work on this and update guidance accordingly.