WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#32244 closed enhancement (fixed)

Introduce notice class for notices that are on a white background

Reported by: paulwilde Owned by: helen
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.2.1
Component: Administration Keywords: has-patch
Focuses: ui Cc:
PR Number:

Description

The notice that is used to notify a user that a theme update is available seems like a nice use for notices on white backgrounds.

This patch does the following:

  • Introduce .notice-alt which adds a light background to the notice and makes the notice work better on a white background. This works with all 4 notice colours (success, warning, error, info). I've attached a screenshot which shows all different variations.
  • Introduce .notice-large which adds padding to the notice.
  • Introduce .notice-title which styles the title used on the theme notice so that it aligns nicely.
  • Removes all the .theme-update-message CSS that styles the notice on the theme modal popup. We're opting for reusable OOP CSS here.
  • Moves .error a and .updated a into the same section as the Notifications styles to keep things organised.
  • Added .notice-alt to the plugin modal notices as they are on a white background.

Here's a screenshot of the plugin modal with the before and after notice:

https://s3.amazonaws.com/f.cl.ly/items/0v3Q0f0d1b2l3h1Y432Y/plugin-notices.png

Here's a screenshot of the theme modal with the before and after notice (I opted for orange as it's more of a warning than an error):

https://s3.amazonaws.com/f.cl.ly/items/0L1t3h0b1c3A473z3608/theme-notices.png

And lastly here's a screenshot of all possible sizes and variations of the new class:

https://s3.amazonaws.com/f.cl.ly/items/1r1o2Q2l062M3M2S1d45/notices.png

Attachments (14)

notices.png (127.2 KB) - added by paulwilde 5 years ago.
notice-classes.diff (4.4 KB) - added by paulwilde 5 years ago.
notice-classes.2.diff (5.4 KB) - added by paulwilde 5 years ago.
notices.2.png (34.4 KB) - added by paulwilde 5 years ago.
notices.3.png (112.1 KB) - added by paulwilde 5 years ago.
notices.diff (5.3 KB) - added by paulwilde 5 years ago.
notices.2.diff (5.3 KB) - added by paulwilde 4 years ago.
plugin-modal.png (328.4 KB) - added by paulwilde 4 years ago.
theme-modal.png (302.0 KB) - added by paulwilde 4 years ago.
theme-modal.2.png (271.8 KB) - added by paulwilde 4 years ago.
media-modal-old.png (272.9 KB) - added by paulwilde 4 years ago.
media-modal-new.png (292.2 KB) - added by paulwilde 4 years ago.
media-modal-alt.png (292.2 KB) - added by paulwilde 4 years ago.
32244-extra.diff (638 bytes) - added by paulwilde 4 years ago.

Change History (38)

@paulwilde
5 years ago

#1 @paulwilde
5 years ago

  • Keywords has-patch dev-feedback added

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


5 years ago

#3 @SergeyBiryukov
5 years ago

  • Component changed from General to Administration

#4 @hugobaeta
5 years ago

@paulwilde - This would be a great opportunity to introduce the new auxiliary hues from the Design Handbook - https://make.wordpress.org/design/handbook/foundations/colors/#auxiliary-hues

I added 90% tints to each hue on my codepen so you have the correct tint for this: http://codepen.io/hugobaeta/full/RNOzoV/

Let me know if this makes sense and if you need more assistance :)

@paulwilde
5 years ago

#5 follow-up: @paulwilde
5 years ago

Makes sense, hugobaeta.

I changed the border-left and background colours to match the codepen you linked. See my attached screenshot for the changes in colours. They seem a little too muddy, but maybe that's just me. Maybe 95% would be better?

I also updated the border-left colour for the notification on the login screen and removed some duplicated and unnecessary styling whilst I was at it. I see no reason why margin-left: 0 is there, but I left it there just to be sure not to break anything.

Last edited 5 years ago by paulwilde (previous) (diff)

#6 @paulwilde
5 years ago

For a bit of real-world context, here's what they now look like inside the plugin modal:

https://s3.amazonaws.com/f.cl.ly/items/2C2d0p0g3k0C1J24462o/Screen%20Shot%202015-05-04%20at%2019.54.57.png

