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.

About Docked Composer

Implementation

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.

Base

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">

States

Open/Focused

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open slds-has-focus" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">

Closed

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-closed" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">

Closed/Focused

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-has-focus slds-is-closed" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">

Popped out

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-docked-composer-modal" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1" aria-modal="true">
  <div class="slds-modal__container">
    <div class="slds-modal__content" id="modal-content-id">

With overflow menu

<div class="slds-docked_container">
  <div class="slds-docked-composer slds-docked-composer_overflow">
    <button class="slds-button slds-button_icon slds-docked-composer_overflow__button" aria-haspopup="true">

Examples

Log a task

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">

Email Composer

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">

Voice

Queued
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Ringing
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Connected
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Cancelled
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Busy
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Call Failed
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
No Answer
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Call Finished
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Call Incoming
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
Call Logged
<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">