Skip to content

Sorting Specification

Danail Marinov edited this page Jan 17, 2019 · 55 revisions

Sorting Specification

Contents

  1. Revision history

  2. Overview

  3. User Stories

  4. Functionality

    4.1. End User Experience

    4.2. User Interface

    4.3. Navigation

    4.4. API

  5. ARIA support

  6. Assumptions and Limitations

  7. Test Scenarios

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

As a developer, I want to:

  • have a clear sorting indication displayed out of the box for columns on which sorting can be applied (up arrow on hover over the column name label)
  • have ellipsis applied out of the box on the column name label when the column is too narrow and becomes sorted

As an end user, I want to:

  • know on which columns I can apply sorting
  • know which columns are currently sorted/unsorted
  • whether ascending or descending sorting is applied

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 on hover.

Sorting-inactive-row-sorting-hover

Filtering row is inactive, sorting is applied.

Sorting-inactive-row-sorting-active

  • If we have filtering row active, the sorting action is triggered on click only on the icon.

Filtering row is active, sorting is on hover.

Sorting-active-row-sorting-hover

Filtering row is active, sorting is applied.

Sorting-active-row-sorting-active

  • on active the up/down arrow is secondary.500 and label are displayed 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
Clone this wiki locally