[🎨Design] Internal notes

Challenge

Design ideation for &2697

Scenarios & visibility

Scenarios

• Confidential comment on new thread
• Confidential comment on existing public thread
• Confidential comment on existing confidential thread
• Public comment on existing confidential thread
• Confidential comments on designs
• Confidential comments on other issuables (eg MRs?)
• Marking existing public comment as confidential (commenter, other participant)
• Marking existing confidential comment as public (commenter, other participant)
• Marking entire thread as confidential
• Marking entire thread as public
• Project member views all comments
• Participant that is not a project member views all comments
• Non-participant that is not a project member views all comments
• Linking to a confidential comment in another issue (same project, other project)
• Mentions in confidential comments and displaying mention in corresponding item (eg issue)
• Direct mentions in confidential comments (project member, participant, non-participant & non-member)
• Filter by confidential comments
• Sort by confidential comments

Visibility

• Project members
• Participants (what if not a project member?)
• Assigned user (can be non-project)

General experience

Flow	Figma file (log in to view specs)
	https://www.figma.com/file/hR4xV99H0XPGIO4UcoJvOr/Allow-private-comments-on-all-commentable-resources?node-id=288%3A29978

Comment experience tweaks

• Add a small segmented control button group with the option Comment selected (default) for comments and Internal note selected for internal notes
• Change the Preview tabs to:
  • When writing: A toggle that reads Preview and is switched off
  • When previewing: A toggle that reads Preview and is switched on
• Reduce header height to 40px and use the small tertiary icon variant with 8px between them for the formatting options instead of medium
• Move Attach a file to the comment toolbar under a paperclip icon. Hovering on the icon triggers a tooltip that reads: "Attach a file or image"
• Reduce footer height to 32px
• Add a Cancel button similar to the cancel that exists for replies. Trigger a confirmation on cancel if the user has entered content.
• Switching between comment<>internal note will retain content added

Comments

The experience is similar to the one today with a few updates:

• Remove line break under header and add a $gray-50 background to header
• Move the "Comment & close issue" option to the segmented button dropdown

Internal notes

The internal notes experience should be similar to comments except:

• Remove line break under header and add a $orange-50 background to header
• Add help text under the comment input that reads "Your internal note will always remain confidential and visible only to teammates with at least the Reporter role" with a small inline warning badge with a eye-slash icon that reads "Confidential"
• The CTA is now Add internal note in the segmented button dropdown
• Move the "Add internal note & close issue" option to the segmented button dropdown

👁 Viewing a comment

The experience is similar to the one today with a few updates:

• Move poster/author related badges to the right of the timestamp to group them closer to the poster/author
• Use the neutral muted small badge for the author badges.
• Add a small warning badge to the left of the comment actions that reads Internal note. The tooltip here can read something like: "This internal note will always remain confidential"
• Style the note text/body and any editing information in $orange-50 with 8px padding top and bottom and 12px left and right.
• The spacing between the note text and editing information is unchanged. The entire body of the note should align as it currently does.

Walkthrough

The styling may be a bit different here but the general interactions are same

internalnote