Page MenuHomePhabricator

Add SortVertical icon to OOUI and Codex
Closed, ResolvedPublic2 Estimated Story Points

Description

Background & Goal

  • Description: The Codex's Table component will provide the ability to sort its content (T303320). Sorting allows users applying a descending or ascending order to the data contained by the table based on the contents of a specific column.
  • History: Growth experiments needs a Codex replacement for the sort icon that they created for the Mentee overview table in order to remove dependencies with jquery and MW core (see T311396).
  • Known use case(s): Sorting is default table functionality. The option is present in MW tables and implemented via a CSS class (.headerSort), as well as in projects like the Mentor Dashboard.
  • Considerations:

User stories

As a system designer / developer, I would like to have access to a standard vertical sort icon so that I can use it to enable sorting functionality in the new Codex table component.

As a designer / developer, I would like to have access to a standard vertical sort icon so that I can use it to enable sorting functionality in Vue tables.

Considerations (Optional)

Open questions

Proposal

The proposal is to create a new 20px size SortVertical icon. The 16px size of the Sort icon will be included in headings within the Codex table component in order to indicate that sorting is available for a specific column:

Screenshot 2024-03-19 at 14.10.38.png (894×1 px, 47 KB)

Design spec

SVG icon

Acceptance criteria for Done

Design

  • The design of the new icon is ready, and it follows our icon system guidelines
  • The new icon has been reviewed with help from the DST
  • The icon is recognizable on low DPI resolutions
  • The icon has been exported as an optimized SVG and added to this task’s description
  • The new icon has been included and published in our Icon System Figma library

Code

  • Add icon to Codex
  • Add icon to OOUI

Documentation

Event Timeline

  • I'm unsure whether we need to include this icon in OOUI. Any clarity here would be appreciated.

We do for completeness and to keep them perfectly in sync in order to not cause questions when people stumble from one to another and suddenly finding gaps.

Sarai-WMDE renamed this task from Add Sort icon to Codex to Add Sort icon to OOUI and Codex.Nov 8 2023, 6:58 PM
Sarai-WMDE updated the task description. (Show Details)

Note, that the double arrows need to fit into the 20px canvas, which means the height is limited, so 12px might be too small to fit both in height with distance gap. Also I think the gap should be tried to be more than 1px in order to make it easier recognizable.

CCiufo-WMF triaged this task as Medium priority.Mar 12 2024, 9:03 PM
lwatson set the point value for this task to 2.Mar 18 2024, 5:49 PM

Is this just one icon, or do we actually need 3?

  1. Sortable, but unsorted (both arrows)
  2. Sorted ascending (just the up arrow)
  3. Sorted descending (just the down arrow)

We could use CSS to only show the correct arrow when something is sorted, but that seems roundabout and harder to maintain than just having 3 distinct icons.

Hey @AnneT. The screenshot I just replaced was probably creating confusion. In the Table component, we'll use 3 distinct icons (in size small). The icons to indicate the ascending and descending sorting already exist in our system (cdxIconUpTriangle and cdxIconDownTriangle), that is why this task only covers the introduction of a new cdxIconSort in Codex.

The icon is currently not on a 20x20 canvas. I was amending the position, please @Sarai-WMDE control in the patch demo if this is as expected.
Also, I'd suggest to call it sortVertical, as there's a chance that we need horizontal sorting at some point too.

It wasn't clear to me from the guidelines if I had to export on a 20x20 canvas. I should have asked. Will try to export and attach again. Regarding the naming, sounds good: will update the task accordingly.

Sarai-WMDE renamed this task from Add Sort icon to OOUI and Codex to Add SortVertical icon to OOUI and Codex.Mar 19 2024, 2:38 PM
Sarai-WMDE updated the task description. (Show Details)

Change 1012691 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Add 'sortVertical'

https://gerrit.wikimedia.org/r/1012691

@Sarai-WMDE Have a look at the netlify demo first, it might be sufficient already.

@Sarai-WMDE Let me know if you're happy with Volker's patch based on this demo (search this page for "sort"). I'm happy with the patch from an engineering perspective, so if you're happy with the icon design, tell me and I'll merge the patch, or feel free to +2 Volker's patch yourself.

Change 1012691 merged by jenkins-bot:

[design/codex@main] icons: Add 'sortVertical'

https://gerrit.wikimedia.org/r/1012691

Change #1013577 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] icons: Add 'sortVertical' to 'movement' pack

https://gerrit.wikimedia.org/r/1013577

Change #1013577 merged by jenkins-bot:

[oojs/ui@master] icons: Add 'sortVertical' to 'movement' pack

https://gerrit.wikimedia.org/r/1013577

Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)

Change #1016452 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v1.3.5 to v1.3.6

https://gerrit.wikimedia.org/r/1016452

Change #1016452 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.3.5 to v1.3.6

https://gerrit.wikimedia.org/r/1016452

Change #1017120 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update OOUI to v1.2.34

https://gerrit.wikimedia.org/r/1017120

Change #1017120 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.49.1

https://gerrit.wikimedia.org/r/1017120