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 containerslds-publisher_comment
- Comment variant modifierslds-publisher__input
- Text input areaslds-publisher__actions
- Action buttons containerslds-is-active
- Active state modifierslds-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">