Components

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.

BaseBase › OpenBase › ClosedBase › PopoutBase › With Overflow MenuBasedev ready

Preview

Code

<div class="slds-docked_container">
  <div class="slds-docked-composer slds-grid slds-grid--vertical slds-is-open" role="dialog" aria-labelledby="panel-heading-01">
    <div class="slds-docked-composer__header slds-grid slds-shrink-none">
      <div class="slds-media slds-media--center">
        <div class="slds-media__figure slds-m-right--x-small">
          <span class="slds-icon_container">
            <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
            </svg>
          </span>
        </div>
        <div class="slds-media__body">
          <h2 id="panel-heading-01">Header</h2>
        </div>
      </div>
      <div class="slds-col--bump-left">
        <button class="slds-button slds-button--icon" title="Minimize window">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
          </svg>
          <span class="slds-assistive-text">Minimize Composer Panel</span>
        </button>
        <button class="slds-button slds-button--icon" title="Expand Composer">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
          </svg>
          <span class="slds-assistive-text">Expand Composer Panel</span>
        </button>
        <button class="slds-button slds-button--icon" title="Close">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close Composer Panel</span>
        </button>
      </div>
    </div>
    <div class="slds-docked-composer__body">
      <div class="slds-align--absolute-center">Docked Composer Panel Body
        <br/> This area consumes the feature</div>
    </div>
    <footer class="slds-docked-composer__footer slds-shrink-none">
      <div class="slds-col--bump-left slds-text-align--right">
        <button class="slds-button slds-button--brand">Action</button>
      </div>
    </footer>
  </div>
</div>

VoiceVoice › QueuedVoice › RingingVoice › ConnectedVoice › CancelledVoice › BusyVoice › Call FailedVoice › No AnswerVoice › Call FinishedVoice › Call IncomingVoice › Log a CallVoicedev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-docked-composer slds-grid slds-grid--vertical slds-is-open" role="dialog" aria-labelledby="panel-heading-01">
  <div class="slds-docked-composer__header slds-grid slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure slds-m-right--x-small">
        <span class="slds-icon_container">
          <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="panel-heading-01">Lei Chan - Connecting...</h2>
      </div>
    </div>
    <div class="slds-col--bump-left">
      <button class="slds-button slds-button--icon" title="Minimize window">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize Composer Panel</span>
      </button>
      <button class="slds-button slds-button--icon" title="Expand Composer">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer Panel</span>
      </button>
      <button class="slds-button slds-button--icon" title="Close">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close Composer Panel</span>
      </button>
    </div>
  </div>
  <div class="slds-docked-composer__body slds-align--absolute-center">
    <div class="slds-text-align--center slds-align-middle">
      <span class="slds-avatar slds-avatar--large">
        <img src="/assets/images/avatar2.jpg" alt="Lei Chan" />
      </span>
      <h3 class="slds-text-heading--large">Lei Chan</h3>
      <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
        <li class="slds-item">VP of Sales</li>
        <li class="slds-item ">Acme Corporation</li>
      </ul>
      <p class="slds-text-heading--medium slds-m-top--medium">Connecting...</p>
    </div>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <button class="slds-button slds-button--destructive slds-size--1-of-1">End Call</button>
  </footer>
</div>

EmailEmailprototype

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

TaskTaskdev ready

Preview

Code

