WordPress.org

Making WordPress.org

Opened 4 months ago

Last modified 7 days ago

#5014 new enhancement

Add icon names to under dashicons so I can search using my browsers Ctrl + F function.

Reported by: dufresnesteven Owned by:
Milestone: Priority: normal
Component: Developer Hub Keywords: needs-design needs-design-feedback
Cc:

Description (last modified by dd32)

On https://developer.wordpress.org/resource/dashicons/, add a label under the icon so I don't need to find the filter input and search there.

My expectation is that I can just use CTRL + F and type in "comments" and my browser will find any associated icons and jump me to that section on the page.

Example: https://themes-pixeden.com/font-demos/7-stroke/

Attachments (4)

icon_resize.png (138.3 KB) - added by dufresnesteven 4 months ago.
Here's a quick attempt at a larger item in the grid.
5014.diff (39.9 KB) - added by dufresnesteven 2 months ago.
Adds the icon name under the icon.
Screen Shot 2020-03-25 at 9.40.46 AM.png (250.3 KB) - added by dufresnesteven 2 months ago.
Current Layout
Screen Shot 2020-03-25 at 9.41.11 AM.png (262.9 KB) - added by dufresnesteven 2 months ago.
Updated in Diff.

Download all attachments as: .zip

Change History (11)

#1 @dd32
4 months ago

  • Description modified (diff)

The page is pretty space constrained due to the number of icons being displayed, and the small size of them.

Some of the class names are fairly long too, for example dashicons-welcome-add-page and dashicons-buddicons-buddypress-logo

The Filter box allows you to search the dashicons though.

edit: I'll mention that I've had the same problem a number of times, and have resorted to view-source and scrolling through the icons and their CSS classnames in order to figure out what an icons name is

Last edited 4 months ago by dd32 (previous) (diff)

#2 @dufresnesteven
4 months ago

Yeah, the namespace does make it challenging.

A bit of research notes for discussion:

Dashicons: https://developer.wordpress.org/resource/dashicons/

  • Emphasized Sections
  • Icon Container ( 68x68 )
  • 13 icons per line @ 961px ( this being our desktop breakpoint )

Material Design Page: https://material.io/resources/icons/?style=baseline

  • De-emphasize section
  • Icon container ( 96x104 )
  • 10 icons per line @ 961px

7 stroke Page: https://themes-pixeden.com/font-demos/7-stroke/

  • No sections
  • Icon containers ( 86 x 86 )
  • 11 icons per line @ 961px

Font Awesome: https://fontawesome.com/icons?from=io

  • No sections
  • Icon containers ( 134 X 64 )
  • 7 icons per line @ 961px

Thoughts/Suggestions

  • We appear to have smaller icon containers than the others. We could create more room for our longer classes by having less icons per line.
  • Based on the other tools, we may not need to separate out the icons into sections for readability. They all seem to have not went that route (not sure if that's better or worse UX).


@dufresnesteven
4 months ago

Here's a quick attempt at a larger item in the grid.

#3 @dd32
4 months ago

Thanks for the follow up @dufresnesteven!

I think if we were to drop the dashicons- prefix from the displayed text (I think it's pretty fair that you'd want to copy it from the above section) it'd look nicer.

I agree, that'd be a nice change that I didn't think would really be viable. I think it's worth trialing with the actual dashicon names and going from there :)

#4 @coffee2code
3 months ago

  • Component changed from General to Developer Hub

@dufresnesteven
2 months ago

Adds the icon name under the icon.

#5 @dufresnesteven
13 days ago

  • Keywords needs-design-feedback added

#6 follow-up: @ryelle
12 days ago

There have been some icons added since the patch was created, so it doesn't apply cleanly anymore.

It would be nice for the label underneath to be human-friendly, like "WordPress", "WordPress (alt)" instead of wordpress, wordpress-alt. Also, the extra phrases in the div content (that were hidden) were also used for searching, so typing in "language" brings up the translation icon— we should keep that functionality.

#7 in reply to: ↑ 6 @dufresnesteven
7 days ago

Replying to ryelle:

Also, the extra phrases in the div content (that were hidden) were also used for searching, so typing in "language" brings up the translation icon— we should keep that functionality.

Yep, definitely. Missed that.

Note: See TracTickets for help on using tickets.