Come up with a better "active" (selected) state for buttons and especially button groups
Closed, ResolvedPublic8 Story Points


The current OOUI/M101 button design has "active" (on an otherwise un-flagged button) as a dark grey, which feels a bit too negative/disabled to me. Indeed, it's not clear to me that distinguishing between the current disabled and stylings is accessibility-compliant.

Proposed with overhauled color palette:

After T107953: Use progressive for selected states in OOUI toolbars shows the way with toolbars, maybe use of colour to show selected state more generally is for what we should aim?

Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptMay 30 2016, 9:35 PM

M101 doesn't have a design for an active (pressed) button, which we use e.g. for the selected option in a ButtonSelectWidget. It has a design for :active button, which in CSS parlance means the brief moment between when the user presses the mouse button down and lets go of it when clicking a button.

That said, I agree, our current styling for this in MediaWiki theme is quite awful. Apex theme does this a lot better.

matmarex removed a subscriber: matmarex.May 30 2016, 9:57 PM

I don't see those two states necessarily separate from each other. I think it would make sense trying one visual appearance, that is stronger separated from disabled state for both, CSS :active and selected/on state of button in ButtonSelectWidget or ToggleButtonWidget.

Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.May 31 2016, 8:00 PM
Volker_E updated the task description. (Show Details)Aug 29 2016, 6:53 PM

Change 309483 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Enhance button styles and align them to new color palette

Jdforrester-WMF moved this task from Backlog to OOjs-UI-0.17.9 on the OOUI board.Sep 9 2016, 12:06 AM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.17.9); removed OOUI.
Volker_E updated the task description. (Show Details)Sep 9 2016, 11:50 PM
Jdforrester-WMF closed this task as Resolved.Sep 9 2016, 11:50 PM
Jdforrester-WMF removed a project: Patch-For-Review.


Change 309483 merged by jenkins-bot:
MediaWiki theme: Enhance button styles and align them to new color palette