WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#32734 closed defect (bug) (fixed)

Customiser menu item added tick icon is too small, plus icon is too big.

Reported by: paulwilde Owned by: ocean90
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: needs-patch
Focuses: ui Cc:

Description

The tick icon when you add a menu item is way too small in relation to the plus icon that it just looks bad together.

Where else in the interface is the plus and tick used? As maybe these icons can be altered slightly so they work better together. If you compare the plus icon to the cross icon (the red close ones on the left of my screenshot) the lines look twice as thick.

If the plus icon matched the cross icon in thickness and size (basically flipped 45deg), and the tick icon was made a tiny bit larger I think they would all go together nicely.

Also see #32733 for a similar issue.

Attachments (4)

small-tick-large-plus.png (55.8 KB) - added by paulwilde 4 years ago.
32734-updated-dashicons.png (26.7 KB) - added by ocean90 4 years ago.
plus.png (7.1 KB) - added by paulwilde 4 years ago.
32734-after.png (51.1 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (19)

#1 @paulwilde
4 years ago

Introducing a dashicons-plus-alt icon which has the same line thickness as dashicons-no-alt would fix this.

Although I do still feel that the tick icon (dashicons-yes) still seems a little too small when you compare it next the red crosses (dashicons-no-alt). Maybe that's just me.

#2 @afercia
4 years ago

In-browser comparing some of the related icons. Also, the plus icon vertical alignment could be improved.

https://cldup.com/yDTDcFTpUm.png

Although I do still feel that the tick icon (dashicons-yes) still seems a little too small

+1 :)

#3 @celloexpressions
4 years ago

  • Keywords needs-patch added

Again, this would probably need to be fixed by modifying the dashicons (could maybe just use a rotated thin x icon though). The plus icon feels way too heavy to me; ideally we'd lighten that up and size it down. I suppose the check could be a bit larger, but it works much better right now (looks like the vertical alignment is a bit off relative to the menu item title, though). Ideally the plus icon should use the darker color to match the text of un-added menu items also, but with the current icon that's way too heavy. @melchoyce - any thoughts here?

#4 @melchoyce
4 years ago

Also, the plus icon vertical alignment could be improved.

Unfortunately, it can't be improved without either converting Dashicons to svg so it's not confined to a specific grid (which we're in the process of trying), making the icon unevenly sized, or using half-pixels to visually align the icon to the center of the grid, thus rendering it blurry.

@melchoyce - any thoughts here?

Not really sure what the best course of action is. We could make a new icon, but then we're just continuing to add more to the font when the real problem is that font anti-aliasing limits icon resizing. Going to call in @empireoflight since he's both the original designer of Dashicons and significantly more experienced than I am at this. :)

#5 @EmpireOfLight
4 years ago

We made the plus sign thinner and f132 was updated on the dashicons repo:
https://github.com/melchoyce/dashicons

Not sure why it didn't make it into the latest WP version though. We should revisit this after the thinner + gets added in.

#6 @celloexpressions
4 years ago

  • Milestone changed from Awaiting Review to 4.3
  • Type changed from enhancement to defect (bug)

Can we get that icon change in? What's holding it up?

#7 @EmpireOfLight
4 years ago

Waiting for approval on the latest round of icons based on these tickets:

https://core.trac.wordpress.org/ticket/30902
https://core.trac.wordpress.org/ticket/32678

I did make the check icon slightly larger, but hardly noticeable. The latest plus is thinner.

This ticket was mentioned in Slack in #core by ocean90. View the logs.


4 years ago

This ticket was mentioned in Slack in #core by jorbin. View the logs.


4 years ago

#10 @ocean90
4 years ago

Both icons have been updated in [33108], see 32734-updated-dashicons.png. Since the plus icon now aligns we have to update the top values.

@paulwilde
4 years ago

#11 @paulwilde
4 years ago

The new plus icon has uglified the "Add Items" button dashicon. The length of the lines also seem longer when compared against the red cross icons.

I think introducing another alternative would of been better rather than trying to fit 1 icon into everything. See ticket:30902#comment:34 for reference.

What I'd suggest is the following:

  • Revert dashicons-plus to its old version.
  • Introduce a dashicons-plus-alt which has the same line thickness and length as dashicons-no-alt. Basically dashicons-no-alt flipped 45 degrees.
Last edited 4 years ago by paulwilde (previous) (diff)

This ticket was mentioned in Slack in #design-dashicons by paulwilde. View the logs.


4 years ago

This ticket was mentioned in Slack in #design-dashicons by liljimmi. View the logs.


4 years ago

#15 @ocean90
4 years ago

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

In 33152:

Customizer: Replace the plus icon for #available-menu-items .item-add with a thinner one, see [33126].

fixes #32734.

@ocean90
4 years ago

Note: See TracTickets for help on using tickets.