Pattern library: Update design for draggable cards
See discussion starting at https://gitlab.com/gitlab-org/gitlab-ce/issues/39543#note_72636860
-
Make sure the following pages are consistent with the proposal (create issues where needed):- Milestones page (redesign)
- Security dashboard
- Epics issues and related issues: https://gitlab.com/gitlab-org/gitlab-ee/issues/6086
- Issue list: https://gitlab.com/gitlab-org/gitlab-ce/issues/47009
-
Write up documentation for the DS: https://gitlab.com/gitlab-org/design.gitlab.com/merge_requests/82
Proposal
- Draggable list items have a card-style, non-draggable list items look like a plain list
Draggable | Non-dragabble |
---|---|
- Improve contrast of cards, increasing the draggable affordance (design from https://gitlab.com/gitlab-org/gitlab-ee/issues/6086):
- Having a box around lists or not depends on context.
- For example, there's no box around the issues list because the context is that the main content there is the list of issues itself. On the other hand, the related issues or epic issues lists are surrounded by other content (description, discussions) and visually it made sense to box them.
Usage
Drag and drop with sorting and filtering
[…] sorting by column and filtering through the data grid should be disabled if drag and drop is enabled, because the logic for either contradicts the other (ex: you can’t drag rows around if they are sorted by date). — https://medium.com/@gracesnoh/hi-tom-i-agree-with-you-drag-and-drop-is-not-meant-for-data-grids-with-large-data-sets-74be92502c80
Sorting data grids with large datasets
Drag and drop is not meant for data grids with large datasets. The main use case we had in mind for draggable rows in a data grid was setting some sort of order or priority — for example, reordering your WiFi network preferences […] Use cases like this shouldn’t support large data sets — otherwise, users would spend hours or even days going through and prioritizing and reordering hundreds of rows. — https://medium.com/@gracesnoh/hi-tom-i-agree-with-you-drag-and-drop-is-not-meant-for-data-grids-with-large-data-sets-74be92502c80
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Create an issue to add the pattern documentation to the Design System: https://gitlab.com/gitlab-org/design.gitlab.com/issues/100 -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)