When I discussed this with Trevor, he suggested reducing the size of MediaWiki UI buttons to match the size of OOjs UI buttons. I created a patch for this (https://gerrit.wikimedia.org/r/#/c/194182/), but was then informed by design that touch targets on mobile need to be at least 44px tall, which would no longer be the case with my patch.

Here are two more ideas for solutions:

1. Have OOjs UI make their buttons larger, but reduce the font-size within the VisualEditor UI to compensate.
2. Have OOjs UI add support for a semantic class 'touch' which increases the size of buttons.

Another possible solution is to create a dedicated mobile theme for OOjs UI. The downside of this is increased maintenance cost.

I don't understand why we're not using the same properties and values everywhere for this, the stated goal and literal name of this work is "UI Standardization" from day one we said these buttons would likely look larger than the controls we've used in the past and that is ok.

As @kaldari has stated this additional complexity of having multiple variation and heights of buttons has not only led to inconsistency and additional work for teams but is actually causing an accessibility issue.

The buttons as they are displays in VE dialogs are not correct in their display height and display state (quiet, toolbar, normal, etc) resolving this issues seems like it could be at the root of the problem in this task.

@kaldari I want to strike that last comment of yours from the record ;)

@Jaredzimmerman-WMF From my conversations with Trevor, the reason MediaWiki-themed OOjs UI buttons are small is because VisualEditor has complicated interfaces that need to fit numerous elements in a small area. I'm not going to weigh in with an opinion on that, I'm just conveying what Trevor has said.

Also for Trevor's benefit (since he wasn't in the office for the conversations on Tuesday): Apparently the 44x44px minimum for touch elements is a standard introduced by Apple in their human-interface guidelines and has been widely adopted across the web. I actually hadn't heard of this standard before, but according to Google it does seem to be a thing, and apparently that's why the MediaWiki UI buttons are exactly 44px tall on mobile.

So this basically puts us back at our original impasse. Mobile needs big buttons (according to design) and VE needs small buttons (according to Trevor). Is there a way forward? Keep in mind we're only talking about a 6 pixel difference in reality.

Maybe we should override VE style in MF for everything except the VE itself?

@bmansurov it seems if MobileFontend would like to use the normal state of the controls and VE would like to use an alternative, the override seems to make more sense on the VE side than in MobileFrontend. I'd prefer to have the work effort on teams who want to make special cases rather than teams who want to use controls as intended and as designed.

@Jaredzimmerman-WMF, that makes sense. Currently we are not able to merge some of our patches because of this problem. If VE team can handle it fast then I'm all for it.

This patch will solve this task cc: @Prtksxna @kaldari

https://gerrit.wikimedia.org/r/#/c/194753/

Wait wait wait.

The 'specs' are in pixels? What is this, the 1980s?

The patch above was reverted by https://gerrit.wikimedia.org/r/#/c/200747/.

@Jdforrester-WMF ems translate into pixels at the end of the day, James. That's what @kaldari is talking about. It's not a spec. 44px is what we want on 1em scale, because we have touch screens in 2015.

also there is this task which will fix the height issue.
https://phabricator.wikimedia.org/T94750

Could someone more familiar with this "delicately balanced" tower of styles (as Bartosz describes it), take a look? It seems like it should be easy to change the height of a button, but the styles are so abstracted it's tricky to change one thing without breaking others.

@Jdforrester-WMF @Nirzar 44px is from the iOS Human Interface Guidelines (although apparently Apple has updated the spec to be in points now instead of pixels). Although we don't always follow their guidelines, in this case Jared wanted our buttons to conform to their recommendation for minimum button size.

@kaldari yes buttons are important interactive elements. they should be at least 44px tall.

I know we have multiple opinions on this, some backed up with guideline mentions (which we've been aware of from the start). But we'd prefer to see a standardized set of components to design spec before making further implementation changes.

32px / 2em might not be sufficient or too sufficient (I'm working to get resources to find out what 8px short of iOS guidelines means for users with @aripstra), but can we agree to stick with the design spec like we've agreed with to do with @TrevorParscal's blessings? Our components are not yet consistent, we should get them to be consistent before making further independent changes on the side, as that is our biggest concern at the moment.

Our hope is that other teams feel confident in using OOJS UI knowing that design spec is consistently implemented.

cc @Prtksxna

Where did we land with this? Will OOjs ui buttons be increasing in size?

We can match up the OOJS UI buttons to mediawiki buttons. whatever mediawiki buttons are. The patch for that got reverted because of one issue in buttons with only icons. I can try and re-write it.

Change 216864 had a related patch set uploaded (by Nirzar):
Changing the default padding for buttonWidget absolute icons

https://gerrit.wikimedia.org/r/216864

Above patch uses a different way to solve the height issue. It uses absolutely positioned icons instead of relative and uses 0.5em 1em padding for buttons so heights are equal if we keep mediawiki buttons next to this.

Change 216864 merged by jenkins-bot:
MediaWiki theme: Alter buttons' padding and position icons absolutely

https://gerrit.wikimedia.org/r/216864