jenkins-bot has submitted this change and it was merged.
Change subject: Add mw-ui-input to mediawiki ui
......................................................................
Add mw-ui-input to mediawiki ui
Upstream component from Flow
Adds mw-ui-input component
Update existing (and undocumented) usage in core of mw-ui-input to
use Flow focus style
Updated usage of mw-ui-input in Special:Search and Special:Userlogin
Packaged in mediawiki.ui.inputs to allow developers to use inputs
separately to other mediawiki ui components.
Change-Id: Ida765b97e6574bdc8fbba88a08ec98ec12f3dc95
---
M docs/kss/Makefile
M includes/specials/SpecialSearch.php
M includes/specials/SpecialUserlogin.php
M includes/templates/Usercreate.php
M includes/templates/Userlogin.php
M resources/Resources.php
M resources/src/mediawiki.less/mediawiki.ui/mixins.less
M resources/src/mediawiki.ui/components/forms.less
A resources/src/mediawiki.ui/components/inputs.less
9 files changed, 133 insertions(+), 60 deletions(-)
Approvals:
Mattflaschen: Looks good to me, approved
jenkins-bot: Verified
diff --git a/docs/kss/Makefile b/docs/kss/Makefile
index 374bab2..c096ef3 100644
--- a/docs/kss/Makefile
+++ b/docs/kss/Makefile
@@ -6,7 +6,7 @@
# Generates CSS of mediawiki.ui and mediawiki.ui.button using ResourceLoader,
then applies it to the
# KSS style guide
$(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
- @curl -sG
"${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles"
> $(KSS_RL_TMP)
+ @curl -sG
"${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles"
> $(KSS_RL_TMP)
@node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/
--css $(KSS_RL_TMP) -t styleguide-template
@rm $(KSS_RL_TMP)
diff --git a/includes/specials/SpecialSearch.php
b/includes/specials/SpecialSearch.php
index 541faa1..1df674a 100644
--- a/includes/specials/SpecialSearch.php
+++ b/includes/specials/SpecialSearch.php
@@ -82,7 +82,8 @@
$out = $this->getOutput();
$out->allowClickjacking();
$out->addModuleStyles( array(
- 'mediawiki.special', 'mediawiki.special.search',
'mediawiki.ui', 'mediawiki.ui.button'
+ 'mediawiki.special', 'mediawiki.special.search',
'mediawiki.ui', 'mediawiki.ui.button',
+ 'mediawiki.ui.input',
) );
// Strip underscores from title parameter; most of the time
we'll want
@@ -1081,7 +1082,7 @@
'id' => $this->profile === 'advanced' ?
'powerSearchText' : 'searchText',
'size' => '50',
'autofocus',
- 'class' => 'mw-ui-input',
+ 'class' => 'mw-ui-input mw-ui-input-inline',
) ) . "\n";
$out .= Html::hidden( 'fulltext', 'Search' ) . "\n";
$out .= Xml::submitButton(
diff --git a/includes/specials/SpecialUserlogin.php
b/includes/specials/SpecialUserlogin.php
index 0b11968..46b4999 100644
--- a/includes/specials/SpecialUserlogin.php
+++ b/includes/specials/SpecialUserlogin.php
@@ -1214,6 +1214,7 @@
$out->addModuleStyles( array(
'mediawiki.ui',
'mediawiki.ui.button',
+ 'mediawiki.ui.input',
'mediawiki.special.userlogin.common.styles'
) );
$out->addModules( array(
diff --git a/includes/templates/Usercreate.php
b/includes/templates/Usercreate.php
index a4240e2..f1e7065 100644
--- a/includes/templates/Usercreate.php
+++ b/includes/templates/Usercreate.php
@@ -81,7 +81,7 @@
</label>
<?php
echo Html::input( 'wpName',
$this->data['name'], 'text', array(
- 'class' => 'mw-input loginText',
+ 'class' => 'mw-ui-input loginText',
'id' => 'wpName2',
'tabindex' => '1',
'size' => '20',
@@ -109,7 +109,7 @@
<label for='wpPassword2'><?php $this->msg(
'userlogin-yourpassword' ); ?></label>
<?php
echo Html::input( 'wpPassword', null,
'password', array(
- 'class' => 'mw-input loginPassword',
+ 'class' => 'mw-ui-input loginPassword',
'id' => 'wpPassword2',
'tabindex' => '3',
'size' => '20',
@@ -129,7 +129,7 @@
?>
<div class="mw-ui-vform-field"
id="mw-user-domain-section">
<label for="wpDomain"><?php $this->msg(
'yourdomainname' ); ?></label>
- <div class="mw-input">
+ <div>
<?php echo $select->getHTML();
?>
</div>
</div>
@@ -139,7 +139,7 @@
<label for='wpRetype'><?php $this->msg(
'createacct-yourpasswordagain' ); ?></label>
<?php
echo Html::input( 'wpRetype', null, 'password',
array(
- 'class' => 'mw-input loginPassword',
+ 'class' => 'mw-ui-input loginPassword',
'id' => 'wpRetype',
'tabindex' => '5',
'size' => '20',
@@ -161,7 +161,7 @@
</label>
<?php
echo Html::input( 'wpEmail',
$this->data['email'], 'email', array(
- 'class' => 'mw-input
loginText',
+ 'class' => 'mw-ui-input
loginText',
'id' => 'wpEmail',
'tabindex' => '6',
'size' => '20',
@@ -176,7 +176,7 @@
<?php if ( $this->data['userealname'] ) { ?>
<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"
+ <input type='text' class='mw-ui-input
loginText' name="wpRealName" id="wpRealName"
tabindex="7"
value="<?php $this->text(
'realname' ); ?>" size='20' />
<div class="prefsectiontip">
@@ -189,7 +189,7 @@
<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',
+ 'class' => 'mw-ui-input
loginText',
'id' => 'wpReason',
'tabindex' => '8',
'size' => '20',
@@ -231,7 +231,7 @@
<?php } ?>
<input
type="<?php
echo htmlspecialchars( $inputItem['type'] ); ?>"
- class="mw-input"
+
class="mw-ui-input"
name="<?php
echo htmlspecialchars( $inputItem['name'] ); ?>"
tabindex="<?php
echo $tabIndex++; ?>"
value="<?php
echo htmlspecialchars( $inputItem['value'] ); ?>"
diff --git a/includes/templates/Userlogin.php b/includes/templates/Userlogin.php
index bab544b..7187e8c 100644
--- a/includes/templates/Userlogin.php
+++ b/includes/templates/Userlogin.php
@@ -72,7 +72,7 @@
<?php
$extraAttrs = array();
echo Html::input( 'wpName',
$this->data['name'], 'text', array(
- 'class' => 'loginText',
+ 'class' => 'loginText mw-ui-input',
'id' => 'wpName1',
'tabindex' => '1',
'size' => '20',
@@ -102,7 +102,7 @@
</label>
<?php
echo Html::input( 'wpPassword', null,
'password', array(
- 'class' => 'loginPassword',
+ 'class' => 'loginPassword mw-ui-input',
'id' => 'wpPassword1',
'tabindex' => '2',
'size' => '20',
diff --git a/resources/Resources.php b/resources/Resources.php
index deaa802..9e3c282 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1456,6 +1456,13 @@
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
+ 'mediawiki.ui.input' => array(
+ 'styles' => array(
+ 'resources/src/mediawiki.ui/components/inputs.less',
+ ),
+ 'position' => 'top',
+ 'targets' => array( 'desktop', 'mobile' ),
+ ),
/* es5-shim */
'es5-shim' => array(
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index ae08c9f..ec9888f 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -1,30 +1,6 @@
// ----------------------------------------------------------------------------
// Form styling mixins
// ----------------------------------------------------------------------------
-
-// Font is not included.
-.agora-field-styling() {
-
- border: 1px solid @colorFieldBorder;
-
- &:focus {
- // Styling focus of native checkboxes etc on Mac is almost
impossible.
- &:not([type=checkbox]):not([type=radio]) {
- outline: 0; // Removes OS field focus
- }
-
- box-shadow: lighten(@colorProgressive, 6%) 0 0 5px;
-
- border-color: lighten(@colorProgressive, 6%);
- }
-
- color: @colorText;
- padding: 0.35em 0.5em 0.35em 0.5em;
-
- // Ensure that buttons and inputs are nicely aligned when they have
differing heights
- vertical-align: middle;
-}
-
.agora-label-styling() {
font-size: 0.9em;
color: @colorText;
diff --git a/resources/src/mediawiki.ui/components/forms.less
b/resources/src/mediawiki.ui/components/forms.less
index 2e586a6..0b1e027 100644
--- a/resources/src/mediawiki.ui/components/forms.less
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -20,14 +20,14 @@
// VForm
//
// Style a compact vertical stacked form ("VForm") and the elements in divs
-// within it. See button section on guidance of how and when to use
mw-ui-constructive.
+// within it. See button and inputs section on guidance of how and when to use
them.
//
// Markup:
// <form class="mw-ui-vform">
// <div class="mw-ui-vform-field">This is a form example.</div>
// <div class="mw-ui-vform-field">
// <label>Username </label>
-// <input value="input">
+// <input class="mw-ui-input" value="input">
// </div>
// <div class="mw-ui-vform-field">
// <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
@@ -41,19 +41,12 @@
width: @defaultFormWidth;
// MW currently doesn't use the type attribute everywhere on inputs.
- input,
select,
.mw-ui-button {
display: block;
.box-sizing(border-box);
margin: 0;
width: 100%;
- }
-
- // 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]) {
- .agora-field-styling(); // mixins/forms.less
}
// Give dropdown lists the same spacing as input fields for consistency.
@@ -157,20 +150,6 @@
margin: 0 0 15px;
padding: 0;
width: 100%;
-
- input {
- font-size: 1em;
- line-height: 1.4;
- }
-}
-
-// Apply mw-ui-input to individual input fields to style them.
-// You generally don't need to use this class if <input> is within an Agora
-// form container such as mw-ui-vform
-.mw-ui-input {
- .agora-field-styling(); // mixins/forms.less
- font-size: 1em;
- line-height: 1.4em;
}
// Apply mw-ui-label to individual elements to style them.
diff --git a/resources/src/mediawiki.ui/components/inputs.less
b/resources/src/mediawiki.ui/components/inputs.less
new file mode 100644
index 0000000..25dba78
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -0,0 +1,109 @@
+// Inputs
+
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Placeholder text styling helper
+.field-placeholder-styling() {
+ font-style: italic;
+ font-weight: normal;
+}
+// Inputs
+//
+// When using an input or textarea apply the mw-ui-input class.
+//
+// Styleguide 1.
+
+// mw-ui-input
+//
+// Style an input using MediaWiki UI.
+// Currently in draft status and subject to change.
+// When focused a progressive highlight appears to the left of the field.
+//
+// Markup:
+// <input value="input" class="mw-ui-input" value="input">
+// <textarea class="mw-ui-input">textarea</textarea>
+//
+// Styleguide 1.1.
+.mw-ui-input {
+ // turn off default input styling for input[type="search"] fields
+ -webkit-appearance: none;
+ border: 1px solid @colorFieldBorder;
+ .box-sizing(border-box);
+ width: 100%;
+ padding: .3em .3em .3em .6em;
+ display: block;
+ // Override user agent stylesheet properties. Instead use parent
element.
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ .transition(~"border linear .2s, box-shadow linear .2s");
+
+ // Placeholder text styling must be set individually for each browser
@winter
+ &::-webkit-input-placeholder { // webkit
+ .field-placeholder-styling;
+ }
+ &::-moz-placeholder { // FF 4-18
+ .field-placeholder-styling;
+ }
+ &:-moz-placeholder { // FF >= 19
+ .field-placeholder-styling;
+ }
+ &:-ms-input-placeholder { // IE >= 10
+ .field-placeholder-styling;
+ }
+
+ &:focus {
+ box-shadow: inset .45em 0 0 #5088f7;
+ border-color: @colorGrayDark;
+ // Remove focus glow on input[type="search"]
+ outline: 0;
+ }
+}
+
+textarea.mw-ui-input {
+ min-height: 8em;
+}
+
+// mw-ui-input-inline
+//
+// Use mw-ui-input-inline with mw-ui-input in cases where you want a button to
line up with the input.
+//
+// Markup:
+// <input value="input" class="mw-ui-input mw-ui-input-inline" value="input">
+// <button class="mw-ui-button mw-ui-constructive">go</button>
+//
+// Styleguide 1.2.
+.mw-ui-input-inline {
+ display: inline-block;
+ width: auto;
+}
+
+// mw-ui-input-large
+//
+// Use mw-ui-input-large with mw-ui-input in cases where there are multiple
inputs on a screen and you
+// want to draw more attention to one instance. For example add topic / reply
to post forms.
+// Currently in draft status and subject to change. When used on an input, the
text is styled
+// in a large font. When used alongside another mw-ui-input large they are
pushed together to seem like
+// one contiguous input.
+//
+// Markup:
+// <input value="input" class="mw-ui-input mw-ui-input-large" value="input">
+// <textarea class="mw-ui-input mw-ui-input-large">textarea</textarea>
+//
+// Styleguide 1.3.
+.mw-ui-input-large {
+ margin-top: 0;
+ margin-bottom: 0;
+ & + .mw-ui-input-large {
+ border-top-width: 0;
+ }
+}
+
+input.mw-ui-input-large {
+ font-size: 1.75em;
+ font-weight: bold;
+ line-height: 1.25em;
+}
--
To view, visit https://gerrit.wikimedia.org/r/149173
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ida765b97e6574bdc8fbba88a08ec98ec12f3dc95
Gerrit-PatchSet: 10
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net>
Gerrit-Reviewer: Jaredzimmerman <jared.zimmer...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Kaldari <rkald...@wikimedia.org>
Gerrit-Reviewer: Mattflaschen <mflasc...@wikimedia.org>
Gerrit-Reviewer: SG <shah...@gmail.com>
Gerrit-Reviewer: Swalling <swall...@wikimedia.org>
Gerrit-Reviewer: Violetto <m...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
