[馃帹 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 andInternal 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
- When writing: A toggle that reads
- 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 apaperclip
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 aeye-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 readsInternal 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
Edited by Alexis Ginsberg