Components

Publishers

A publisher is an advanced longform text input form element.

Discussion FeedDiscussion Feed › DefaultDiscussion Feed › ActiveDiscussion Feeddev ready

Preview

Code

<div class="slds-publisher slds-publisher--discussion">
  <dl class="slds-dl--inline slds-m-bottom--small slds-publisher__toggle-visibility">
    <dt class="slds-dl--inline__label slds-text-body--small">To: </dt>
    <dd class="slds-dl--inline__detail">My Followers</dd>
  </dl>
  <label for="comment-text-input2" class="slds-assistive-text">Write a comment</label>
  <textarea id="comment-text-input2" class="slds-publisher__input slds-textarea slds-text-longform" placeholder="Write a comment…"></textarea>
  <div class="slds-publisher__actions slds-grid slds-grid--align-spread">
    <ul class="slds-grid slds-publisher__toggle-visibility">
      <li>
        <button class="slds-button slds-button--icon-container" title="Add User">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#adduser"></use>
          </svg>
          <span class="slds-assistive-text">Add User</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-container" title="Attach a file">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
          </svg>
          <span class="slds-assistive-text">Attach a file</span>
        </button>
      </li>
    </ul>
    <button class="slds-button slds-button--brand">Share</button>
  </div>
</div>

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

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 textara 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.

CommentComment › DefaultComment › ActiveComment › FocusedCommentdev ready

Preview

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="javascript:void(0);" title="Jenna Davis">
      <img src="/assets/images/avatar2.jpg" alt="Jenna Davis" />
    </a>
  </div>
  <div class="slds-media__body">
    <div class="slds-publisher slds-publisher--comment">
      <label for="comment-text-input-01" class="slds-assistive-text">Write a comment</label>
      <textarea id="comment-text-input-01" class="slds-publisher__input slds-input--bare slds-text-longform" placeholder="Write a comment…"></textarea>
      <div class="slds-publisher__actions slds-grid slds-grid--align-spread">
        <ul class="slds-grid">
          <li>
            <button class="slds-button slds-button--icon-container" title="Add User">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#adduser"></use>
              </svg>
              <span class="slds-assistive-text">Add User</span>
            </button>
          </li>
          <li>
            <button class="slds-button slds-button--icon-container" title="Attach a file">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
              </svg>
              <span class="slds-assistive-text">Attach a file</span>
            </button>
          </li>
        </ul>
        <button class="slds-button slds-button--brand">Comment</button>
      </div>
    </div>
  </div>
</div>

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

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 textara 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.

Component Overview

To initialize the publisher, apply the .slds-publisher class to a containing <div>. The publisher consists of, but not limited to, a text input form element that is either a plain text or rich text editor. 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.

For available classes and options, see the publisher overview legend below.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-publisher
Applied to:

<div>

Outcome:

Initializes publisher

Required:

Required

Comments:

--

.slds-publisher--discussion
Applied to:

.slds-publisher

Outcome:

Modifier that alters the interactions of the publisher, specific to the discussion feed publisher

Required:

No, optional element or modifier

Comments:

--

.slds-publisher--comment
Applied to:

.slds-publisher

Outcome:

Modifier that alters the interactions of the publisher, specific to the comment publisher

Required:

No, optional element or modifier

Comments:

--

.slds-publisher__input
Applied to:

.slds-textarea or .slds-input--bare

Outcome:

Abstraction of the text input styles

Required:

Required

Comments:

--

.slds-publisher__actions
Applied to:

<div>

Outcome:

Bottom row of actionable items

Required:

Required

Comments:

--

.slds-attachments
Applied to:

<div>

Outcome:

Container for content attachment functionality and aesthetics

Required:

Required

Comments:

Only required if you have content attachment enabled

.slds-is-active
Applied to:

.slds-publisher

Outcome:

Opens publisher container to display additional functionality

Required:

Required

Comments:

Added through JavaScript

.slds-has-focus
Applied to:

.slds-publisher

Outcome:

Applies focus to comment publisher container when inside textarea

Required:

Required

Comments:

Added through JavaScript