Docked Composer - Lightning Design System

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

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: 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-docked-composer`
Summary
Support	dev-ready
Restrict	`section, div`
Variant	True

Selector	`.slds-has-focus`
Summary
Restrict	`.slds-docked-composer`
Modifier	True

Selector	`.slds-is-open`
Summary
Restrict	`.slds-docked-composer`
Modifier	True

Selector	`.slds-is-closed`
Summary
Restrict	`.slds-docked-composer`
Modifier	True

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`
Modifier	True

Selector	`.slds-dropdown_right`
Summary	Positions dropdown to right side of target
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_bottom`
Summary	Positions dropdown to above target
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_xx-small`
Summary	Sets min-width of 6rem/96px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_x-small`
Summary	Sets min-width of 12rem/192px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_small`
Summary	Sets min-width of 15rem/240px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_medium`
Summary	Sets min-width of 20rem/320px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_large`
Summary	Sets min-width of 25rem/400px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_length-5`
Summary	Forces overflow scrolling after 5 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-7`
Summary	Forces overflow scrolling after 7 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-10`
Summary	Forces overflow scrolling after 10 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

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`
Modifier	True

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`
Modifier	True

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`
Modifier	True

Selector	`.slds-dropdown_inverse`
Summary	Theme
Restrict	`.slds-dropdown`
Modifier	True

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-has-error`
Summary	Places a menu item into an errored state
Restrict	`.slds-dropdown__item > a`
Modifier	True

Selector	`.slds-has-success`
Summary	Places a menu item into a success state
Restrict	`.slds-dropdown__item > a`
Modifier	True

Selector	`.slds-has-warning`
Summary	Places a menu item into a warning state
Restrict	`.slds-dropdown__item > a`
Modifier	True

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`
Modifier	True

Selector	`.slds-has-submenu`
Summary	true
Restrict	`.slds-dropdown__item`

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`
Modifier	True

Selector	`.slds-dropdown_submenu-right`
Summary	Open submenu to the right of the parent menu item
Restrict	`.slds-dropdown_submenu`
Modifier	True

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`
Modifier	True

Selector	`.slds-nubbin_top-left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-left-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-left-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-right-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-right-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-top-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-top-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-bottom-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-bottom-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Variants

Examples

Modifiers

States

Density

BaseDesktop OnlyRequires ui:scrollerWrapper

Preview

About Docked Composer

Overview of CSS Classes

What are these categories?