| • Mattflaschen-WMF | |
| Jul 27 2017, 4:25 PM |
| F29800670: image.png | |
| Jul 18 2019, 2:49 PM |
| F29800622: image.png | |
| Jul 18 2019, 2:23 PM |
| F29800620: image.png | |
| Jul 18 2019, 2:23 PM |
| F29800635: image.png | |
| Jul 18 2019, 2:23 PM |
| F24040304: image.png | |
| Jul 24 2018, 11:10 AM |
| F24040348: image.png | |
| Jul 24 2018, 11:10 AM |
| F24040100: image.png | |
| Jul 24 2018, 11:10 AM |
| F24040130: image.png | |
| Jul 24 2018, 11:10 AM |
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.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Update OOUI to v0.33.4 | mediawiki/core | master | +81 -81 | |
| Frameless buttons should feature hover and active states | oojs/ui | master | +28 -0 |
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.
Proposal:
| Project | With background and border | With 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: https://phabricator.wikimedia.org/T198926
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
With border similar to normal ButtonWidget:
With Base80, which would imply
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
Change 524959 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.33.4
