Page MenuHomePhabricator

Flagged (progressive/destructive) mw-ui buttons in Flow become illegible on hover
Closed, ResolvedPublic

Description

Because of 67db4584a1d83ace1e61e333c1c937caf4d0c386 (which claims to be based on the design spec at M31), some of our mw-ui buttons now get dark backgrounds on hover that make their text almost illegible.

mw-ui-eww.png (155×238 px, 7 KB)

mw-ui-eww2.png (260×198 px, 12 KB)

mw-ui-eww3.png (315×208 px, 11 KB)

Event Timeline

Catrope assigned this task to Pginer-WMF.
Catrope raised the priority of this task from to Needs Triage.
Catrope updated the task description. (Show Details)
Catrope added subscribers: Catrope, Prtksxna.
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I hope that's unintentional. Looks like the text isn't properly inverted on hover. @Prtksxna

These definitely don't look good after the change. It is not clear if the spec change involves the deprecation of quiet buttons (and we need to find an alternative) or if the changes of the styling affected them by accident. Checking the living style guide, I'd assume the later.

A useful thing to prevent future regressions would be to have a collection of UI examples (inspired on real pieces of UI). That would allow to catch issues that may be hard to identify when looking at individual widgets in isolation. Not sure if the UI-Standardization team has thought of something along those lines.

Checking the living style guide, I'd assume the later.

It's not living and it's not the guide.

A useful thing to prevent future regressions would be to have a collection of UI examples (inspired on real pieces of UI). That would allow to catch issues that may be hard to identify when looking at individual widgets in isolation. Not sure if the UI-Standardization team has thought of something along those lines.

We did. It's here: https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-vector-ltr ; this is the exact point about moving to OOUI.

It's not living and it's not the guide.

That was the last bookmark I had. I may have missed the update of location. Can anyone indicate where is the updated version of the guide?

We did.

The page you linked show a bunch of individual widgets (similar to the one I pointed above minus the descriptions on when to use them). Having a catalog of the individual widgets is something really good, but I was referring to examples combining them so that they allow to identify how they fit together when there are changes.
Is this expected to be extended with info about UI patterns, when to use each component and patterns, etc. to become the new design guide?

It's not living and it's not the guide.

That was the last bookmark I had. I may have missed the update of location. Can anyone indicate where is the updated version of the guide?

I meant more that I shared your disappointment that it wasn't being kept up-to-date, and it's yet to be agreed by all our designers as "the guide". If you look at RecentChanges there you'll see how dead it is. :-(

We did.

The page you linked show a bunch of individual widgets (similar to the one I pointed above minus the descriptions on when to use them). Having a catalog of the individual widgets is something really good, but I was referring to examples combining them so that they allow to identify how they fit together when there are changes.
Is this expected to be extended with info about UI patterns, when to use each component and patterns, etc. to become the new design guide?

Oh, no, that's what the LSG was meant to be, but without a lot of work I worry it won't ever get there.

I meant more that I shared your disappointment that it wasn't being kept up-to-date

Ok. Sorry, I misunderstood.

Catrope triaged this task as Unbreak Now! priority.Jul 23 2015, 12:37 AM
Prtksxna added a subscriber: Pginer-WMF.

Sorry, this was an oversight on my part. I generate the KSS documentation locally to test changes, but didn't notice this regression

I have a patch ready, but facing some issues with Gerrit. Will upload as soon as I can.

Still having problems with Gerrit

Change 226485 had a related patch set uploaded (by Legoktm):
mw.ui: Fix broken hover state on quiet buttons

https://gerrit.wikimedia.org/r/226485

Change 226485 had a related patch set uploaded (by Legoktm):
mw.ui: Fix broken hover state on quiet buttons

https://gerrit.wikimedia.org/r/226485

This is @Prtksxna's patch.

Change 226485 merged by jenkins-bot:
mw.ui: Fix broken hover state for quiet buttons

https://gerrit.wikimedia.org/r/226485

It's not living and it's not the guide.

That was the last bookmark I had. I may have missed the update of location. Can anyone indicate where is the updated version of the guide?

I meant more that I shared your disappointment that it wasn't being kept up-to-date, and it's yet to be agreed by all our designers as "the guide". If you look at RecentChanges there you'll see how dead it is. :-(

We did.

The page you linked show a bunch of individual widgets (similar to the one I pointed above minus the descriptions on when to use them). Having a catalog of the individual widgets is something really good, but I was referring to examples combining them so that they allow to identify how they fit together when there are changes.
Is this expected to be extended with info about UI patterns, when to use each component and patterns, etc. to become the new design guide?

Oh, no, that's what the LSG was meant to be, but without a lot of work I worry it won't ever get there.

@Jdforrester-WMF I second, that there's work needed and you're right, that there hasn't been lot of changes in the last 30 days, but I can assure you, that @violetto and myself (the only ones in roles dedicated explicitly to UI Standardization currently) are trying to put that on a speedier track again.

Thanks @Prtksxna for the quick fix, and @Volker_E for the update.

Change 226588 had a related patch set uploaded (by Catrope):
mw.ui: Fix broken hover state for quiet buttons

https://gerrit.wikimedia.org/r/226588

Change 226588 merged by jenkins-bot:
mw.ui: Fix broken hover state for quiet buttons

https://gerrit.wikimedia.org/r/226588

This accidentally made it into wmf15, so it was live on Wikipedias for about half an hour until I cherry-picked @Prtksxna's fix.