mediawiki.ui: Rename .mw-ui-vform-div → .mw-ui-vform-field

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

diff --git a/includes/htmlform/HTMLFormField.php b/includes/htmlform/HTMLFormField.php
index 0e1860b..8076e8a 100644 (file)
--- 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 9118701..a4240e2 100644 (file)
--- 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 0aad07d..19ea20b 100644 (file)
--- 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 ee21932..6c40c26 100644 (file)
--- 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;