Docked Composer

Docked Composer

Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window.

BaseNot Compatible with S1 Mobile

Preview

No content has been added for this component.

No content has been added for this component.

About Docked Composer

The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

The overflow menu for docked composer, .slds-docked-composer_overflow, displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected.

When a user clicks on the "pop out" icon in the .slds-docked-composer__header, a modal displays and contains the task that was currently in the docked composer.


Overview of CSS Classes

Selector.slds-docked-composer
Summary
Supportdev-ready
Restrictsection, div
VariantTrue
Selector.slds-has-focus
Summary
Restrict.slds-docked-composer
ModifierTrue
Selector.slds-is-open
Summary
Restrict.slds-docked-composer
ModifierTrue
Selector.slds-is-closed
Summary
Restrict.slds-docked-composer
ModifierTrue
Selector.slds-docked-composer__header
Summary

Bar at the top of the composer that contains actionable items to invoke, such as minimizing, popping out the composer and removing the composer.

Restrict.slds-docked-composer header
Selector.slds-docked-composer__body
Summary

Primary area within docked composer that contains specific task

Restrict.slds-docked-composer div
Selector.slds-docked-composer__body_form
Summary
Restrict.slds-docked-composer__body
Selector.slds-email-composer
Summary

Initiazes email composer inside of a docked composer

Restrict.slds-docked-composer__body div
Selector.slds-email-composer__combobox
Summary

Modifier combobox when used inside of email composer

Restrict.slds-email-composer div
Selector.slds-email-composer__recipient
Summary

Provides styles for recipient labels inside of email composer

Restrict.slds-email-composer label
Selector.slds-docked-composer__lead
Summary

Within the docked composer body, the lead is the first region

Restrict.slds-docked-composer div
Selector.slds-docked-composer__toolbar
Summary
Restrict.slds-docked-composer div
Selector.slds-docked-composer__footer
Summary

Bar at the bottom of the composer that contains actionable items to invoke, such as saving, associating relationships and adding content.

Restrict.slds-docked-composer footer
Selector.slds-docked-composer_overflow
Summary

When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles

Restrict.slds-docked-composer