This is a tracking bug for cases where the styling for MediaWiki UI buttons and OOjs UI buttons are out of sync
- Mentioned In
- rGOJU626d1fe95f32: Button styles between OOJS and MW
rMW3efd6ef5fdd9: mw.ui: button: Update focus state
rGOJUdecce3bd7651: Syncing some button styles with MediaWiki UI
rMW91952ecbcc23: Text color for quiet buttons should not be lightened
T88483: Disabled button style not right
- Mentioned Here
- T122014: Convert all extensions/skins to OOUI
T145493: Some buttons in mobile interface don't indicate clickable target with pointer
T88483: Disabled button style not right
disabled buttons - The disabled buttons in OOJS UI are difficult to read. They should probably adopt mediawiki-ui's disabled style.
@kaldari I am working towards solving these inconsistencies. some of the buttons are being used in VE currently* which can be avoided by fixing interface issues. I might need some help before I submit the patch. if you are free, let me know. we can have a quick discussion.
*so removing them is not an option
I think @violetto might be the right person to answer the question. I am only taking care of the implementation. There are places where the design specification is being updated, and I haven't updated either mw.ui (the less files) or the MediaWiki Theme of OOjs UI so that efforts aren't duplicated.
If there is a particular implementation detail you want resolved I am happy to get that done.
constructive, destructive, progressive buttons - Which styles do we want to use?
Like @Nirzar mentioned, ButtonWidget (progressive), ButtonWidget (constructive), and ButtonWidget (destructive) are currently being used by VE in a few ways. These don't exist within mw.UI. Nirzar and I are working towards solving this one.
frameless constructive, destructive, progressive buttons - Which styles do we want to use?
We've already started work on making this consistent with mw.UI. If you can help @Nirzar & I submit the patch, it'll be super.
standalone icon buttons - much smaller in OOJS UI, we probably need two different size options, as mobile needs larger icons.
This is not up to spec with mw.UI but we're working towards that early this week.
Had a good meeting with May and Nirzar. Here are some notes from the meeting:
- The styles for constructive, destructive, and progressive buttons now seem to be in sync, so we don't have to worry about that
- The colors for frameless buttons are wrong in both OOjs UI and MediaWiki UI. The colors should be: #347bff (blue), #00af89 (green), #d11d13 (red), #555 (regular grey), #ccc (disabled grey)
- The specs for icon buttons are still being finalized, so we should just avoid mixing OOjs and MediaWiki UI icon buttons in the same interface for now.
I'm going to go ahead and submit some patches for fixing the frameless button colors.
The remaining issues are:
- Button sizes still differ - For now we have agreed to reduce the size of MediaWiki UI buttons to match the size of OOjs UI buttons and to explicitly declare a line-height of 1.5 for both. Currently OOjs UI buttons have a declared line-height of 1.9em and MediaWiki UI buttons have no declared line-height. This will necessitate padding changes to both versions.
- Icon sizes still differ - The specs for this are still being worked on by design.
Really we need a stop gap solution until OOJS UI is used more widely otherwise we are just irresponsibly creating even more inconsistencies between our projects. @Ricordisamoa I must say I find your comment somewhat rude (not sure if it was meant that way). Mediawiki ui despite its obvious shortcomings, is hardly evil, it helped a bunch of teams design more consistently (at one point we had about 6 different types of design for the same buttons). It was a learning experience and it was a cheap way to do this whilst everyone bickered about which language to use and OOJS UI was still in its infancy (when mobile began OOJS ui was just beginning to be built).
Now OOJSUI is more mature and the accepted solution we have a new problem which is porting over large codebases to use it. This is a big undertaking - in some teams this will require a huge rewrite. In mobile we have considerations for example on the client side code we ship to users.
I've talked in the past with @TrevorParscal about having a lighter version of OOJS UI - e.g. just covering the elements in mediawiki ui - buttons, icons, inputs, anchors and programmatically create the widgets without needing to care about the stylesheet. I wonder if this is the way forward now?