Write a comment

• Add User
• Attach a file

Comment

About Publishers#

To initialize the publisher, apply the .slds-publisher class to a containing <div>. The publisher consists of, but is not limited to, a text input form element that is either a plain text or rich text editor, and a row of actionable interactions such as attaching additional content, adding followers, and a submit button.

The variants of the publishers have different use cases, so please pay attention to the markup structure of each.

Base#

<div class="slds-publisher">
  <label for="comment-text-input2" class="slds-publisher__toggle-visibility slds-m-bottom_small">
    <span class="slds-assistive-text">Write a comment</span>To: My followers</label>
  <textarea id="comment-text-input2" class="slds-publisher__input slds-textarea slds-text-longform" placeholder="Write a comment…"></textarea>

The discussion feed publisher is found at the top of a feed stream. It contains basic and advanced publishing capabilities.

The discussion feed is in a collapsed state by default. There are 3 states of the discussion feed that provide different feedback to the user. First, the collapsed state, this indicates the user has not interacted with the discussion feed publisher. When the user initiates an interaction with the publisher, by either focusing of the textarea or clicking the "Share" button, through javascript the class of slds-is-active should be applied to the slds-publisher div. This class will expand the publisher box and display additional publisher actions.

During the active state, before the user has begun typing or attaching additional content, the "Share" button should be disabled by applying the disabled attribute to the <textarea>. When the user begins typing, the disabled attribute should be toggled off.

Active#

<div class="slds-publisher slds-is-active">
  <label for="comment-text-input2" class="slds-publisher__toggle-visibility slds-m-bottom_small">
    <span class="slds-assistive-text">Write a comment</span>To: My followers</label>
  <textarea id="comment-text-input2" class="slds-publisher__input slds-textarea slds-text-longform" placeholder="Write a comment…"></textarea>

Comment#

Write a comment

• Add User
• Attach a file

Comment

• Show Code

<div class="slds-media slds-comment slds-hint-parent">
  <div class="slds-media__figure">
    <a class="slds-avatar slds-avatar_circle slds-avatar_medium" href="#">
      <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />

The comment publisher is found at the bottom of a discussion feed comment thread. It contains basic publishing capabilities.

The comment publisher is in a collapsed state by default. There are 4 states of the discussion feed that provide different feedback to the user. First, the collapsed state, this indicates the user has not interacted with the comment publisher. When the user initiates an interaction with the publisher, by either focusing of the textarea or clicking the "Comment" button, through javascript the class of slds-is-active should be applied to the slds-publisher element. This class will expand the publisher box and display additional publisher actions.

Due to the implementation of the comment publisher design, we used a faux textarea container and we'll need to apply the our focus state to that custom container. Using javascript, the class slds-has-focus should be applied to the slds-publisher element when the user interacts with <textarea>. When the user loses focus on the <textarea>, the class slds-has-focus should be toggled off from the slds-publisher element.

During the active state, before the user has begun typing or attaching additional content, the "Comment" button should be disabled by applying the disabled attribute to the <textarea>. When the user begins typing, the disabled attribute should be toggled off.

Active#

Write a comment

• Add User
• Attach a file

Comment

• Show Code

<div class="slds-media slds-comment slds-hint-parent">
  <div class="slds-media__figure">
    <a class="slds-avatar slds-avatar_circle slds-avatar_medium" href="#">
      <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />

Focused#

Write a comment

• Add User
• Attach a file

Comment

• Show Code

<div class="slds-media slds-comment slds-hint-parent">
  <div class="slds-media__figure">
    <a class="slds-avatar slds-avatar_circle slds-avatar_medium" href="#">
      <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />