Making WordPress.org

Opened 2 years ago

Closed 5 months ago

Last modified 5 months ago

#5014 closed enhancement (fixed)

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

Reported by: dufresnesteven Owned by: coffee2code
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 2 years ago.
Here's a quick attempt at a larger item in the grid.
5014.diff (39.9 KB) - added by dufresnesteven 22 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 22 months ago.
Current Layout
Screen Shot 2020-03-25 at 9.41.11 AM.png (262.9 KB) - added by dufresnesteven 22 months ago.
Updated in Diff.

Download all attachments as: .zip

Change History (17)

#1 @dd32
2 years 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 2 years ago by dd32 (previous) (diff)

#2 @dufresnesteven
2 years 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
2 years ago

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

#3 @dd32
2 years 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
2 years ago

  • Component changed from General to Developer Hub

@dufresnesteven
22 months ago

Adds the icon name under the icon.

#5 @dufresnesteven
21 months ago

  • Keywords needs-design-feedback added

#6 follow-up: @ryelle
21 months 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
20 months 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.

#8 @coffee2code
5 months ago

In 11196:

Developer, Dashicons: Extract Dashicons data from markup into PHP and then programmatically generate the Dashicons-related markup.

Props dufresnesteven, coffee2code.
See #5014.

#9 @coffee2code
5 months ago

In 11197:

Developer, Dashicons: Add consistency to dashicons and improve filtered search.

  • Remove parentheses from 'alt' (+ variant) keywords
  • Add 'alt' to keywords for alts that don't include it
  • Omit alt numbering in keywords
  • Add display group slug to keywords if not present
  • Add name-implied group slug to keywords if not present

See #5014.

#10 @coffee2code
5 months ago

In 11203:

Developer, Dashicons: Increase sizes for icons and captions to facilitate imminently longer captions.

  • Increase font for icons
  • Increase font for icon labels
  • Increase spacing around icons

Props dufresnesteven, coffee2code.
See #5014.

#11 @coffee2code
5 months ago

In 11204:

Developer, Dashicons: Define label text for each dashicon.

See #5014.

#12 @coffee2code
5 months ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 11206:

Developer, Dashicons: Use human-readable labels for icons instead of character codes.

Makes it clear when scanning grid what a particular icon represents and facilitates in-page (ctrl-f) browser searches for finding an icon.

  • Outputs icons as list items instead of divs
  • Reformats output markup of dashicons to avoid use of hidden text
  • Embeds keywords and character codes as data attributes
  • Preserves filtered keyword search

Props dufresnesteven, ryelle, coffee2code.
Fixes #5014

#13 @coffee2code
5 months ago

In 11207:

Developer, Dashicons: Show dashicon character code in the selected icon info panel.

See #5014.

Note: See TracTickets for help on using tickets.