Swipe actions

Overview

This component is used to provide users a shortcut to perform some actions that are present on the page of the items list. Making some key actions available directly with a swipe will increase fluidity especially when dealing with multiple elements.

Example: completing multiple tasks in a to-do list.

Separation

Items are separated by a thin line. In opposition with a list of Entrypoints where we use fills and spacing to distinguish items. This helps the user to understand better this behaviour.

Actions

Multiple actions can be displayed next to each other. With a maximum of three actions per direction.

Behaviour

The act of swiping has different key points based on the distance swiped. There are two different threshold distances.

1. User starts swiping, the action(s) starts pushing the list item to the side.
2. If the user releases after passing the first threshold, the actions stays in place with a fixed width. The user can then choose to tap the actions or dismiss them by swiping the other way. Essentially closing the action.
3. If the user releases after passing the second threshold, the action will be executed. In case there are multiple actions, an action can be executed by default when this threshold is passed. In this case, this threshold is harder to reach (bigger slide distance) to avoid any frustration. There should be no confusion on whether the user wants to display the actions or execute the one by default.

States

1. Default state
   State visible before click.
2. Hover/Focused state
   State visible when triggered by keyboard navigation.
3. Disabled state
   State visible when no interraction is possible with the box. A tooltip can be added to inform the reason of deactivation.

Anatomy

1. Label
   The label should describe the name or title of the item itself.
2. Description (optional)
   Provides complementary information about the label.
3. Icon/Image (optional)
   The icon or image can be used to support the label and/or description to better communicate the item subject.
4. Separator
   This separator is used to distinguish items from one another and indicate that it is slideable.
5. Action(s)
   Actions are displayed next to each other
6. Action icon
   Icon related to an action should be self explanatory. Use simple icons for straightforward actions.

Colors

Multiple colors are available for an action’s background:

1. Success green when the action is implying success or completion
2. Error red when the action is implying danger, destruction or an error
3. Purple if the action is neutral
4. Blue if the action is neutral
5. Magenta if the action is neutral