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:
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