Style guide: Visually separate buttons

This makes all the buttons stack up vertically making it easier
to scan through options

Change-Id: If63f3df18ee4a79f44b9d8daa8ce986e1cd09526

diff --git a/docs/kss/styleguide-template/public/kss.less b/docs/kss/styleguide-template/public/kss.less
index c30322e..eeea1a8 100644 (file)
--- a/docs/kss/styleguide-template/public/kss.less
+++ b/docs/kss/styleguide-template/public/kss.less
@@ -141,6 +141,10 @@ nav {
                        display: block;
                        margin: 0;
                        margin-left: 20px;
+
+                       div {
+                               margin-bottom: 5px;
+                       }
                }
        }
 }

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index bcb4532..f6a44fd 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -18,8 +18,12 @@
 // Neutral button styling
 //
 // Markup:
-// <button class="mw-ui-button">.mw-ui-button</button>
-// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// <div>
+//   <button class="mw-ui-button">.mw-ui-button</button>
+// </div>
+// <div>
+//   <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// </div>
 //
 // Styleguide 2.1.
 .mw-ui-button {
@@ -71,10 +75,18 @@
        // using the mw-ui-big class.
        //
        // Markup:
-       // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
-       // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
-       // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
-       // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+       // </div>
        //
        // Styleguide 2.1.6.
        &.mw-ui-big {
@@ -86,10 +98,18 @@
        // Some buttons might need to be stacked.
        //
        // Markup:
-       // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
-       // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
-       // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
-       // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+       // </div>
        //
        // Styleguide 2.1.5.
        &.mw-ui-block {
@@ -103,8 +123,12 @@
        // .mw-ui-primary is deprecated, kept for compatibility.
        //
        // Markup:
-       // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
-       // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+       // </div>
        //
        // Styleguide 2.1.1.
        &.mw-ui-progressive,
@@ -123,8 +147,12 @@
        // e.g. save changes button
        //
        // Markup:
-       // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
-       // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+       // </div>
        //
        // Styleguide 2.1.2.
        &.mw-ui-constructive {
@@ -142,8 +170,12 @@
        // This should not be used for cancel buttons.
        //
        // Markup:
-       // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
-       // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+       // </div>
        //
        // Styleguide 2.1.3.
        &.mw-ui-destructive {
@@ -159,13 +191,27 @@
        // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
        //
        // Markup:
-       // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
-       // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
-       // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
-       // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
-       // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
-       // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
-       // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+       // </div>
        //
        // Styleguide 2.1.4.
        &.mw-ui-quiet {