New design for Comments

• Type: Story
• Status: Closed
• Priority: Trivial
• Resolution: Completed
• Affects Version/s: Master
• Fix Version/s: Master
• Component/s: Comments
• Labels:
  • Sustaining
  • lexicon
  • planned_for_7.2
• Epic/Theme:
  • Sustaining
• Epic Link: Comments Design Improvements
• Sprint: 10 - Arm-Fall-Off-Boy, 11_Kratos, August_Collab, 7.2 - S1, September
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/62845

Motive
Regarding the new design for Blogs, we must update the visual design for comments component.

Acceptance Criteria

• At least the new design should be applied in portlets for Sites view.

Future
We should review if it has the sense to have different visualizations for comments (this story is designed only for sites view).

User Experience

Parts

1. Comment Box

2. Comments Count & Order Buttons

3. Comments Stack
4. Reply Box

Design

Please follow the design defined in LEXI-284

Hints

• Comment Box Input: "Add a comment..."
• Reply Box Input: "Add a reply for a comment..."

Order Buttons

• Oldest
• Recent
• Popular

Button Actions

• "Publish" for primary action in Comment Box
• "Publish" for primary action in Reply Box

Interaction

Adding a Comment

Scenario
Given a document/blog entry/ etc that can be commented.
When a user writes a comment about something he considers interesting.
Then the comment is published.

Comment Box
We call Comment Box to the first UI element we see in the comments component. It’s always shown. When the user clicks / tabs the box changes to Writing State and receive the focus.

If there is no text within the primary action is disabled. Once the input has text, the button is enabled.

Once the first comment is published the “Comments Count & Order Buttons” part is shown and the Comment Box returns to the Default State.

Commenting with Previous Comments

Scenario
Given a document/blog entry/ etc that can be commented.
When a user writes a comment about something he considers interesting.
Then the comment is published stacked below / above the previous comment.

Comments Stack
When a user writes a comment that comment is placed on top/bottom depending on the current order selected in the comments stack.

Replying a Comment

Scenario
Given a document/blog entry/ etc that can have comments replied.
When a user replies a comment
Then the reply is nested below the comment replied

Reply Box Open / Close
When a user clicks reply. The Reply Box is shown pushing all the comments and the user can write a comment. Then he clicks the primary action and the comment is published.

If the user clicks reply again the current opened Reply Box closes. Pulling up all the comments and replies.  

Only one Reply Box can be opened at the same moment. It’s a single-expand behavior. If a user tries to reply a second comment the previous reply closes and a comment reply input is shown at the user interaction level.

The Reply Box Input receives the focus when the user clicks reply and follows the same content rules that has the Comment Box Input when there is no text within.

Documentation

Check examples and interactions defined on Comments Interaction document