Skip to content

Sorting Specification

Danail Marinov edited this page Nov 29, 2018 · 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

As a developer, I want to:

  • be able to display a clear sorting indication (down arrow on hover over the column name label) for columns on which sorting can be applied
  • be able to apply changes on the column name label style when the column is being sorted

As an end user, I want to:

  • know on which columns I can apply sorting
  • know which columns are currently sorted/unsorted

If the column width is enough to display both full label and sorting arrow on hover/active, then:

  • on hover is displayed a down arrow (indicating that sorting can be performed) at gray.600 and the column label changes to gray.900
  • on active both up/down arrow 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 down arrow (indicating that sorting can be applied); column label is at gray.900, down arrow is at gray.600

  • when sorting is being applied - on active state the column label is maximum displayed, without a sorting arrow (even sorted), but the column label is changed to gray.900; on hover is displayed the column label partially plus a sorting up/down arrow (down or up arrow depends on the last performed sorting), both at gray.900

Screen-Shot-2018-11-29-at-11-46-51-AM

Clone this wiki locally