Design Pattern Library: Update issuable discussion designs

We already created the initial updated component of issuable discussion on #92 (closed). But we will do some changes in the design on https://gitlab.com/gitlab-org/gitlab-ce/issues/29294. This issue to update the components once https://gitlab.com/gitlab-org/gitlab-ce/issues/29294 is done.

Usage

Issuable discussions are used for the discussions on issue page and merge request page. It has three states:

  • The discussion is collapsed. In this state, it has the avatars in the bar to indicates who joined this discussion. It also indicates the number of replies.
  • The discussion is expanded but the comment form is collapsed.
  • The discussion is expanded and the comment form is expanded as well.

Example(s)

(When do you use this pattern? And how? This is being collected for design.gitlab)

Issue

Initial comment Initial comment with the reply box
issue-01 issue-01-reply
Replies - expand Replies - collapse
issue-03-replies-comment-box--collapse issue-04-replies-collpase
Comment box Emoji reaction
issue-05-comment-box--expand issue-02-emoji

Merge request

Initial comment Initial comment with the reply box
mr-01 mr-01-reply-box
Comment box - collapse Comment box - expand
mr-03-comment-box--expand mr-02-comment-box--collapse
Diff
mr-04-diff

System note

system-note

Dos and dont's

(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)

Related patterns

(List any related or similar solutions. If none, write: No related patterns)

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

  1. Ensure that you have broken things down into atoms, molecules, and organisms.
  2. Check that you have not created a duplicate of an existing pattern.
  3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
  4. Make sure that text is created using text styles. When applicable used shared styles for colors.
  5. QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)
  6. Added to gitlab-elements.sketch
  7. Add to the UX Guide and/or add to the GitLab Design Library
  8. Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)

/cc @cperessini @dimitrieh @hazelyang @pedroms @sarrahvesselov @sarahod @tauriedavis

Edited by Hazel Yang