[MediaWiki-commits] [Gerrit] mediawiki.ui: Rename .mw-ui-vform-div → .mw-ui-vform-field - change (mediawiki/core)
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 divs
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
divs 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'
[MediaWiki-commits] [Gerrit] mediawiki.ui: Rename .mw-ui-vform-div → .mw-ui-vform-field, ... - change (mediawiki/core)
Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/133724
Change subject: mediawiki.ui: Rename .mw-ui-vform-div → .mw-ui-vform-field,
require it instead of styling all divs
..
mediawiki.ui: Rename .mw-ui-vform-div → .mw-ui-vform-field, require it instead
of styling all divs
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
divs 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 resources/src/mediawiki.ui/components/default/forms.less
2 files changed, 17 insertions(+), 23 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/24/133724/1
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/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-divThis is a form example./div
-// div class=mw-ui-vform-div
+// div class=mw-ui-vform-fieldThis is a form example./div
+// div class=mw-ui-vform-field
// labelUsername /label
// input value=input
// /div
-// div
+// div class=mw-ui-vform-field
// button class=mw-ui-button mw-ui-constructiveButton 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
// ulliThere 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=1Option 1/option
// option value=2Option 2/option
// /select
// span class=errorThe value you specified is not a valid
option./span
// /div
- // div
+ // div class=mw-ui-vform-field
// button class=mw-ui-buttonButton 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
