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

Change subject: MediaWiki theme: Refactor z-index inside 
ButtonSelectWidget/ButtonGroupWidget
......................................................................


MediaWiki theme: Refactor z-index inside ButtonSelectWidget/ButtonGroupWidget

* Remove z-index properties from ButtonElement, causes T145311.
* Create stacking context at .oo-ui-buttonSelectWidget and
  .oo-ui-buttonGroupWidget, so that we can fiddle with z-index
  for all ButtonElements inside them without causing T145311.
* Fiddle with z-index so that the fancy collapsing borders
  for the buttons inside the group display appropriately. The rules
  added here essentially mean that when borders
  of two neighbouring buttons "collapse", we prefer to keep the border of
  the active button, then focussed, then hovered, then everything
  else, then disabled.

Bug: T145311
Change-Id: If2f84721d4820d7ae73506f63e522b309e02b4f1
---
M src/styles/elements/ButtonElement.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 40 insertions(+), 12 deletions(-)

Approvals:
  Esanders: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/styles/elements/ButtonElement.less 
b/src/styles/elements/ButtonElement.less
index 269dafe..4ec67f3 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -24,14 +24,6 @@
                cursor: default;
        }
 
-       &.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
-               &:hover,
-               &:active,
-               &:focus {
-                       z-index: 2;
-               }
-       }
-
        &.oo-ui-indicatorElement > .oo-ui-buttonElement-button > 
.oo-ui-indicatorElement-indicator,
        &.oo-ui-iconElement > .oo-ui-buttonElement-button > 
.oo-ui-iconElement-icon,
        &.oo-ui-labelElement > .oo-ui-buttonElement-button > 
.oo-ui-labelElement-label {
diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index 91804b1..bb950c3 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -243,7 +243,6 @@
                                background-color: @color-progressive-active;
                                color: @color-default-light;
                                border-color: @border-color-input-binary-active;
-                               z-index: 3;
 
                                &:focus {
                                        border-color: @color-progressive-focus;
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index 80d3a92..f44df9b 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -27,8 +27,11 @@
        display: inline-block;
        white-space: nowrap;
        border-radius: @border-radius-default;
-
        .oo-ui-inline-spacing( 0.5em );
+       // Create a stacking context, so that we can use `z-index` below 
without leaking out
+       z-index: 0;
+       position: relative;
+
        .oo-ui-buttonElement {
                .oo-ui-inline-spacing( 0 );
        }
@@ -51,11 +54,25 @@
                }
        }
 
+       // Give hovered/focussed/active buttons higher `z-index`, so that 
borders display right.
+       // Identical to .theme-oo-ui-buttonSelectWidget, except for the 
`:focus` selector.
        &.oo-ui-widget-enabled {
                .oo-ui-buttonElement {
-                       .oo-ui-buttonElement-button:focus {
-                               border-color: @border-color-default-focus;
+                       &.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:hover,
+                       &.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:active {
+                               z-index: 1;
+                       }
+
+                       &.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:focus {
+                               z-index: 2;
+                       }
+
+                       &.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button {
                                z-index: 3;
+                       }
+
+                       &.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
+                               z-index: -1;
                        }
                }
        }
@@ -1327,6 +1344,9 @@
 .theme-oo-ui-buttonSelectWidget () {
        border-radius: @border-radius-default;
        .oo-ui-inline-spacing( 0.5em );
+       // Create a stacking context, so that we can use `z-index` below 
without leaking out
+       z-index: 0;
+       position: relative;
 
        &:focus {
                outline: 0;
@@ -1360,6 +1380,23 @@
                                }
                        }
                }
+
+               // Give hovered/focussed/active buttons higher `z-index`, so 
that borders display right.
+               // Identical to .theme-oo-ui-buttonGroupWidget, except we don't 
need `:focus` selector.
+               .oo-ui-buttonElement {
+                       &.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:hover,
+                       &.oo-ui-widget-enabled > 
.oo-ui-buttonElement-button:active {
+                               z-index: 1;
+                       }
+
+                       &.oo-ui-buttonElement-active > 
.oo-ui-buttonElement-button {
+                               z-index: 3;
+                       }
+
+                       &.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
+                               z-index: -1;
+                       }
+               }
        }
 }
 

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

Gerrit-MessageType: merged
Gerrit-Change-Id: If2f84721d4820d7ae73506f63e522b309e02b4f1
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Esanders <esand...@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