Bulk actions from table pattern
Description
Bulk actions from a table is a common workflow but is not documented in Pajamas. Designers are approaching this slightly differently, which could introduce inconsistencies. The issue assumes we can establish a pattern that works for most/all use cases.
Audit of use cases
Area | ex1 | ex2 |
---|---|---|
Vulnerability report | ![]() |
![]() |
Container registry | ![]() |
![]() |
Issues list | ![]() |
![]() |
Runners (will be in prod soon) | ![]() |
|
Build artifacts (not implemented) | ![]() |
![]() |
See more in-depth screenshots with linked issues in Figma
Considerations
- Keyboard shortcuts - bulk select with the shift key (context)
To-do
-
come up with a recommendation -
apply recommendations to production instances of tables with bulk actions (in Figma) -
tag the design team for feedback -
rework based on feedback -
usability test -
potentially rework based on insights -
document in Pajamas -
revise table in Figma
Pajamas template details
Checklist
Make sure the following are completed before closing the issue:
-
Assign the correct component label to this issue. -
Create an MR with the additions or updates needed. -
When applicable, create a new Pajamas issue using the "Figma update" issue template to update the component in Figma. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. -
When applicable, create an MR in GitLab UI to update the component. If you do not have capacity or are unable to update the component directly, create a new GitLab UI issue using the "Component" issue template. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. -
When introducing a major or breaking change, communicate the changes within the Engineering Week in Review and UX Weekly meeting. -
🎉 Congrats, you made it! You can now close this issue.
Resources
- Component Lifecycle
- See attached designs. This is a rough proposal to get the discussion started. You can view more in-depth in Figma
Edited by Gina Doyle