WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#29147 closed defect (bug) (fixed)

Modal and Customizer close/previous/next icons and focus states

Reported by: helen Owned by: helen
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: General Keywords: has-patch commit dev-reviewed
Focuses: ui, administration Cc:

Description (last modified by helen)

We took some cues from the theme details modal in other places (#29012, #28655) but it's not feeling quite right in the context of the WordPress admin or our general "feel", particularly the largeness and the background color in the default scheme. Let's try smaller icons instead, along with arrows without the horizontal.

Attachments (8)

customize-misaligned-close-icon.png (9.5 KB) - added by celloexpressions 5 years ago.
29147.diff (629 bytes) - added by celloexpressions 5 years ago.
Match the panel-title coloration for hover/focus styling in the Customizer, correct customizer close icon alignment.
29147.2.diff (2.8 KB) - added by celloexpressions 5 years ago.
29147.3.diff (2.7 KB) - added by celloexpressions 5 years ago.
Use Customizer panels hover-state colors throughout.
29147.4.diff (1006 bytes) - added by helen 5 years ago.
Screen Shot 2014-09-02 at 8.11.40 AM.png (8.4 KB) - added by tollmanz 5 years ago.
Close icon misalignment
29147-alignment-fix.diff (371 bytes) - added by tollmanz 5 years ago.
Close icon alignment fix
29147.5.diff (1.5 KB) - added by celloexpressions 5 years ago.
Remove icon color change from color schemes.

Download all attachments as: .zip

Change History (30)

#1 @helen
5 years ago

  • Description modified (diff)
  • Summary changed from Modal and Customizer close and previous/next icons and focus states to Modal and Customizer close/previous/next icons and focus states

#2 @helen
5 years ago

Possible example for icon changes, please ignore the wonky spacing:

http://f.cl.ly/items/3p3c2q3d1O0R0v1J3c2m/Image%202014-08-06%20at%2010.48.19%20PM.png

Initial feedback on this came from nacin, markjaquith, koop, and myself. Soliciting feedback from MT and other designers.

#3 @celloexpressions
5 years ago

Noting that we should make the media modal consistent with whatever we end up doing here for icon sizing, coloration, and focus styling, as its (auto-focused) focus styling is really bad, re: #29012.

I do think the smaller icons feel better, unsure about other potential changes.

Related: #29021.

#4 @helen
5 years ago

#29208 was marked as a duplicate.

#5 @helen
5 years ago

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

In 29542:

Align and unify (most) modal and customizer icons. fixes #29147.

#6 @helen
5 years ago

I closed this fixed, but some notes for reference:

  • The plugins one is purposefully different, due to the banner. I don't necessarily love it, but it is not an uncommon paradigm and, since clicking the whole backdrop closes the modal, gives many users a larger target.
  • The in-post media modals (library and edit image) still use the slightly heavier X. I am open to going with the thinner one, but without the context of the other arrows and the "button" look in other modals, it seemed to stand better.
  • I did make some changes to the above so that the box shadow focus style doesn't look horribly misplaced. However, whether in this release or the next, we should probably re-evaluate and have initial focus go to an input field if at all possible, only falling back to the close button if we have to.
  • Some of these icons don't have focus styling beyond the same color change as on hover - this is less than ideal, but given keyboard navigation (escape, arrow keys), I am less concerned about it for this release.
Last edited 5 years ago by helen (previous) (diff)

#7 @celloexpressions
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Version set to trunk

This needs some more work in the Customizer. The icon is horizontally misaligned, see screenshot.

But I think we need to revert to a larger close icon here too, as with plugins. The 22px icon is way too small to really tell that it's a close icon (requires a really close look for me), and it should have hierarchy over the section and panel-expansion icons. It also feels like it should be larger to carry a similar visual weight to the save button. (all of this is also the reason it was set at that size initially). We also need to consider that this is a UI change in 4.0 - users are unlikely to react well to a text button being replaced with a tiny icon, and without the background change it's unclear that the click target is actually much larger than the icon itself. I'm okay with the smaller panel-back icon if we make my next proposed change, but not in love with it - the other type of arrow seems more intuitive to me for this particular action.

We should also make this match our panel arrow thing by changing the background color to the darker gray on hover/focus. Won't be consistent with the admin, but at least we can be consistent within the Customizer, which is front-end rather than admin context anyway, and not functionally the same as a modal. This isn't great either, and I hugely prefer the bolder use of colors that [29542] ripped out, but at least it's consistent with the panel titles. I'm working on a patch for this.

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

@celloexpressions
5 years ago

Match the panel-title coloration for hover/focus styling in the Customizer, correct customizer close icon alignment.

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

@celloexpressions
5 years ago

Use Customizer panels hover-state colors throughout.

#10 @helen
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29608:

Better visual focus syling in customizer, theme preview, and attachment details modals.

props celloexpressions.
fixes #29147.

@helen
5 years ago

#11 @helen
5 years ago

  • Keywords commit has-patch added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Noticed a couple blue glows left for these - see 29147.4.diff.

#12 @celloexpressions
5 years ago

+1 for 29147.4.diff - I had removed those at one point but they were added back at one point too so I figured you wanted them. With the current focus states, definitely better without.

@tollmanz
5 years ago

Close icon misalignment

@tollmanz
5 years ago

Close icon alignment fix

#13 @tollmanz
5 years ago

I just noticed that the close icon is misaligned in the Customizer. I have added a simple patch. I hope this is a good place to add this information and fix.

#14 @tollmanz
5 years ago

Ugh...please ignore my last comment and fix. It appears to be a plugin that was causing the issue. Carry on...

#15 @nacin
5 years ago

  • Keywords dev-reviewed added

#16 @helen
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29674:

Modals: Remove some remnant unnecessary blue glow focus styling.

fixes #29147.

#17 @helen
5 years ago

  • Keywords has-patch commit dev-reviewed removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Color schemes are still getting blue icons on hover: https://cloudup.com/cs8wqB92pBQ

@celloexpressions
5 years ago

Remove icon color change from color schemes.

#19 @celloexpressions
5 years ago

  • Keywords has-patch needs-testing added

29147.5.diff is untested but should grab them all.

#20 @helen
5 years ago

  • Keywords commit added; needs-testing removed

Looks good.

#21 @azaozz
5 years ago

  • Keywords dev-reviewed added

Looks good here too.

#22 @helen
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29697:

Modals: Remove yet more cruft that was causing unwanted coloration of icons.

props celloexpressions.
fixes #29147 (for real this time).

Note: See TracTickets for help on using tickets.