From 1e1eea01ff40c8f9675f78975e7f63931b975d5d Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 24 Jul 2014 14:59:46 -0700 Subject: [PATCH] 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 --- docs/kss/Makefile | 2 +- includes/specials/SpecialSearch.php | 5 +- includes/specials/SpecialUserlogin.php | 1 + includes/templates/Usercreate.php | 16 +-- includes/templates/Userlogin.php | 4 +- resources/Resources.php | 7 ++ .../mediawiki.less/mediawiki.ui/mixins.less | 24 ---- .../src/mediawiki.ui/components/forms.less | 25 +--- .../src/mediawiki.ui/components/inputs.less | 109 ++++++++++++++++++ 9 files changed, 133 insertions(+), 60 deletions(-) create mode 100644 resources/src/mediawiki.ui/components/inputs.less diff --git a/docs/kss/Makefile b/docs/kss/Makefile index 374bab24cf..c096ef339a 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -6,7 +6,7 @@ kss: nodecheck # 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 541faa14a4..1df674a55b 100644 --- a/includes/specials/SpecialSearch.php +++ b/includes/specials/SpecialSearch.php @@ -82,7 +82,8 @@ class SpecialSearch extends SpecialPage { $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 @@ class SpecialSearch extends SpecialPage { '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 0b119689b5..46b499989a 100644 --- a/includes/specials/SpecialUserlogin.php +++ b/includes/specials/SpecialUserlogin.php @@ -1214,6 +1214,7 @@ class LoginForm extends SpecialPage { $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 a4240e2fc8..f1e70655dc 100644 --- a/includes/templates/Usercreate.php +++ b/includes/templates/Usercreate.php @@ -81,7 +81,7 @@ class UsercreateTemplate extends BaseTemplate { data['name'], 'text', array( - 'class' => 'mw-input loginText', + 'class' => 'mw-ui-input loginText', 'id' => 'wpName2', 'tabindex' => '1', 'size' => '20', @@ -109,7 +109,7 @@ class UsercreateTemplate extends BaseTemplate { 'mw-input loginPassword', + 'class' => 'mw-ui-input loginPassword', 'id' => 'wpPassword2', 'tabindex' => '3', 'size' => '20', @@ -129,7 +129,7 @@ class UsercreateTemplate extends BaseTemplate { ?>
-
+
getHTML(); ?>
@@ -139,7 +139,7 @@ class UsercreateTemplate extends BaseTemplate { 'mw-input loginPassword', + 'class' => 'mw-ui-input loginPassword', 'id' => 'wpRetype', 'tabindex' => '5', 'size' => '20', @@ -161,7 +161,7 @@ class UsercreateTemplate extends BaseTemplate { data['email'], 'email', array( - 'class' => 'mw-input loginText', + 'class' => 'mw-ui-input loginText', 'id' => 'wpEmail', 'tabindex' => '6', 'size' => '20', @@ -176,7 +176,7 @@ class UsercreateTemplate extends BaseTemplate { data['userealname'] ) { ?>
-
@@ -189,7 +189,7 @@ class UsercreateTemplate extends BaseTemplate {
data['reason'], 'text', array( - 'class' => 'mw-input loginText', + 'class' => 'mw-ui-input loginText', 'id' => 'wpReason', 'tabindex' => '8', 'size' => '20', @@ -231,7 +231,7 @@ class UsercreateTemplate extends BaseTemplate { data['name'], 'text', array( - 'class' => 'loginText', + 'class' => 'loginText mw-ui-input', 'id' => 'wpName1', 'tabindex' => '1', 'size' => '20', @@ -102,7 +102,7 @@ class UserloginTemplate extends BaseTemplate { 'loginPassword', + 'class' => 'loginPassword mw-ui-input', 'id' => 'wpPassword1', 'tabindex' => '2', 'size' => '20', diff --git a/resources/Resources.php b/resources/Resources.php index deaa802208..9e3c282e1a 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1456,6 +1456,13 @@ return array( '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 ae08c9f6a8..ec9888f27e 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 2e586a6b80..0b1e02795a 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: //
//
This is a form example.
//
// -// +// //
//
// @@ -41,7 +41,6 @@ width: @defaultFormWidth; // MW currently doesn't use the type attribute everywhere on inputs. - input, select, .mw-ui-button { display: block; @@ -50,12 +49,6 @@ 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. // Values taken from .agora-field-styling() in mixins/form.less select { @@ -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 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 0000000000..25dba78b9d --- /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: +// +// +// +// 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: +// +// +// +// 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: +// +// +// +// 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; +} -- 2.20.1