Sorting Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Zdravko Kolev - Phoenix
- Peer Developer Name | Date:
- Stefan Ivanov | Date:
- Radoslav Mirchev | Date:
- Radoslav Karatoaivanov | Date:
| Version | User | Date | Notes |
|---|---|---|---|
| 0.1 | Stefan Ivanov | 28.11.18 | Created Spec |
| 0.2 | Danail Marinov | 16.01.19 | Updated Spec |
| 0.3 | Danail Marinov | 17.01.19 | Updated Spec |
| 2 | Stefan Ivanov | 15.07.20 | Adding sort order indication |
The sorting functionality of the grid allows the user to define the order of records in the grid by sorting a column in ascending/descending order by clicking an icon in the grid header. It is also possible to sort the grid by more than one column when a numeric indication on the icon is used to show the order in which columns have been sorted prototype
Must-have before we can consider the feature a sprint candidate
...
Developer Stories
- Story 1: As a developer, I want to have a clear sorting indication displayed out of the box so that the columns on which sorting is/can be applied are obvious.
- Story 2: As a developer, I want to have ellipsis applied out of the box on the column name label when the column is too narrow and becomes sorted so that the sort icon is clearly visible.
End-user stories
- Story 1: As an end-user, I want to know on which columns I can apply sorting so that I can distinguish them from the rest.
- Story 2: As an end-user, I want to be able to distinguish whether ascending or descending order of the sorting is applied so that I have a clear understanding of the order defined by a particular column.
- Story 3: As an end-user, I want to know which columns are currently sorted/unsorted so that I can have a clear understanding of the current state of the grid.
- Story 4: As an end-user, I want to know the order in which columns are sorted so that I can have a clear understanding of the current state of the grid.
If the column width is enough to display both full label and sorting arrow on hover/active, then:
- on hover is displayed an up arrow (indicating that the column is sortable) at gray.600 and the column label changes to gray.900. If we have filtering row inactive, the sorting action is triggered on click on the whole column header cell.
Filtering row is inactive, sorting is idle.
Filtering row is inactive, sorting is on hover.
On inactive filter row, on hover, the up/down arrow is at gray.600 and label is at gray.900
Filtering row is inactive, sorting is applied.
On inactive filter row, on applied sorting the up/down arrow is at secondary.500 and label is at gray.900
- If we have filtering row active, the sorting action is triggered on click only on the icon.
Filtering row is active, sorting is idle.
Filtering row is active, sorting is on hover.
On active filter row, on hover the up/down arrow is at gray.600 and label is at gray.900
Filtering row is active, sorting is applied.
On active filter row, on applied sorting the up/down arrow is at secondary.500 and label is at gray.900
If the width of the column is not enough to display the full column label and the sorting arrow, then:
- when sorting can be performed but is not applied, on hover state is displayed the column label partially plus a sorting up arrow (indicating that sorting can be applied); column label is at gray.900, up arrow is at gray.600