jenkins-bot has submitted this change and it was merged.

Change subject: MediaWiki theme: Fix ButtonElement's `:active:focus` state 
visually
......................................................................


MediaWiki theme: Fix ButtonElement's `:active:focus` state visually

When the ButtonElement is using a `<button>` element, due to different
state handling by browsers, `:active:focus` can be visually irritating.
The ButtonElement shouldn't get `:focus` outline while actively
pressed. Visible example in Special:Redirect/file
Also adding ButtonInputWidget using `<button>` element demo and featuring
just one primary submit button.
Additionally removing unnecessary `.oo-ui-widget-enabled` selectors as
those mixins get called just within enabled block.

Change-Id: I8f50e3668c451b51145e0e5efe571fe584b33e62
---
M demos/pages/widgets.js
M demos/pages/widgets.php
M src/themes/mediawiki/elements.less
3 files changed, 90 insertions(+), 69 deletions(-)

Approvals:
  Bartosz Dziewoński: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 2ab84bb..c0a0285 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1451,17 +1451,8 @@
                                new OO.ui.FieldLayout(
                                        new OO.ui.ButtonInputWidget( {
                                                label: 'Submit the form',
-                                               type: 'submit'
-                                       } ),
-                                       {
-                                               align: 'top',
-                                               label: 'ButtonInputWidget'
-                                       }
-                               ),
-                               new OO.ui.FieldLayout(
-                                       new OO.ui.ButtonInputWidget( {
-                                               label: 'Submit the form',
                                                type: 'submit',
+                                               flags: [ 'primary', 
'progressive' ],
                                                useInputTag: true
                                        } ),
                                        {
@@ -1471,9 +1462,19 @@
                                ),
                                new OO.ui.FieldLayout(
                                        new OO.ui.ButtonInputWidget( {
+                                               label: 'Another button',
+                                               type: 'button'
+                                       } ),
+                                       {
+                                               align: 'top',
+                                               label: 'ButtonInputWidget 
(using <button>)\u200E'
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new OO.ui.ButtonInputWidget( {
                                                framed: false,
-                                               label: 'Submit the form',
-                                               type: 'submit'
+                                               label: 'Another button',
+                                               type: 'button'
                                        } ),
                                        {
                                                align: 'top',
@@ -1483,8 +1484,8 @@
                                new OO.ui.FieldLayout(
                                        new OO.ui.ButtonInputWidget( {
                                                framed: false,
-                                               label: 'Submit the form',
-                                               type: 'submit',
+                                               label: 'Another button',
+                                               type: 'button',
                                                useInputTag: true
                                        } ),
                                        {
diff --git a/demos/pages/widgets.php b/demos/pages/widgets.php
index b93ce11..10584d4 100644
--- a/demos/pages/widgets.php
+++ b/demos/pages/widgets.php
@@ -704,23 +704,47 @@
                new OOUI\FieldLayout(
                        new OOUI\ButtonInputWidget( [
                                'label' => 'Submit the form',
-                               'type' => 'submit'
-                       ] ),
-                       [
-                               'align' => 'top',
-                               'label' => "ButtonInputWidget\xE2\x80\x8E"
-                       ]
-               ),
-               new OOUI\FieldLayout(
-                       new OOUI\ButtonInputWidget( [
-                               'label' => 'Submit the form',
                                'type' => 'submit',
+                               'flags' => [ 'primary', 'progressive' ],
                                'useInputTag' => true
                        ] ),
                        [
                                'align' => 'top',
                                'label' => "ButtonInputWidget (using 
<input>)\xE2\x80\x8E"
                        ]
+               ),
+               new OOUI\FieldLayout(
+                       new OOUI\ButtonInputWidget( [
+                               'label' => 'Another button',
+                               'type' => 'button'
+                       ] ),
+                       [
+                               'align' => 'top',
+                               'label' => "ButtonInputWidget (using 
<button>)\xE2\x80\x8E"
+                       ]
+               ),
+               new OOUI\FieldLayout(
+                       new OOUI\ButtonInputWidget( [
+                               'framed' => false,
+                               'label' => 'Another button',
+                               'type' => 'button'
+                       ] ),
+                       [
+                               'align' => 'top',
+                               'label' => "ButtonInputWidget 
(frameless)\xE2\x80\x8E"
+                       ]
+               ),
+               new OOUI\FieldLayout(
+                       new OOUI\ButtonInputWidget( [
+                               'framed' => false,
+                               'label' => 'Another button',
+                               'type' => 'button',
+                               'useInputTag' => true
+                       ] ),
+                       [
+                               'align' => 'top',
+                               'label' => "ButtonInputWidget (frameless, using 
<input>)\xE2\x80\x8E"
+                       ]
                )
        ]
 ] ) );
diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index 52c4b3e..04171b0 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -304,19 +304,17 @@
                }
        }
 
-       &.oo-ui-widget-enabled {
-               & > .oo-ui-buttonElement-button:hover {
-                       > .oo-ui-labelElement-label {
-                               color: @hover;
-                       }
+       & > .oo-ui-buttonElement-button:hover {
+               > .oo-ui-labelElement-label {
+                       color: @hover;
                }
+       }
 
-               & > .oo-ui-buttonElement-button:active,
-               &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
-                       & > .oo-ui-labelElement-label {
-                               color: @active;
-                               box-shadow: none;
-                       }
+       & > .oo-ui-buttonElement-button:active,
+       &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
+               & > .oo-ui-labelElement-label {
+                       color: @active;
+                       box-shadow: none;
                }
        }
 }
@@ -326,25 +324,24 @@
                color: @link;
        }
 
-       &.oo-ui-widget-enabled {
-               > .oo-ui-buttonElement-button:hover {
-                       background-color: @hover;
-                       border-color: @border-color-active;
-               }
+       > .oo-ui-buttonElement-button:hover {
+               background-color: @hover;
+               border-color: @border-color-active;
+       }
 
-               > .oo-ui-buttonElement-button:active,
-               &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
-               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
-                       background-color: lighten( @active, 60% );
-                       color: @active;
-                       border-color: @active;
-                       box-shadow: none;
-               }
+       > .oo-ui-buttonElement-button:active,
+       > .oo-ui-buttonElement-button:active:focus,
+       &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
+       &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
+               background-color: lighten( @active, 60% );
+               color: @active;
+               border-color: @active;
+               box-shadow: none;
+       }
 
-               > .oo-ui-buttonElement-button:focus {
-                       border-color: @focus;
-                       box-shadow: inset 0 0 0 1px @focus;
-               }
+       > .oo-ui-buttonElement-button:focus {
+               border-color: @focus;
+               box-shadow: inset 0 0 0 1px @focus;
        }
 }
 
@@ -355,25 +352,24 @@
                border-color: @link;
        }
 
-       &.oo-ui-widget-enabled {
-               > .oo-ui-buttonElement-button:hover {
-                       background-color: @hover;
-                       border-color: @hover;
-               }
+       > .oo-ui-buttonElement-button:hover {
+               background-color: @hover;
+               border-color: @hover;
+       }
 
-               > .oo-ui-buttonElement-button:active,
-               &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
-               &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
-                       color: @color-default-light;
-                       background-color: @active;
-                       border-color: @active;
-                       box-shadow: none;
-               }
+       > .oo-ui-buttonElement-button:active,
+       > .oo-ui-buttonElement-button:active:focus,
+       &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
+       &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
+               color: @color-default-light;
+               background-color: @active;
+               border-color: @active;
+               box-shadow: none;
+       }
 
-               > .oo-ui-buttonElement-button:focus {
-                       border-color: @focus;
-                       box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px 
@color-default-light;
-               }
+       > .oo-ui-buttonElement-button:focus {
+               border-color: @focus;
+               box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px 
@color-default-light;
        }
 }
 

-- 
To view, visit https://gerrit.wikimedia.org/r/313550
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I8f50e3668c451b51145e0e5efe571fe584b33e62
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to