#7 @melchoyce
5 years ago

Are the rounded corners on the borders here intentional? They don't really fit with the overall design, especially on the left border.

One other suggestion: what if the remaining borders were slightly tinted instead of grey? The grey kind of clashes against the colored backgrounds.

Last edited 5 years ago by melchoyce (previous) (diff)

@paulwilde
5 years ago

@paulwilde
5 years ago

#8 @paulwilde
5 years ago

Replying to melchoyce:

Are the rounded corners on the borders here intentional? They don't really fit with the overall design, especially on the left border.

I basically copied the same style that was used on the theme update notification. I figured that the notification on that screen was rounded for a specific reason, so kept it like that.

I've attached a patch that removes the border-radius and removes the border. I tried with a tinted border and it did not look good. I don't think the border is really necessary with the background colour now being darker than the original patch.

#9 in reply to: ↑ 5 @hugobaeta
5 years ago

Replying to paulwilde:

They seem a little too muddy, but maybe that's just me. Maybe 95% would be better?

I agree, there are two colors that look particularly muddy: the red and green. Let me go over that codepen and tweak it a bit, and add even lighter tints for the rest. I'll ping you here when I'm done.

What @melchoyce said is what I was gonna mention as well, particularly the gray border felt out of place. Either use another tint or nothing at all.

#10 @paulwilde
5 years ago

@hugobaeta Any progress on those new colours?

#11 @paulwilde
4 years ago

Any chance of this making 4.4?

#12 @hugobaeta
4 years ago

Here's a review of the colors: (experiment on this codepen)

https://cldup.com/2zPp5mdLPA.png

The most visible change is the green, I completely redid the green in the palettes, the one there before was way too muddy in comparison to the other accent hues.

What do you think?

#13 @melchoyce
4 years ago

The update looks great on white!

#14 @samuelsidler
4 years ago

@paulwilde: Want to work on an updated patch (with the new colors)? I think this has a very good chance of making 4.4. :)

#15 @paulwilde
4 years ago

@sam - Yep, I'll get an updated patch up asap.

New colours look great btw.

@paulwilde
4 years ago

@paulwilde
4 years ago

#16 @paulwilde
4 years ago

Attached a refreshed patch including the colours from @hugobaeta's codepen.

I've also attached some screenshots that include the before/after notices for the plugin and theme modal.

The theme modal notice goes from an error colour to a warning colour. An update notice is a warning, not an error.

#17 @samuelsidler
4 years ago

This looks good to me.

@melchoyce: Everything good on the design front?

@helen: This ready for commit?

#18 @helen
4 years ago

I'm good with this, if we find more buried instances we've overlooked we can grab those as they come. Looks really good, awesome work everybody :)

#19 @helen
4 years ago

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

In 34365:

Notices: Add styles for use against white backgrounds.

These colored backgrounds can be accessed by adding the .notice-alt class to a notice.

There is also now a large version when using the .notice-large class, and a .notice-title class that is appropriate for headline text within a large notice.

props paulwilde, hugobaeta, melchoyce.
fixes #32244.

#20 @ocean90
4 years ago

  • Keywords dev-feedback removed
  • Milestone changed from Awaiting Review to 4.4

#21 follow-up: @paulwilde
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Found another instance of white-notice-on-white-background syndrome. Patch attached.

I've added some specificity due to not wanting to adjust the styling of the notice in the sidebar (media-modal-alt).

Also I believe I'm correct in saying that I cannot change the markup (and JS...) to inherit the notice-* markup due to this also being UI that can be exposed on the front-end.

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


4 years ago

#23 in reply to: ↑ 21 @helen
4 years ago

Replying to paulwilde:

Also I believe I'm correct in saying that I cannot change the markup (and JS...) to inherit the notice-* markup due to this also being UI that can be exposed on the front-end.

Yep :)

#24 @helen
4 years ago

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

In 34990:

Notices: Update one more instance of white-on-white.

Because the media modal can be used on the front-end, the CSS needs to be added here rather than using the notice classes.

props paulwilde.
fixes #32244.

Note: See TracTickets for help on using tickets.