Details

      Description

      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

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Packages

                  Version Package
                  Master