Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Draggables

Draggables are items that can be moved about the interface. Customers use this pattern to add and reorder elements to fit their needs.

Insight

Draggable items are recognizable by their vertical lines within the component. They provide affordance that they can be dragged and moved.

Default

Copy
<div class="draggables">
  <a href="#" class="btn--draggable" role="button">Draggable</a>
</div>

Description

The default style for draggable buttons uses the tertiary color.

Disabled

Copy
<div class="draggables">
  <a href="#" class="btn--draggable btn--disabled" role="button">Draggable Disabled</a>
</div>

Description

When a draggable item cannot be interacted with we add a btn--disabled class.

Sticky

Copy
<div class="draggables draggables--sticky">
  <a href="#" class="btn--draggable" role="button">Screener Question</a>
</div>

Description

Given the nature of the dragging interface some items may go below the view of the window. Apply the draggables--sticky class to ensure that the Draggable element is always in view.

Icons

Expand Copy
<div class="draggables">
  <a href="#" class="btn--draggable" role="button">Screener Question
    <tk-icon class="mr-auto ml-2x t-link"
      name="question-mark-circle"
      size="small">
    </tk-icon>
  </a>
</div>
<div class="draggables">
  <a href="#" class="btn--draggable btn--locked" role="button" aria-label="locked feature">
  Screener Question
    <tk-icon name="lock" size="small"></tk-icon>
  </a>
</div>

Description

Draggables may offer complex choices and interactions. Adding icons helps to educate customers on what they can do with draggables and how they can access them. Lock icon denotes access to feature. Read more about lock icons in buttons.

Insight

The “question mark” icon triggers a modal further explaining the draggable option.

Usage

Do

  • Provide enough space to see Draggable and Droppable
  • When clicked, the new element created should receive :focus
  • Ensure action is clear

Don't

  • Include more than two icons in a draggable component
  • Remove the vertical lines from draggable components

Accessibility

  • Receives :focus

  • When clicked, the new element created should receive :focus