From a88f8a496b70cb2dc1c33cae5132548482352a45 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Fri, 16 May 2014 17:53:33 +0200
Subject: [PATCH] =?utf8?q?mediawiki.ui:=20Rename=20.mw-ui-vform-div=20?=
 =?utf8?q?=E2=86=92=20.mw-ui-vform-field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Require use of class instead of applying styling to all <div>s

This resolves a few FIXMEs and dramatically lowers the awkwardness
level of using mediawiki.ui.

'.mw-ui-vform-field' is a more descriptive name than '.mw-ui-vform-div'
and corresponds to the HTMLFormField PHP class in core which generates
<div>s with this CSS class.

We previously styled '.mw-ui-vform > div' the same way we styled
'.mw-ui-vform .mw-ui-vform-div', which was an annoying piece of magic
causing difficult to debug problems when one needed a different HTML
structure (like bug 63233). Explicitly using '.mw-ui-vform-field'
where applicable is a lot saner.

Change-Id: I6f0b8842f5fdf70b97decb165086d1a83428b259
---
 includes/htmlform/HTMLFormField.php           |  2 +-
 includes/templates/Usercreate.php             | 20 +++++-----
 includes/templates/Userlogin.php              | 14 ++++---
 .../components/default/forms.less             | 38 ++++++++-----------
 4 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/includes/htmlform/HTMLFormField.php b/includes/htmlform/HTMLFormField.php
