Comments

New Comment Form

This is the new comment form, which is triggered by clicking "Comment" inside the text menu and opens in the right margin.

<aside class="c-commentscontainer">
  <button class="c-comment__close o-button o-button--icon o-button--inverted">
    <i class="fa f fa-close"></i>
  </button>
  <div class="c-commentthread">
    <form class="c-comment c-comment--new">
      <div class="c-comment__byline">
        <img alt="melissa" src="/static/images/grayface.svg" class="c-comment__avatar">
      </div>
      <label class="c-comment__wrapper">
        <textarea id="editable-comment-textarea" rows="1" placeholder="Add a comment" class="c-comment__content"></textarea>
      </label>
      <input type="submit" value="Send" class="c-comment__submit o-button o-button--primary is-small">
    </form>
  </div>
</aside>

Comment Count

This is the comment indicator that shows up next to a block with comments.

<button class="c-commentcount">
  <span class="c-commentcount__icon">
    <i class="fa fa fa-comment-o"></i>
  </span>
  <span class="c-commentcount__label o-button__label--full">1</span>
</button>

Comment Structure

Here's the overall structure of the comment container, including threads, individual comments, the comment context menu, and the comment reply form.

<aside class="c-commentscontainer">
  <button
    class="c-comment__close o-button o-button--icon o-button--inverted">
    <i class="fa f fa-close"></i>
  </button>
  <div class="c-commentthread">
    <div class="c-comment c-comment--actions">
      <button class="c-comment__resolve o-button o-button--inverted">Resolve</button>
    </div>
    <div class="c-comment c-comment--snippet">
      <div class="c-comment__highlight is-light">
        <div class="c-comment__truncation">A gorgeous day. The sun is shining. But BRICK BRADDOCK, retired police detective, is sitting quietly, contemplating -- something.</div>
      </div>
    </div>
    <div class="c-comment c-comment--self">
      <div class="c-comment__selfrow">
        <div class="c-comment__byline">
          <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
          <div class="c-comment__meta">
            <div class="c-comment__author">
              <strong>Melissa</strong>
            </div>
            <div class="c-comment__timestamp is-light">June 10, 2020</div>
          </div>
        </div>
        <div class="c-comment__menu c-dropdown is-open">
          <button class="o-button o-button--iconic o-button--inverted">
            <i class="fa fa-ellipsis-v"></i>
          </button>
          <div class="c-dropdown__list c-dropdown__list--dark">
            <button class="c-dropdown__item">Edit</button>
            <button class="c-dropdown__item c-dropdown__item--red">Delete</button>
          </div>
        </div>
      </div>
      <div class="c-comment__content">My comment.</div>
    </div>
    <div class="c-comment">
      <div class="c-comment__byline">
        <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/1mXNyNk/flower.jpg')">
        <div class="c-comment__meta">
          <div class="c-comment__author">
            <strong>Rachel</strong>
          </div>
          <div class="c-comment__timestamp is-light">June 10, 2020</div>
        </div>
      </div>
      <div class="c-comment__content">sgadkjlagskljagsjlkasgdljkgasdfljkgasdljkagsfjlkgdsajlkagsdjlkagsdjl</div>
    </div>
    <form class="c-comment c-comment--new">
      <div class="c-comment__byline">
        <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
      </div>
      <label class="c-comment__wrapper">
        <textarea oninput="this.parentNode.dataset.value = this.value" name="comment" rows="1" class="c-comment__content" placeholder="Add a comment"></textarea>
      </label>
      <input type="submit" value="Send" class="c-comment__submit o-button o-button--primary is-small">
    </form>
  </div>

  <div class="c-commentthread">
    <div class="c-comment c-comment--actions">
      <button class="c-comment__resolve o-button o-button--inverted">Resolve</button>
    </div>
    <div class="c-comment c-comment--snippet">
      <div class="c-comment__highlight is-light">
        <div class="c-comment__truncation">A gorgeous day. The sun is shining. But BRICK BRADDOCK, retired police detective, is sitting quietly, contemplating -- something.</div>
      </div>
    </div>
    <div class="c-comment c-comment--self">
      <div class="c-comment__selfrow">
        <div class="c-comment__byline">
          <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
          <div class="c-comment__meta">
            <div class="c-comment__author">
              <strong>Melissa</strong>
            </div>
            <div class="c-comment__timestamp is-light">June 10, 2020</div>
          </div>
        </div>
        <div class="c-comment__menu c-dropdown">
          <button class="o-button o-button--iconic o-button--inverted">
            <i class="fa fa-ellipsis-v"></i>
          </button>
          <div class="c-dropdown__list c-dropdown__list--dark">
            <button class="c-dropdown__item">Edit</button>
            <button class="c-dropdown__item c-dropdown__item--red">Delete</button>
          </div>
        </div>
      </div>
      <div class="c-comment__content">What about...\n\nyain't?\n\n<a class="c-comment__link" href="https://www.urbandictionary.com/define.php?term=yain%27t">https://www.urbandictionary.com/define.php?term=yain%27t</a>.</div>
    </div>
    <form class="c-comment c-comment--new">
      <div class="c-comment__byline">
        <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
      </div>
      <label class="c-comment__wrapper">
        <textarea oninput="this.parentNode.dataset.value = this.value" name="comment" rows="1" class="c-comment__content" placeholder="Add a comment">Typing a response...</textarea>
      </label>
      <input type="submit" value="Send" class="c-comment__submit o-button o-button--primary is-small">
    </form>
  </div>
</aside>

Edit an Existing Comment

When a user clicks "Edit" in the context menu, the comment should switch to this mode.

Melissa

May 18, 2020

Edit Delete

Most bears found in the United States are black bears.

<div class="c-comment c-comment--self c-comment--edit">
  <div class="c-comment__selfrow">
    <div class="c-comment__byline">
      <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
      <div class="c-comment__meta">
        <div class="c-comment__author">
          <strong>Melissa</strong>
        </div>
        <div class="c-comment__timestamp is-light">May 18, 2020</div>
      </div>
    </div>
    <div class="c-comment__menu c-dropdown"> <!-- can toggle is-open -->
      <button class="o-button o-button--iconic o-button--inverted">
        <i class="fa fa-ellipsis-v"></i>
      </button>
      <div class="c-dropdown__list c-dropdown__list--dark">
        <button class="c-dropdown__item">Edit</button>
        <button class="c-dropdown__item c-dropdown__item--red">Delete</button>
      </div>
    </div>
  </div>
  <!-- data-value prop must be set on load for initial autogrow height to be correct -->
  <label class="c-comment__wrapper" data-value="Most bears found in the United States are black bears.">
    <textarea oninput="this.parentNode.dataset.value = this.value" name="comment" rows="1" class="c-comment__content">Most bears found in the United States are black bears.</textarea>
  </label>
  <input type="submit" value="Update" class="c-comment__submit o-button o-button--primary is-small">
</div>