Page MenuHomePhabricator

Frameless button should highlight full area when you mouseover
Closed, ResolvedPublic


Frameless buttons have a padding, so you can click outside the text and still trigger the button.

They also change the text color on mouseover of the text.

However, I think the text color should also change when you are mousing over the whitespace, since that is still part of the hover state.

Note that frameless label button is hovered

Event Timeline

I've experimented with:

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    color: #444;
    background-color: #00000011;

And it does look nice (on white).

Here I hover the constructive button.

Are you both talking about the same here @Mattflaschen-WMF & @TheDJ?
Matt, the text color already gets changed when hovering the “whitespace” belonging to the button exactly for the reason to enable hover and cursor visual feedback as the buttons (in WikimediaUI theme) receive their dimensions with a combination of text and padding (and some min-width/-height for edge cases).

For the proposal, I'm not convinced, that increased :hover visual appearance by adding background-color is necessary as we're already changing cursor & text-color, provide extra padding for mobile users and it might result in a more jarring experience.

Volker_E triaged this task as Lowest priority.Oct 24 2017, 12:47 AM
Volker_E renamed this task from Frameless button should highlight when you mouseover margin to Frameless button should highlight full area when you mouseover.Apr 10 2018, 2:44 AM
Volker_E updated the task description. (Show Details)
Volker_E raised the priority of this task from Lowest to Low.Jul 24 2018, 11:10 AM


ProjectWith background and borderWith background, without border
OOUI WikimediaUI theme
OOUI Apex theme
RCFilters (WMUI)
Save Editform (WMUI)

The background (and border) would provide a better, low-level user feedback. If one is concerned about the positioning, that's just a special case for first buttons in row and we already show focus border exposing this alignment, so there's not a change for the negative.

Background color only change seems to be useful for WikimediaUI theme, for Apex it seems not to work well with gradient only.

We can still decide about special casing appearance contextual, in Save Editform it might make sense to stay without background change at all.

@Volker_E, curious if this includes any updates to the focus states for frameless buttons?
Seems like it could potentially be related to the discussion going on here:

OOUI WikimediaUI theme

I like just the background change, it is an improvement from the current situation, but I worry if the color change is too little to be noticeable. In any case, I think we should at least make this change

With added Base90 as :hover background color on frameless, agreed with @Prtksxna that it's too little to notice

(all three buttons feature :hover state)

With border similar to normal ButtonWidget:

With Base80, which would imply

RecentChanges with all hovered frameless buttons in first proposal of Base90:

From design review earlier today, design team preference is with 3 votes pro option a) with Base90.

Change 524295 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Frameless buttons should feature hover and active states

Change 524295 merged by jenkins-bot:
[oojs/ui@master] Frameless buttons should feature hover and active states

Volker_E moved this task from Backlog to OOUI-0.33.4 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.33.4); removed OOUI.

Change 524959 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.33.4

Change 524959 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.33.4