<div class="slds-docked-composer slds-grid slds-grid--vertical slds-is-open" role="dialog" aria-labelledby="panel-heading-01">
  <div class="slds-docked-composer__header slds-grid slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure slds-m-right--x-small">
        <span class="slds-icon_container">
          <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="panel-heading-01">New Task</h2>
      </div>
    </div>
    <div class="slds-col--bump-left">
      <button class="slds-button slds-button--icon" title="Minimize window">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize Composer Panel</span>
      </button>
      <button class="slds-button slds-button--icon" title="Expand Composer">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer Panel</span>
      </button>
      <button class="slds-button slds-button--icon" title="Close">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close Composer Panel</span>
      </button>
    </div>
  </div>
  <div class="slds-docked-composer__body slds-docked-composer__body--form">
    <fieldset class="slds-form--compound">
      <legend class="slds-assistive-text">Log new task</legend>
      <div class="form-element__group">
        <div class="slds-form-element__row">
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-01">Subject</label>
            <div class="slds-form-element__control">
              <input type="text" class="slds-input" id="text-input-01" />
            </div>
          </div>
        </div>
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="text-input-02">Assigned To</label>
            <div class="slds-form-element__control">
              <input type="text" class="slds-input" id="text-input-02" />
            </div>
          </div>
          <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="text-input-03">Due Dates</label>
            <div class="slds-form-element__control">
              <input type="text" class="slds-input" id="text-input-03" />
            </div>
          </div>
        </div>
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-lookup slds-size--1-of-2" data-select="single">
            <label class="slds-form-element__label" for="lookup-1900">Name</label>
            <div class="slds-form-element__control slds-grid slds-box--border">
              <div class="slds-dropdown--trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--xx-small slds-shrink-none">
                <svg class="slds-icon slds-icon-standard-account slds-icon--small" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <button class="slds-button slds-button--icon slds-button--icon-small" aria-haspopup="true" title="Filter by object">
                  <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                  </svg>
                  <span class="slds-assistive-text">Filter by object</span>
                </button>
              </div>
              <div class="slds-input-has-icon slds-input-has-icon--right slds-grow">
                <svg class="slds-input__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                </svg>
                <input type="search" id="lookup-1900" class="slds-lookup__search-input slds-input--bare" placeholder="Search Leads" aria-owns="lookup-1900" role="combobox" aria-activedescendant="" aria-expanded="false" aria-autocomplete="list" />
              </div>
            </div>
            <div class="slds-lookup__menu" id="lookup-1900">
              <div class="slds-lookup__item--label slds-text-body--small">Recent Accounts</div>
              <ul class="slds-lookup__list" role="listbox">
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1902" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">The Boston Consulting Group</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Boston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1903" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Acuity</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Sheboygan</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1904" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">SAS Insistute</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Cary</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1905" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Genentech</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • South San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1906" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Camden Property Trust</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Houston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1907" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Salesforce.com, Inc.</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-1908" role="option">
                    <svg class="slds-icon slds-icon--x-small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="slds-form-element slds-lookup slds-size--1-of-2" data-select="single">
            <label class="slds-form-element__label" for="lookup-1909">Name</label>
            <div class="slds-form-element__control slds-grid slds-box--border">
              <div class="slds-dropdown--trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--xx-small slds-shrink-none">
                <svg class="slds-icon slds-icon-standard-account slds-icon--small" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <button class="slds-button slds-button--icon slds-button--icon-small" aria-haspopup="true" title="Filter by object">
                  <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                  </svg>
                  <span class="slds-assistive-text">Filter by object</span>
                </button>
              </div>
              <div class="slds-input-has-icon slds-input-has-icon--right slds-grow">
                <svg class="slds-input__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                </svg>
                <input type="search" id="lookup-1909" class="slds-lookup__search-input slds-input--bare" placeholder="Search Accounts" aria-owns="lookup-1909" role="combobox" aria-activedescendant="" aria-expanded="false" aria-autocomplete="list" />
              </div>
            </div>
            <div class="slds-lookup__menu" id="lookup-1909">
              <div class="slds-lookup__item--label slds-text-body--small">Recent Accounts</div>
              <ul class="slds-lookup__list" role="listbox">
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1911" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">The Boston Consulting Group</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Boston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1912" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Acuity</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Sheboygan</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1913" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">SAS Insistute</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Cary</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1914" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Genentech</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • South San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1915" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Camden Property Trust</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Houston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-1916" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Salesforce.com, Inc.</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-1917" role="option">
                    <svg class="slds-icon slds-icon--x-small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <button class="slds-button slds-button--brand slds-col--bump-left">Save</button>
  </footer>
</div>

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-docked_container
Applied to:

<div>

Outcome:

Container that is fixed to the bottom of the viewport, can contain multiple docked composers

Required:

Required

Comments:

--

.slds-docked-composer
Applied to:

<div>

Outcome:

Intializes docked composer containter window

Required:

Required

Comments:

Each docked composer window receives this class, by default the docked composer is collapsed, adding .slds-is-open expands the composer

.slds-docked-composer__header
Applied to:

<div>

Outcome:

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

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-grid, .slds-grid--align-spread and .slds-shrink-none

.slds-docked-composer__actions
Deprecated
Applied to:

<div>

Outcome:

Actionable items with .slds-docked-composer__header

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__body
Applied to:

<div>

Outcome:

Primary area within docked composer that contains specific task

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-col, .slds-grid, .slds-grid--vertical, .slds-nowrap and .slds-size--1-of-1

.slds-docked-composer__footer
Applied to:

Outcome:

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

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-shrink-none

.slds-docked-composer__lead
Applied to:

<div>

Outcome:

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

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__toolbar
Applied to:

<div>

Outcome:

The toolbar contains actionable items to invoke, usually rich text editor controls

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__input
Applied to:

<textarea>

Outcome:

The text input field of the docked composer

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer--overflow
Applied to:

<div>

Outcome:

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

Required:

Required

Comments:

--

.slds-docked-composer--overflow__button
Deprecated
Applied to:

<a>

Outcome:

An indicator that displays the number of docked composers not shown on screen, user can select to display another docked composer from this pill

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer--overflow__pill
Deprecated
Applied to:

<a>

Outcome:

An indicator that displays the number of docked composers not shown on screen, user can select to display another docked composer from this pill

Required:

No, optional element or modifier

Comments:

--