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

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / default / forms.less

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;