Add a basic icon typeahead
ClosedPublic

Authored by chad on Thu, Feb 2, 6:48 PM.

Details

Summary

Fixes T11971, adds a basic typeahead for selecting an icon.

Test Plan

Diff Detail

Repository
rP Phabricator
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
chad created this revision.Thu, Feb 2, 6:48 PM
chad edited the test plan for this revision. (Show Details)Thu, Feb 2, 6:53 PM
epriestley accepted this revision.Fri, Feb 3, 1:36 PM

This UX seems a bit questionable to me, to the point where replacing a 16-up icon picker with this might actually be a worse experience because it's so hard to find anything relevant, even though you have more stuff to choose from?

Since I know they exist I could open the list on FontAwesome or UIExamples in another tab, find what I'm looking for, then search for it in this UI -- but users may not know to do that.

Beyond having many icons which users are almost certainly very very rarely interested in selecting (many brand icons, including some like fa-vine, which Twitter has shut down), there are also a lot of duplicates, like fa-y-combinator and fa-y-combinator-square and fa-yc-square. Allowing users to select duplicates might lead to problems with "search by icon", like we currently have in Projects. If fa-y-combinator, fa-y-combinator-square and fa-yc-square are three different icons, they might be three different queries if no part of the selection or search logic knows how to deduplicate them.

src/applications/macro/typeahead/PhabricatorIconDatasource.php
14 ↗(On Diff #41610)

I believe the datasource won't work if the paired application is uninstalled, and installs may reasonably remove Macro.

Maybe put this in Files instead (which can not be uninstalled).

This revision is now accepted and ready to land.Fri, Feb 3, 1:36 PM
chad added a comment.Fri, Feb 3, 3:28 PM

This UX seems a bit questionable to me, to the point where replacing a 16-up icon picker with this might actually be a worse experience because it's so hard to find anything relevant, even though you have more stuff to choose from?

I don't think I said that anywhere. This is simple enough to deploy as an option on the icon-picker if the user wants more, though I wasn't planning on using it anywhere other than Badges right now for testing. Pick from our wonderful collection or assign your own.

There are pros and cons to both search and browse interfaces. I'm not too concerned though with this typeahead interface, since it's reasonably defined. When I go to FontAwesome to find something, I start with a few Command-F guesses and they usually hit. I think people who say, I know what I want and it's not in your 16, will be better served here.

I don't know we need these for Projects, if that's your main concern.

Yeah, major concern is how this sets us up for projects. The existence of that task is why I thought this was headed toward projects soon-ish.

I also assumed the 16-up was getting replaced by this rather than supplemented.

I imagine the UI we'd truly prefer for this is something closer to the Slack emoji picker screenshot in T12139 (i.e., group and categorize icons, sort similar icons together, show lots of icons on one screen, sort default/popular/recent icons to the top)? But maybe "16-up + escape hatch to get a typeahead" or whatever is a reasonable step toward that without needing to actually build it.

The existence of that task

Er, "that task" being T11974.

chad added a comment.Fri, Feb 3, 4:12 PM

I dug around font awesome source and they don't currently more metadata but I can file a request for it in version 5

I don't mind just writing the metadata by hand, although I'd vaguely like to come up with an approach on "translatable lists which may have different lengths in different languages" first. I'm leaning toward just using newlines as a delimiter or something, though.

chad added a comment.Fri, Feb 3, 4:30 PM

FA 5 will have category packs and they just invited us to secret repo / tracker for our donation.

This revision was automatically updated to reflect the committed changes.
chad added a comment.Fri, Feb 3, 5:19 PM

I think it works reasonably out of the box, fwiw.

I think it's perfectly fine if you know you're looking for an icon for a book.

If you want an icon for a scotch tasting, maybe you search "scotch", "drink", "whiskey", "whisky", "cup", "mug", "flagon", "stein", "party", "fun" -- none of which give you any hits -- and then give up and pick because whatever, and go tweet about how Phabricator sucks.

But maybe that won't be an issue in practice.