Publishers
- HTML/CSS:Dev Ready
- Layout:Desktop Only
A publisher is an advanced longform text input form element.
Base
Preview
About Base
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.
About Publishers
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.
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-publisher |
|---|---|
| Summary | Initializes a publisher |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-is-active |
|---|---|
| Summary | |
| Restrict | .slds-publisher |
| Modifier | True |
| Selector | .slds-publisher__input |
|---|---|
| Summary | Abstraction of the text input styles |
| Restrict | .slds-publisher textarea |
| Selector | .slds-publisher__actions |
|---|---|
| Summary | Bottom row of actionable items |
| Restrict | .slds-publisher div |
| Selector | .slds-publisher__toggle-visibility |
|---|---|
| Summary | |
| Restrict | .slds-publisher label, .slds-publisher ul |
| Selector | .slds-publisher_comment |
|---|---|
| Summary | Initiates publisher that is specific to commenting in threads |
| Support | dev-ready |
| Restrict | .slds-publisher |
| Variant | True |
| Selector | .slds-has-focus |
|---|---|
| Summary | Applies focus to comment publisher container when inside |
| Restrict | .slds-publisher_comment |
| Modifier | True |