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.

BaseDesktop OnlyRequires ui:scrollerWrapper

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
Selector.slds-dropdown
Summary

Initializes dropdown

Restrict.slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div
Selector.slds-dropdown_left
Summary

Positions dropdown to left side of target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_right
Summary

Positions dropdown to right side of target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_bottom
Summary

Positions dropdown to above target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_xx-small
Summary

Sets min-width of 6rem/96px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_x-small
Summary

Sets min-width of 12rem/192px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_small
Summary

Sets min-width of 15rem/240px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_medium
Summary

Sets min-width of 20rem/320px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_large
Summary

Sets min-width of 25rem/400px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_length-5
Summary

Forces overflow scrolling after 5 list items

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-7
Summary

Forces overflow scrolling after 7 list items

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-10
Summary

Forces overflow scrolling after 10 list items

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-with-icon-5
Summary

Forces overflow scrolling after 5 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-with-icon-7
Summary

Forces overflow scrolling after 7 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-with-icon-10
Summary

Forces overflow scrolling after 10 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_inverse
Summary

Theme

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown__header
Summary

Adds padding to area above dropdown menu list

Restrict.slds-dropdown li
Selector.slds-dropdown__item
Summary

Initializes dropdown item

Restrict.slds-dropdown li
Selector.slds-is-unsaved
Summary

Dirty state for a nav item

Restrict.slds-context-bar__item, .slds-dropdown__item
Selector.slds-icon_selected
Summary

If menu contains menuitemcheckbox then this toggles the selected icon when it is selected

Restrict.slds-dropdown__item svg
Selector.slds-is-selected
Summary

If menu contains menuitemcheckbox then this handles the selected states

Restrict.slds-dropdown__item
ModifierTrue
Selector.slds-has-submenu
Summary

true

Restrict.slds-dropdown__item
VariantTrue
Selector.slds-dropdown_submenu
Summary

true

Restrict.slds-has-submenu div
Selector.slds-dropdown_submenu-left
Summary

Open submenu to the left of the parent menu item

Restrict.slds-dropdown_submenu
ModifierTrue
Selector.slds-dropdown_submenu-right
Summary

Open submenu to the right of the parent menu item

Restrict.slds-dropdown_submenu
ModifierTrue
Selector.slds-dropdown_submenu-bottom
Summary

Open submenu along the bottom of the parent menu item

Restrict.slds-dropdown_submenu
Selector.slds-has-notification
Summary

Creates styles for a Tab Item when its tab has new activity in

Restrict.slds-tabs_default__item, .slds-dropdown__item
Selector.slds-indicator_unread
Summary

Unread notification icon

Restrict.slds-has-notification span
Selector.slds-nubbin_top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue