jenkins-bot has submitted this change and it was merged.
Change subject: HTMLForm vform styling
..
HTMLForm vform styling
Style select like other input fields (full width), and fix the issue
where validation errors partially obfuscate the fields by setting display:
block. Refactor code for styling error boxes and improve documentation.
Bug: 63644
Change-Id: I00a35c932a7e0b91b7b01fc327c0c1b9bae66c78
---
M resources/src/mediawiki.ui/components/default/forms.less
1 file changed, 41 insertions(+), 18 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/mediawiki.ui/components/default/forms.less
b/resources/src/mediawiki.ui/components/default/forms.less
index 2b9b3cb..ee21932 100644
--- a/resources/src/mediawiki.ui/components/default/forms.less
+++ b/resources/src/mediawiki.ui/components/default/forms.less
@@ -25,7 +25,7 @@
// Markup:
// form class=mw-ui-vform
// div class=mw-ui-vform-divThis is a form example./div
-// div
+// div class=mw-ui-vform-div
// labelUsername /label
// input value=input
// /div
@@ -51,6 +51,7 @@
// MW currently doesn't use the type attribute everywhere on inputs.
input,
+ select,
.mw-ui-button {
display: block;
.box-sizing(border-box);
@@ -58,10 +59,17 @@
width: 100%;
}
- // We exclude these because they'll generally use mw-ui-button.
+ // We exclude buttons because they'll generally use mw-ui-button.
// Otherwise, we'll unintentionally override that.
- input:not([type=button]):not([type=submit]):not([type=file]), {
+ input:not([type=button]):not([type=submit]):not([type=file]) {
.agora-field-styling(); // mixins/forms.less
+ }
+
+ // Give dropdown lists the same spacing as input fields for consistency.
+ // Values taken from .agora-field-styling() in mixins/form.less
+ select {
+ padding: 0.35em 0.5em 0.35em 0.5em;
+ vertical-align: middle;
}
label {
@@ -93,27 +101,26 @@
// div class=warningboxA warning to be noted/div
// div class=successboxAction successful!/div
// div class=errorA different kind of error/div
- // div
- // input type=text value=input class=mw-ui-input
- // div
+ // div class=error
+ // ulliThere are problems with some of your input./li/ul
// /div
+ // div class=mw-ui-vform-div
+ // input type=text value=input class=mw-ui-input
+ // /div
+ // div class=mw-ui-vform-div
+ // 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
// button class=mw-ui-buttonButton in vform/button
// /div
// /form
//
// Styleguide 3.1.
- .error {
- .box-sizing(border-box);
- font-size: 0.9em;
- margin: 0 0 1em;
- padding: 0.5em;
- color: #cc;
- border: 1px solid #fac5c5;
- background-color: #fae3e3;
- text-shadow: 0 1px #fae3e3;
- word-wrap: break-word;
- }
-
+ .error,
.errorbox,
.warningbox,
.successbox {
@@ -124,6 +131,22 @@
word-wrap: break-word;
}
+ // Colours taken from those for .errorbox in skins/common/shared.css
+ .error {
+ color: #cc;
+ border: 1px solid #fac5c5;
+ background-color: #fae3e3;
+ text-shadow: 0 1px #fae3e3;
+ }
+
+ // 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 {
+ display: block;
+ margin-top: 5px;
+ }
+
}
// --
--
To view, visit https://gerrit.wikimedia.org/r/124383
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I00a35c932a7e0b91b7b01fc327c0c1b9bae66c78
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Wctaiwan wctai...@gmail.com
Gerrit-Reviewer: Bartosz Dziewoński matma@gmail.com
Gerrit-Reviewer: EBernhardson ebernhard...@wikimedia.org
Gerrit-Reviewer: Jack Phoenix j...@countervandalism.net
Gerrit-Reviewer: Spage sp...@wikimedia.org
Gerrit-Reviewer: Wctaiwan wctai...@gmail.com
Gerrit-Reviewer: jenkins-bot
