From 707a3183035d7b115b0e84086bf6086711ffd488 Mon Sep 17 00:00:00 2001
From: wctaiwan <wctaiwan@gmail.com>
Date: Mon, 7 Apr 2014 15:16:45 -0400
Subject: [PATCH] HTMLForm vform styling

Style <select> like other input fields (full width), and fix the issue
where validation errors partially obfuscate the fields by setting display:
block. Refactor code for styling error boxes and improve documentation.

Bug: 63644
Change-Id: I00a35c932a7e0b91b7b01fc327c0c1b9bae66c78
---
 .../components/default/forms.less             | 55 +++++++++++++------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/resources/src/mediawiki.ui/components/default/forms.less b/resources/src/mediawiki.ui/components/default/forms.less
index 2b9b3cbe64..ee21932f44 100644
--- a/resources/src/mediawiki.ui/components/default/forms.less
+++ b/resources/src/mediawiki.ui/components/default/forms.less
@@ -25,7 +25,7 @@
 // Markup:
 // <form class="mw-ui-vform">
 //   <div class="mw-ui-vform-div">This is a form example.</div>
-//   <div>
+//   <div class="mw-ui-vform-div">
 //     <label>Username </label>
 //     <input value="input">
 //   </div>
@@ -51,6 +51,7 @@
 
 	// MW currently doesn't use the type attribute everywhere on inputs.
 	input,
+	select,
 	.mw-ui-button {
 		display: block;
 		.box-sizing(border-box);
@@ -58,12 +59,19 @@
 		width: 100%;
 	}
 
-	// We exclude these because they'll generally use mw-ui-button.
+	// We exclude buttons because they'll generally use mw-ui-button.
 	// Otherwise, we'll unintentionally override that.
-	input:not([type=button]):not([type=submit]):not([type=file]), {
+	input:not([type=button]):not([type=submit]):not([type=file]) {
 		.agora-field-styling(); // mixins/forms.less
 	}
 
+	// Give dropdown lists the same spacing as input fields for consistency.
+	// Values taken from .agora-field-styling() in mixins/form.less
+	select {
+		padding: 0.35em 0.5em 0.35em 0.5em;
+		vertical-align: middle;
+	}
+
 	label {
 		display: block;
 		.box-sizing(border-box);
@@ -93,35 +101,50 @@
 	//   <div class="warningbox">A warning to be noted</div>
 	//   <div class="successbox">Action successful!</div>
 	//   <div class="error">A different kind of error</div>
-	//   <div>
+	//   <div class="error">
+	//     <ul><li>There are problems with some of your input.</li></ul>
+	//   </div>
+	//   <div class="mw-ui-vform-div">
 	//     <input type="text" value="input" class="mw-ui-input">
-	//   <div>
 	//   </div>
+	//   <div class="mw-ui-vform-div">
+	//     <select>
+	//       <option value="1">Option 1</option>
+	//       <option value="2">Option 2</option>
+	//     </select>
+	//     <span class="error">The value you specified is not a valid option.</span>
+	//   </div>
+	//   <div>
 	//     <button class="mw-ui-button">Button in vform</button>
 	//   </div>
 	// </form>
 	//
 	// Styleguide 3.1.
-	.error {
+	.error,
+	.errorbox,
+	.warningbox,
+	.successbox {
 		.box-sizing(border-box);
 		font-size: 0.9em;
-		margin: 0 0 1em;
+		margin: 0 0 1em 0;
 		padding: 0.5em;
+		word-wrap: break-word;
+	}
+
+	// Colours taken from those for .errorbox in skins/common/shared.css
+	.error {
 		color: #cc0000;
 		border: 1px solid #fac5c5;
 		background-color: #fae3e3;
 		text-shadow: 0 1px #fae3e3;
-		word-wrap: break-word;
 	}
 
-	.errorbox,
-	.warningbox,
-	.successbox {
-		.box-sizing(border-box);
-		font-size: 0.9em;
-		margin: 0 0 1em 0;
-		padding: 0.5em;
-		word-wrap: break-word;
+	// This specifies styling for individual field validation error messages.
+	// Show them below the fields to prevent line break glitches, and leave
+	// some space between the field and the error message box.
+	.mw-ui-vform-div .error {
+		display: block;
+		margin-top: 5px;
 	}
 
 }
-- 
2.20.1