Anatomy
- Activity header: Users select the header to expand and collapse the activity picker list of activities
- Activity dropdown indicator: Caret that indicates whether the activity picker is expanded or collapsed
- Selected activity: Users can select an activity to view its details in the Playbook activity viewer
- Activities: All activities in a selected stage display in a vertical list and are selectable
Subcomponents
See the usage guidelines for icon.
Usage
Playbook activity picker lists the names of all activities for a stage that the user selects in either the horizontal playbook stage picker or in the activity picker when it shows stages. This component displays the progression of work through the activities in a playbook stage, displaying activity icons that represent the state of each activity, such as in progress, canceled, complete, and pending states.
Activity picker always displays vertically. It can be configured to show stages and expand them to view any available activity.
Use activity picker to quickly understand the steps required to complete each stage of the playbook. Manually navigate between steps by selecting each activity in the picker.
Configurations
Learn how to customize playbook activity picker by configuring the available properties.
Show stages
In vertical playbooks in focused mode, to show the activities under a stage, the user clicks to expand the stage. Multiple stages can be expanded at the same time.
The ability to expand pending stages depends on whether the playbook is configured to show pending activities. For more information, see Configure playbook stage and activity visibility in the product documentation.
Number of filters
When Playbook activity viewer is set to focused view, you can display the number of filtered results at the top of the activity picker. If filters are applied and there are no results, then “No filtered results” appears. When no filters are applied, nothing is displayed. By default, the filter number and text are hidden.
Design recommendations
Learn how to apply playbook activity picker in your design.
UI text guidelines
These are some recommendations for using text within playbook:
- Headers, stage, and activity titles should be short and precise, or they might truncate
- Use actionable activity titles that start with verbs, such as "Check approval status"
- Keep all text labels informative and short to increase readability and scanning
- Ensure content is contextual and specific to offer guidance and support to the user
- If a component performs or supports an action, label it with a verb (like “Submit”)
- Button text should be concise, actionable, and clearly state what happens when a user makes the selection
Behavior
Learn how playbook activity picker behaves when the display changes or a user interacts with the component.
States
Activities in playbook activity picker have the following states.
| State | Not selected activity example |
|---|---|
| Default |  |
| Hover |  |
| Pressed |  |
| Selected |  |
| Disabled |  |
Activity icons
The following icons appear at the start of each activity name. They indicate the current state of the activity.
| State | Not selected activity example | Selected activity example |
|---|---|---|
| In progress |  |
 |
| Complete |  |
 |
| Error |  |
 |
| Pending (available to be selected) |  |
 |
| Skip |  |
 |
| Cancel |  |
 |
| Pending (not selectable) |  |
 |
Interactions
Learn how playbook activity picker responds when a user interacts with it.
Activities dropdown
When a user clicks the “Activity” heading, the list of activities in a stage expands or collapses.
Activity selection
When a user selects an activity in the Playbook activities picker, the focused view of the activity appears in the Playbook activity viewer.
Truncation
The activity names can extend to a second line. If the text exceeds the text area width, then the activity name text truncates with an ellipsis at the end of the second line. When a user places the pointer on the ellipsis, a tooltip shows the full name. Note that the activity name text area has a small buffer on each side.
Usability
Playbook activity picker complies with all internationalization and accessibility requirements.
Internationalization
When the display translates to a right-to-left (RTL) language, the order of importance changes to right-to-left in the playbook activity picker, but remains the same from top to bottom.
Accessibility
Learn how to access the actionable elements of playbook activity picker through keyboard interactions and screen readers.
Playbook activity picker tab order
Keyboard interactions
Users can interact with the playbook activity picker using the keyboard.
- Tab: Moves focus to the next interactive element in the UI
- Shift + Tab: Moves focus backward through the interactive elements in the UI
- Esc: Dismisses displayed tooltip
- Enter/return or space bar: Triggers an action associated with an interactive element when in focus, such as expanding and collapsing the activities dropdown
- Arrow up: Moves focus from an activity to the one above it
- Arrow down: Moves focus from an activity to the one below it
Screen readers
When you apply ARIA labels to a component, screen readers announce the controls and content of playbook activity picker in the prescribed tab order.