microsoft/vscode-codicons

Request to add new icon to Codicon library

stariolo opened this issue · 14 comments

Hi!
We would like to contribute a new icon to the codicon library and we want to know what is the best way to do it and what do you need from us

Why do we want to do this?

When users review code inside Google they usually interact a lot with comments to provide feedback to authors about their code.
Comments are usually written and saved but not published until the end of this user journey. Users need time to add, edit, delete comments while they are reviewing/modifing code to send them all at once.
We offer 3 comment statuses:

  • Published and Unresolved

  • Published and Resolved

  • Draft (Saved but not published)

Those 3 statuses are represented across the interface with icons so users can screen and recognize them quickly in the UI.

On Cider V, we are currently using the pencil icon to represent “draft” status, but the icon doesn't represent the context properly, creating confusion with other concepts such as modified/draft: code, line, comments or file.

  • Source Control panel:

Screenshot 2022-11-09 at 14 51 01

  • Status bar:

Screenshot 2022-11-09 at 14 51 52

  • Indicator in line number of the editor:

Screenshot 2022-11-09 at 14 53 19

Proposal

We would like to contribute to the codicon library with a “draft” comments icon. This will clarify the context of the icon and the community can useit for other types of status such as: Draft Comments/Chats, Modified Comments/Chats, etc.
The style applied on both options follow the patterns on how other icons are treated in Codicon Library (like: save-as, new-folder, report icon). The team created two proposals with that in mind:

Screenshot 2022-11-09 at 15 07 04

The UX Google team would love to hear your feedback to continue working on this.
Thanks for your time.

Probably relevant to @daviddossett and @alexr00 (fyi, @stariolo works with @albertelo)

The GitHub Pull Requests extension sort of has a similar concept: When you start a review of a GitHub PR all your comments are "pending" until you submit the review. We don't have anywhere at the moment to surface that with an icon though.

@laurentlb for the purposes of understanding the possible uses of a new icon like this: does this also mean that there would be benefit from having a draft CommentThreadState at some point in the future to also use this icon in the Comments view?

I also wonder if it's worth exploring a dotted stroke concept to represent draft/unfinished like these other codicons. My only concern with the pencil is that it conveys an "edit" action/verb rather than a state.

I can help get the icon added once we've arrived at a design we like 👍

CleanShot 2022-11-11 at 09 42 31@2x

@alexr00 Yes, I think it would be useful to have this information in the comment thread.

On our side, we have two fields:

  • resolved / unresolved
  • published / draft

As it's orthogonal, I wouldn't add it to the CommentThreadState enum.

(for the icon, we could imagine an icon for the state "unresolved+draft", but that doesn't seem very important to us)

I like the idea of dotted stroke concept to represent draft/unfinished
Screenshot 2022-11-11 at 19 31 15

Thanks Mariana! @alexr00 & @daviddossett let us know if you need more explorations or if we need to refine the current ones

I like the proposal above! Just catching up from vacation but I'll tag you both in the PR to add this icon this week.

@stariolo that wouldn't hurt! Is your example based off the original comment codicon? If so, it could probably be easily merged into the codicons library. If not, I can recreate it.

Yes, it is. But I had to do some tricks to make it dashed (I used subtract).
Attached a svg file. Let me know if you need it in a different format.

comment

@daviddossett following up here: did you file the PR? anything else you might need from our end? Thank you!

Added comment-draft via #152 🙏

Thanks David! I really appreciate it. :)