| Sgs | |
| Jun 27 2022, 10:06 AM |
| F35280612: Screenshot 2022-06-27 at 12.02.23.png | |
| Jun 27 2022, 11:43 AM |
The current version of the mentee overview table sort icons is imported from jquery.tablesorter.styles which creates a dependency with jquery and MW core. See code occurrences.
We should find a Codex icon or combination of icons that can fit this table use case so we can remove the dependency.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | Sgs | T296646 [Epic] Migration of front-end modules to Vue.js components | |||
| Open | None | T297763 Migration of Mentor dashboard modules to Vue | |||
| Resolved | Sgs | T300532 Migration of mentee overview to Vue | |||
| In Progress | Sarai-WMDE | T303320 Table: Add Table component to Codex | |||
| Resolved | Volker_E | T350477 Add SortVertical icon to OOUI and Codex | |||
| Open | None | T311396 Find replacement for the mentee overview table sort icons |
It seems to me that it would be good to replace this icon in regular sortable tables as well. We have cdxIconDownTriangle and cdxIconUpTriangle, and just need to create cdxIconDownTriangle + cdxIconUpTriangle icon.
It doesn't sound like you're proposing altering either the Codex or OOUI libraries (https://doc.wikimedia.org/codex/main/icons/all-icons.html and https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons show these), so untagging them.
Apologies if the writing is not correct. I'm exactly proposing to add an icon for this in Codex. At the time of writing the issue I could not find docs for adding a new icon to Codex, I see now there's a guide for it. I think we could use IconDown + IconUp to create the icon as @Iniquity is suggesting.
I explored the available options and I think creating an svg file that contains both triangles makes sense to simplify the logic for the display of the three typical sorting states (ascending, descending, neutral).
Explored options:
Has this icon enough general purpose to be added to Codex? What do you think @Jdforrester-WMF ?
Change 829854 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):
[mediawiki/extensions/GrowthExperiments@master] Mentee overview(vue): use codex icons for the sorting handler
Change 829855 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):
[mediawiki/extensions/GrowthExperiments@master] Mentee overview(vue): add upDownTriangle icon for the sorting handler
Commenting with @kostajh on this matter, it seemed convenient and general purpose enough to add an "upDownTriangleIcon" to Codex. Same as in upDownTriangleIcon.js but using an svg file instead. Does that make sense to the Design-System-Team?