Deprecating: Consolidating `progressive` & `constructive` buttons

Consolidating `progressive` and `constructive` buttons and deprecating
`contructive` button usage. Also aligning Less button mixins to CSS/Less
coding guidelines.

Bug: T110555
Change-Id: I99131352d2fc99e500fdd8c6bc84c3dc204dafaf
Depends-On: I94f3aabb988069e5f7657fedde1336e39d490953

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 1b31956..30b2eb5 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -33,7 +33,7 @@
 // Button styling
 // ----------------------------------------------------------------------------
 
-.button-colors(@bgColor, @highlightColor, @activeColor) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) {
        background: @bgColor;
 
        &:hover {
@@ -59,7 +59,7 @@
        }
 }
 
-.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
        color: @colorButtonText;
        border: 1px solid @colorGray12;
 
@@ -86,7 +86,7 @@
        }
 }
 
-.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) < 70%) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) < 70% ) {
        color: #fff;
        // border of the same color as background so that light background and
        // dark background buttons are the same height and width
@@ -106,7 +106,7 @@
        }
 }
 
-.button-colors-quiet(@textColor, @highlightColor, @activeColor) {
+.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
        // Quiet buttons all start gray, and reveal
        // constructive/progressive/destructive color on hover and active.
        color: @colorButtonText;

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 4ffaeee..37b8701 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -137,7 +137,7 @@
                }
        }
 
-       // Constructive buttons
+       // Constructive buttons (deprecated, consolidated with `progressive` – see T110555)
        //
        // Use constructive buttons for actions which result in a final action in the process that results
        // in a change of state.
@@ -153,10 +153,10 @@
        //
        // Styleguide 2.1.2.
        &.mw-ui-constructive {
-               .button-colors( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
+               .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 
                &.mw-ui-quiet {
-                       .button-colors-quiet( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
+                       .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
                }
        }