Page MenuHomePhabricator

[Design Spike] Explore adding yellow talk page message banner to non-main namespace pages on mobile
Open, MediumPublic0 Estimated Story Points

Description

Background

In T240889: Mobile IP editors not given any indication that they have new messages there was a request to create a notification for anonymous editors when a message is left on their talk page. We would like to explore designs for what this message would look like on mobile for pages outside of the main namespace.

Event Timeline

ovasileva triaged this task as Medium priority.
ovasileva added a subscriber: MMiller_WMF.

here is how it currently looks on desktop:

image.png (670×2 px, 466 KB)

regarding the background-color: since it doesn't yet exist on mobile we can choose to do something a bit more aligned with our style guide. @Volker_E & @RHo which color would be most appropriate for this kind of notice?

image.png (1×2 px, 651 KB)

So far we have just separated into four different 'message to user' categories roughly described as success – warning – error – notice. “Warning” is possibly an incomplete description, as it's a message of higher urgency to users that's not a system success feedback, but also not an error.

image.png (448×1 px, 57 KB)

The current higher attention message type aka warning features a Yellow90 background, Yellow50 1px border, no border-radius and Base0 color. (The components overview featured a minor mistake here, with Base10 as color, Base0 is for all elevated, contextually, dynamically emphasized text in our interface.)

Even though it's a flushed element, I would suggest to add a border as well.

@Volker_E does this suggest we'll be changing the default styles for the message box component everywhere? Both Minerva and Vector share the same styles for this component in https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/messageBoxes.less

IF we wanted this style change to be Minerva only we could potentially do that with with a few skin variables.

This is how the component currently looks on the login page for example:
https://en.wikipedia.org/wiki/Special:UserLogin

Screen Shot 2021-09-23 at 8.05.25 AM.png (916×866 px, 78 KB)