```html```

Active Comment Publisher

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

Discussion Feed Publisher (Default)

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 Discussion Feed Publisher

Comment

Comment Publisher (Default)

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 Comment Publisher

Focused Comment Publisher

Interactive Controls

Component API

Base Publisher Structure

<div class="slds-publisher"> <label for="text-input" class="slds-publisher__toggle-visibility slds-assistive-text">Write a post</label> <textarea id="text-input" class="slds-publisher__input slds-textarea" placeholder="Share an update..."></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 slds-button_icon-border-filled" title="Attach a file"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#attach"></use> </svg> <span class="slds-assistive-text">Attach a file</span> </button> </li> </ul> <button class="slds-button slds-button_brand" disabled>Share</button> </div></div>

Comment Publisher Structure

<div class="slds-publisher slds-publisher_comment"> <label for="comment-input" class="slds-publisher__toggle-visibility slds-assistive-text">Write a comment</label> <textarea id="comment-input" class="slds-publisher__input slds-textarea" 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 slds-button_icon-border-filled" title="Attach a file"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#attach"></use> </svg> <span class="slds-assistive-text">Attach a file</span> </button> </li> </ul> <button class="slds-button slds-button_brand" disabled>Comment</button> </div></div>

Styling Hooks Overview

The publisher component supports various styling hooks for customization. Key classes include:

  • slds-publisher - Main publisher container
  • slds-publisher_comment - Comment variant modifier
  • slds-publisher__input - Text input area
  • slds-publisher__actions - Action buttons container
  • slds-is-active - Active state modifier
  • slds-has-focus - Focus state modifier

CDN

This page uses the Salesforce Lightning Design System via: https://cdnjs.cloudflare.com/ajax/libs/design-system/2.27.2/styles/salesforce-lightning-design-system.min.css

' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">