Page MenuHomePhabricator

Come up with a better "active" (selected) state for buttons and especially button groups
Closed, ResolvedPublic8 Estimated 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.

T136590 Active-ToggleButton-State OOjs UI Demos 2016-03-02.png (43×368 px, 5 KB)

Proposed with overhauled color palette:

T136590 ButtonSelectWidget active state - OOjs UI Demos 2016-09-09.png (47×394 px, 4 KB)

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?

Event Timeline

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.

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.

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

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