index 0e1860bef0..8076e8ad24 100644
--- a/includes/htmlform/HTMLFormField.php
+++ b/includes/htmlform/HTMLFormField.php
@@ -504,7 +504,7 @@ abstract class HTMLFormField {
 		);
 		$divCssClasses = array( "mw-htmlform-field-$fieldType", $this->mClass, $errorClass );
 		if ( $this->mParent->isVForm() ) {
-			$divCssClasses[] = 'mw-ui-vform-div';
+			$divCssClasses[] = 'mw-ui-vform-field';
 		}
 
 		$wrapperAttributes = array(
diff --git a/includes/templates/Usercreate.php b/includes/templates/Usercreate.php
index 9118701703..a4240e2fc8 100644
--- a/includes/templates/Usercreate.php
+++ b/includes/templates/Usercreate.php
@@ -73,7 +73,7 @@ class UsercreateTemplate extends BaseTemplate {
 			<?php } ?>
 			</div>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<label for='wpName2'>
 					<?php $this->msg( 'userlogin-yourname' ); ?>
 
@@ -92,7 +92,7 @@ class UsercreateTemplate extends BaseTemplate {
 				?>
 			</div>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<?php if ( $this->data['createemail'] ) { ?>
 					<label class="mw-ui-checkbox-label">
 						<input name="wpCreateaccountMail" type="checkbox" value="1" id="wpCreateaccountMail" tabindex="2"
@@ -105,7 +105,7 @@ class UsercreateTemplate extends BaseTemplate {
 				<?php } ?>
 			</div>
 
-			<div class="mw-row-password">
+			<div class="mw-ui-vform-field mw-row-password">
 				<label for='wpPassword2'><?php $this->msg( 'userlogin-yourpassword' ); ?></label>
 				<?php
 				echo Html::input( 'wpPassword', null, 'password', array(
@@ -127,7 +127,7 @@ class UsercreateTemplate extends BaseTemplate {
 					$select->addOption( $dom );
 				}
 			?>
-				<div id="mw-user-domain-section">
+				<div class="mw-ui-vform-field" id="mw-user-domain-section">
 					<label for="wpDomain"><?php $this->msg( 'yourdomainname' ); ?></label>
 					<div class="mw-input">
 						<?php echo $select->getHTML(); ?>
@@ -135,7 +135,7 @@ class UsercreateTemplate extends BaseTemplate {
 				</div>
 			<?php } ?>
 
-			<div class="mw-row-password">
+			<div class="mw-ui-vform-field mw-row-password">
 				<label for='wpRetype'><?php $this->msg( 'createacct-yourpasswordagain' ); ?></label>
 				<?php
 				echo Html::input( 'wpRetype', null, 'password', array(
@@ -149,7 +149,7 @@ class UsercreateTemplate extends BaseTemplate {
 				?>
 			</div>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<?php if ( $this->data['useemail'] ) { ?>
 					<label for='wpEmail'>
 						<?php
@@ -174,7 +174,7 @@ class UsercreateTemplate extends BaseTemplate {
 			</div>
 
 			<?php if ( $this->data['userealname'] ) { ?>
-				<div>
+				<div class="mw-ui-vform-field">
 					<label for='wpRealName'><?php $this->msg( 'createacct-realname' ); ?></label>
 					<input type='text' class='mw-input loginText' name="wpRealName" id="wpRealName"
 						tabindex="7"
@@ -186,7 +186,7 @@ class UsercreateTemplate extends BaseTemplate {
 			<?php } ?>
 
 			<?php if ( $this->data['usereason'] ) { ?>
-				<div>
+				<div class="mw-ui-vform-field">
 					<label for='wpReason'><?php $this->msg( 'createacct-reason' ); ?></label>
 					<?php echo Html::input( 'wpReason', $this->data['reason'], 'text', array(
 						'class' => 'mw-input loginText',
@@ -202,7 +202,7 @@ class UsercreateTemplate extends BaseTemplate {
 			$tabIndex = 9;
 			if ( isset( $this->data['extraInput'] ) && is_array( $this->data['extraInput'] ) ) {
 				foreach ( $this->data['extraInput'] as $inputItem ) { ?>
-					<div>
+					<div class="mw-ui-vform-field">
 						<?php
 						// If it's a checkbox, output the whole thing (assume it has a msg).
 						if ( $inputItem['type'] == 'checkbox' ) {
@@ -252,7 +252,7 @@ class UsercreateTemplate extends BaseTemplate {
 			// so skip one index.
 			$tabIndex++;
 			?>
-			<div class="mw-submit">
+			<div class="mw-ui-vform-field mw-submit">
 				<?php
 				echo Html::input(
 					'wpCreateaccount',
diff --git a/includes/templates/Userlogin.php b/includes/templates/Userlogin.php
index 0aad07d9d1..19ea20bf69 100644
--- a/includes/templates/Userlogin.php
+++ b/includes/templates/Userlogin.php
@@ -55,7 +55,7 @@ class UserloginTemplate extends BaseTemplate {
 				</div>
 			<?php } ?>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<label for='wpName1'>
 					<?php
 					$this->msg( 'userlogin-yourname' );
@@ -85,7 +85,7 @@ class UserloginTemplate extends BaseTemplate {
 				?>
 			</div>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<label for='wpPassword1'>
 					<?php
 					$this->msg( 'userlogin-yourpassword' );
@@ -120,7 +120,7 @@ class UserloginTemplate extends BaseTemplate {
 					$select->addOption( $dom );
 				}
 			?>
-				<div id="mw-user-domain-section">
+				<div class="mw-ui-vform-field" id="mw-user-domain-section">
 					<label for='wpDomain'><?php $this->msg( 'yourdomainname' ); ?></label>
 					<?php echo $select->getHTML(); ?>
 				</div>
@@ -132,7 +132,7 @@ class UserloginTemplate extends BaseTemplate {
 			}
 			?>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<?php if ( $this->data['canremember'] ) { ?>
 					<label class="mw-ui-checkbox-label">
 						<input name="wpRemember" type="checkbox" value="1" id="wpRemember" tabindex="4"
@@ -145,7 +145,7 @@ class UserloginTemplate extends BaseTemplate {
 				<?php } ?>
 			</div>
 
-			<div>
+			<div class="mw-ui-vform-field">
 				<?php
 				echo Html::input( 'wpLoginAttempt', $this->getMsg( 'pt-login-button' )->text(), 'submit', array(
 					'id' => 'wpLoginAttempt',
@@ -154,7 +154,8 @@ class UserloginTemplate extends BaseTemplate {
 				) );
 				?>
 			</div>
-			<div id="mw-userlogin-help">
+
+			<div class="mw-ui-vform-field" id="mw-userlogin-help">
 				<?php
 				echo Html::element(
 					'a',
@@ -167,6 +168,7 @@ class UserloginTemplate extends BaseTemplate {
 				);
 				?>
 			</div>
+
 			<?php if ( $this->haveData( 'createOrLoginHref' ) ) { ?>
 				<?php if ( $this->data['loggedin'] ) { ?>
 					<div id="mw-createaccount-another">
diff --git a/resources/src/mediawiki.ui/components/default/forms.less b/resources/src/mediawiki.ui/components/default/forms.less
index ee21932f44..6c40c266f4 100644
--- a/resources/src/mediawiki.ui/components/default/forms.less
+++ b/resources/src/mediawiki.ui/components/default/forms.less
@@ -24,12 +24,12 @@
 //
 // Markup:
 // <form class="mw-ui-vform">
-//   <div class="mw-ui-vform-div">This is a form example.</div>
-//   <div class="mw-ui-vform-div">
+//   <div class="mw-ui-vform-field">This is a form example.</div>
+//   <div class="mw-ui-vform-field">
 //     <label>Username </label>
 //     <input value="input">
 //   </div>
-//   <div>
+//   <div class="mw-ui-vform-field">
 //     <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
 //   </div>
 // </form>
@@ -40,15 +40,6 @@
 
 	width: @defaultFormWidth;
 
-	// Immediate divs in a vform are block and spaced-out.
-	// XXX: We shouldn't depend on the tag name here...
-	& > div {
-		display: block;
-		margin: 0 0 15px 0;
-		padding: 0;
-		width: 100%;
-	}
-
 	// MW currently doesn't use the type attribute everywhere on inputs.
 	input,
 	select,
@@ -104,17 +95,17 @@
 	//   <div class="error">
 	//     <ul><li>There are problems with some of your input.</li></ul>
 	//   </div>
-	//   <div class="mw-ui-vform-div">
+	//   <div class="mw-ui-vform-field">
 	//     <input type="text" value="input" class="mw-ui-input">
 	//   </div>
-	//   <div class="mw-ui-vform-div">
+	//   <div class="mw-ui-vform-field">
 	//     <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>
+	//   <div class="mw-ui-vform-field">
 	//     <button class="mw-ui-button">Button in vform</button>
 	//   </div>
 	// </form>
@@ -142,7 +133,8 @@
 	// 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 {
+	.mw-ui-vform-div .error, /* for backwards-compatibility, remove before 1.24 */
+	.mw-ui-vform-field .error {
 		display: block;
 		margin-top: 5px;
 	}
@@ -153,12 +145,14 @@
 // Elements
 // --------------------------------------------------------------------------
 
-// Apply this to individual elements to style them.
-// You generally don't need to use this class on divs within an Agora
-// form container such as mw-ui-vform
-// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
-// XXX: What is this even for?
-.mw-ui-vform-div {
+// A wrapper for a single form field: the <input> / <select> / <button> element,
+// help text, labels, associated error/warning/success messages, and so on.
+// Elements with this class are generated by HTMLFormField in core MediaWiki.
+//
+// (We use a broad definition of 'field' here: a purely textual information
+// block is also a "field".)
+.mw-ui-vform-div, /* for backwards-compatibility, remove before 1.24 */
+.mw-ui-vform-field {
 	display: block;
 	margin: 0 0 15px;
 	padding: 0;
-- 
2.20.1