From f4973c7ef811e18c8583f560899be238f6295832 Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Mon, 15 Sep 2014 15:49:44 -0700
Subject: [PATCH] Style guide: Visually separate buttons

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

Change-Id: If63f3df18ee4a79f44b9d8daa8ce986e1cd09526
---
 docs/kss/styleguide-template/public/kss.less  |  4 +
 .../src/mediawiki.ui/components/buttons.less  | 92 ++++++++++++++-----
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/docs/kss/styleguide-template/public/kss.less b/docs/kss/styleguide-template/public/kss.less
index c30322e6d5..eeea1a87bd 100644
--- 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 bcb4532203..f6a44fd442 100644
--- 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 {
-- 
2.20.1