Pajamas Icon: Table Sort
Problem
I'm working on table sort interaction #770 (closed) and need an icon to use inline with table headers.
- I'm trying to re-use existing shapes as much as possible
- I've added transparency to some variations - don't know how good of an idea that is...
- Icon is hidden until
on-hover
over the header cell / Whenactive
- icon remains visible - I'm not much of a visual designer so any feedback or ideas would be appreciated!
Solution
on-hover |
sort down |
sort up |
---|---|---|
I've also created the full directional arrow set...
icn/arrow-down |
icn/arrow-up |
icn/arrow-left |
icn/arrow-right |
---|---|---|---|
Example(s)
Unused options
state | var 1 | var 2 | var 3 | var 4 | var 5 | var 6 |
---|---|---|---|---|---|---|
on-hover |
||||||
active-highestToLowest |
||||||
active-lowestToHighest |
Checklist
Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the icon contribution guidelines.
-
Author: Create a Sketch file in your progress folder just for this icon. -
Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person. -
Reviewer: Review and approve icon in the author's personal Sketch file, according to the workflow. -
Author: Add icon to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process. -
Author: Ask the reviewer to review icon in the Sketch UI Kit files. -
Reviewer: Review and approve icon in the Sketch UI Kit files, according to the workflow. -
Author: Create an issue in the SVGs library to add the icon. Mark it as related to this issue. -
Author: Create a new MR and follow the necessary steps to add the icon to the SVGs library. -
Assign the MR to a maintainer of the project for review.
-
-
Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of the new icon, linking to this issue.
Links / references
Edited by Nick Post