jenkins-bot has submitted this change and it was merged.
Change subject: mediawiki.ui: Rename .mw-ui-vform-div → .mw-ui-vform-field
......................................................................
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
---
M includes/htmlform/HTMLFormField.php
M includes/templates/Usercreate.php
M includes/templates/Userlogin.php
M resources/src/mediawiki.ui/components/default/forms.less
4 files changed, 35 insertions(+), 39 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
TheDJ: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/includes/htmlform/HTMLFormField.php
b/includes/htmlform/HTMLFormField.php
index 0e1860b..8076e8a 100644
--- a/includes/htmlform/HTMLFormField.php
+++ b/includes/htmlform/HTMLFormField.php
@@ -504,7 +504,7 @@
);
$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
--- a/includes/templates/Usercreate.php
+++ b/includes/templates/Usercreate.php
@@ -73,7 +73,7 @@
<?php } ?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpName2'>
<?php $this->msg( 'userlogin-yourname'
); ?>
@@ -92,7 +92,7 @@
?>
</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 @@
<?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 @@
$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 @@
</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 @@
?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<?php if ( $this->data['useemail'] ) { ?>
<label for='wpEmail'>
<?php
@@ -174,7 +174,7 @@
</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 @@
<?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 @@
$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 @@
// 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
--- a/includes/templates/Userlogin.php
+++ b/includes/templates/Userlogin.php
@@ -55,7 +55,7 @@
</div>
<?php } ?>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpName1'>
<?php
$this->msg( 'userlogin-yourname' );
@@ -85,7 +85,7 @@
?>
</div>
- <div>
+ <div class="mw-ui-vform-field">
<label for='wpPassword1'>
<?php
$this->msg( 'userlogin-yourpassword' );
@@ -120,7 +120,7 @@
$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 @@
}
?>
- <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 @@
<?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 @@
) );
?>
</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 @@
);
?>
</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
--- 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>
@@ -39,15 +39,6 @@
.box-sizing(border-box);
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,
@@ -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;
--
To view, visit https://gerrit.wikimedia.org/r/133724
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I6f0b8842f5fdf70b97decb165086d1a83428b259
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Daniel Friesen <dan...@nadir-seen-fire.com>
Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Krinkle <krinklem...@gmail.com>
Gerrit-Reviewer: Mattflaschen <mflasc...@wikimedia.org>
Gerrit-Reviewer: SG <shah...@gmail.com>
Gerrit-Reviewer: Spage <sp...@wikimedia.org>
Gerrit-Reviewer: Swalling <swall...@wikimedia.org>
Gerrit-Reviewer: TheDJ <hartman.w...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
