Jforrester has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/369478 )
Change subject: Update OOjs UI to v0.22.4 ...................................................................... Update OOjs UI to v0.22.4 Release notes: https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/History.md;v0.22.4 Change-Id: I505e7c612b70a949d2b101172964bd7433fb8d5e --- M composer.json M composer.lock M composer/installed.json M oojs/oojs-ui/History.md A oojs/oojs-ui/bin/dependencytree.rb M oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js M oojs/oojs-ui/demos/classes/DraggableItemWidget.js A oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js A oojs/oojs-ui/demos/classes/SimpleWidget.css A oojs/oojs-ui/demos/classes/SimpleWidget.js M oojs/oojs-ui/demos/index.html M oojs/oojs-ui/demos/pages/widgets.js M oojs/oojs-ui/demos/pages/widgets.php M oojs/oojs-ui/demos/styles/demo.css M oojs/oojs-ui/i18n/as.json M oojs/oojs-ui/i18n/bs.json M oojs/oojs-ui/i18n/pt-br.json M oojs/oojs-ui/package.json M oojs/oojs-ui/php/Tag.php M oojs/oojs-ui/php/Widget.php M oojs/oojs-ui/php/layouts/FieldLayout.php M oojs/oojs-ui/php/layouts/FieldsetLayout.php M oojs/oojs-ui/php/mixins/AccessKeyedElement.php M oojs/oojs-ui/php/mixins/TabIndexedElement.php M oojs/oojs-ui/php/mixins/TitledElement.php 25 files changed, 412 insertions(+), 125 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/vendor refs/changes/78/369478/1 diff --git a/composer.json b/composer.json index 8410b2d..2dcfd8d 100644 --- a/composer.json +++ b/composer.json @@ -45,7 +45,7 @@ "monolog/monolog": "1.22.1", "mustangostang/spyc": "0.6.2", "nmred/kafka-php": "0.1.5", - "oojs/oojs-ui": "0.22.3", + "oojs/oojs-ui": "0.22.4", "oyejorge/less.php": "1.7.0.14", "pear/console_getopt": "1.4.1", "pear/mail": "1.4.1", diff --git a/composer.lock b/composer.lock index f2711f6..355956c 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", "This file is @generated automatically" ], - "content-hash": "d3e0811f4f6f8eb8bd96e36bd53702ea", + "content-hash": "301c4a097e044e617ab5b804f5b99a22", "packages": [ { "name": "composer/semver", @@ -516,16 +516,16 @@ }, { "name": "oojs/oojs-ui", - "version": "v0.22.3", + "version": "v0.22.4", "source": { "type": "git", "url": "https://github.com/wikimedia/oojs-ui.git", - "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc" + "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/wikimedia/oojs-ui/zipball/796f52473294e923d0133bb1b0b3629d9b1332bc", - "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc", + "url": "https://api.github.com/repos/wikimedia/oojs-ui/zipball/bb1b15c47835468f133a56aa56a721f8793c61f7", + "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7", "shasum": "" }, "require": { @@ -591,7 +591,7 @@ ], "description": "Provides library of common widgets, layouts, and windows.", "homepage": "https://www.mediawiki.org/wiki/OOjs_UI", - "time": "2017-07-11T21:50:03+00:00" + "time": "2017-08-01T19:55:30+00:00" }, { "name": "oyejorge/less.php", diff --git a/composer/installed.json b/composer/installed.json index 36c3a06..f37cf29 100644 --- a/composer/installed.json +++ b/composer/installed.json @@ -2161,87 +2161,6 @@ ] }, { - "name": "oojs/oojs-ui", - "version": "v0.22.3", - "version_normalized": "0.22.3.0", - "source": { - "type": "git", - "url": "https://github.com/wikimedia/oojs-ui.git", - "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/wikimedia/oojs-ui/zipball/796f52473294e923d0133bb1b0b3629d9b1332bc", - "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc", - "shasum": "" - }, - "require": { - "mediawiki/at-ease": "1.1.0", - "php": ">=5.5.9" - }, - "require-dev": { - "jakub-onderka/php-parallel-lint": "0.9.2", - "mediawiki/mediawiki-codesniffer": "0.10.0", - "phpunit/phpunit": "4.8.21" - }, - "time": "2017-07-11T21:50:03+00:00", - "type": "library", - "installation-source": "dist", - "autoload": { - "classmap": [ - "php/" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Timo Tijhof", - "email": "krinklem...@gmail.com" - }, - { - "name": "Bartosz Dziewoński", - "email": "matma....@gmail.com" - }, - { - "name": "Ed Sanders", - "email": "esand...@wikimedia.org" - }, - { - "name": "James D. Forrester", - "email": "jforres...@wikimedia.org" - }, - { - "name": "Kirsten Menger-Anderson", - "email": "kmen...@wikimedia.org" - }, - { - "name": "Rob Moen", - "email": "rm...@wikimedia.org" - }, - { - "name": "Roan Kattouw", - "email": "r...@wikimedia.org" - }, - { - "name": "Trevor Parscal", - "email": "tre...@wikimedia.org" - }, - { - "name": "Kunal Mehta", - "email": "lego...@gmail.com" - }, - { - "name": "Prateek Saxena", - "email": "prtks...@gmail.com" - } - ], - "description": "Provides library of common widgets, layouts, and windows.", - "homepage": "https://www.mediawiki.org/wiki/OOjs_UI" - }, - { "name": "wikimedia/composer-merge-plugin", "version": "v1.4.1", "version_normalized": "1.4.1.0", @@ -2404,5 +2323,86 @@ ], "description": "Compute a relative filepath between two paths.", "homepage": "https://www.mediawiki.org/wiki/RelPath" + }, + { + "name": "oojs/oojs-ui", + "version": "v0.22.4", + "version_normalized": "0.22.4.0", + "source": { + "type": "git", + "url": "https://github.com/wikimedia/oojs-ui.git", + "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/wikimedia/oojs-ui/zipball/bb1b15c47835468f133a56aa56a721f8793c61f7", + "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7", + "shasum": "" + }, + "require": { + "mediawiki/at-ease": "1.1.0", + "php": ">=5.5.9" + }, + "require-dev": { + "jakub-onderka/php-parallel-lint": "0.9.2", + "mediawiki/mediawiki-codesniffer": "0.10.0", + "phpunit/phpunit": "4.8.21" + }, + "time": "2017-08-01T19:55:30+00:00", + "type": "library", + "installation-source": "dist", + "autoload": { + "classmap": [ + "php/" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Timo Tijhof", + "email": "krinklem...@gmail.com" + }, + { + "name": "Bartosz Dziewoński", + "email": "matma....@gmail.com" + }, + { + "name": "Ed Sanders", + "email": "esand...@wikimedia.org" + }, + { + "name": "James D. Forrester", + "email": "jforres...@wikimedia.org" + }, + { + "name": "Kirsten Menger-Anderson", + "email": "kmen...@wikimedia.org" + }, + { + "name": "Rob Moen", + "email": "rm...@wikimedia.org" + }, + { + "name": "Roan Kattouw", + "email": "r...@wikimedia.org" + }, + { + "name": "Trevor Parscal", + "email": "tre...@wikimedia.org" + }, + { + "name": "Kunal Mehta", + "email": "lego...@gmail.com" + }, + { + "name": "Prateek Saxena", + "email": "prtks...@gmail.com" + } + ], + "description": "Provides library of common widgets, layouts, and windows.", + "homepage": "https://www.mediawiki.org/wiki/OOjs_UI" } ] diff --git a/oojs/oojs-ui/History.md b/oojs/oojs-ui/History.md index 8be0c72..f427087 100644 --- a/oojs/oojs-ui/History.md +++ b/oojs/oojs-ui/History.md @@ -1,4 +1,40 @@ # OOjs UI Release History +## v0.22.4 / 2017-08-01 +### Features +* CheckboxMultiselectInputWidget: setValue when CheckboxMultiselect changes (Prateek Saxena) +* FieldLayout: Show widget's accesskey in our title (Bartosz Dziewoński) +* TextInputWidget: When positioning label, don't clear padding if we will set it again (Bartosz Dziewoński) +* TitledElement: When an AccessKeyedElement, show access key in the title (Bartosz Dziewoński) + +### Styles +* icons: Vertically align 'play' & 'stop' icons (Volker E.) +* Apex theme: Add focus styles to Tag-/CapsuleMultiselectWidget (Volker E.) +* Apex theme: Add focus styles to frameless buttons (Volker E.) +* Apex theme: Add play icon (copied from WikimediaUI theme) (Roan Kattouw) +* Apex theme: Align ButtonGroup-/ButtonSelectWidget focus logic to WikimediaUI (Volker E.) +* Apex theme: Align Dropdown*Widget's focus state with other widgets (Volker E.) +* Apex theme: Align TextInputWidget focus to variablized way (Volker E.) +* Apex theme: Align ToggleSwitchWidget focus style to other widgets (Volker E.) +* Apex theme: Improve alignment of TextInputWidget and its elements (Volker E.) +* Apex theme: Introduce framed button focus indication (Volker E.) +* Apex theme: Replace and unify `border-radius` with variables (Volker E.) +* WikimediaUI theme: Set ButtonElement's height per default (Volker E.) +* WikimediaUI theme: Work around a Firefox rendering bug for checkboxes and radios (Bartosz Dziewoński) + +### Code +* DraggableGroupElement: Remove ARIA roles & attributes (Volker E.) +* FieldsetLayout: Use `<legend>` now that Chrome 55 bug is less important (James D. Forrester) +* Apex theme: Align remaining values to coding convention (Volker E.) +* WikimediaUI theme: Align `*-fallback` var with notation elsewhere (Volker E.) +* WikimediaUI theme: Code comment hygiene (Volker E.) +* WikimediaUI theme: Directly use the Less values rather than via copy-paste (James D. Forrester) +* demos: Add examples of TextInputWidget with dynamic label (Bartosz Dziewoński) +* demos: Demo.DraggableItemWidget should not inherit from OO.ui.OptionWidget (Bartosz Dziewoński) +* demos: Show example link on `:focus` (Volker E.) +* doc: Fix some PHPDoc `@return` tags (Ricordisamoa) +* build: Add a script to print the dependency tree of everything (Bartosz Dziewoński) + + ## v0.22.3 / 2017-07-11 ### Features * Tag-/CapsuleMultiselectWidget: Avoid visual focusTrap feedback (Volker E.) diff --git a/oojs/oojs-ui/bin/dependencytree.rb b/oojs/oojs-ui/bin/dependencytree.rb new file mode 100644 index 0000000..2662963 --- /dev/null +++ b/oojs/oojs-ui/bin/dependencytree.rb @@ -0,0 +1,42 @@ +require 'pp' +require_relative 'docparser' + +$classes = parse_any_path 'src' + +def prefix lines + if lines.empty? + '' + else + lines.gsub(/^/, '- ') + end +end + +def find_class klass_name + $classes.find{|c| c[:name] == klass_name } +end + +def describe klass_name + out = [] + out << klass_name + klass = find_class klass_name + if klass + if klass[:parent] + out.push prefix describe klass[:parent] + end + if klass[:mixins] + klass[:mixins].each do |mixin| + out.push prefix describe mixin + end + end + end + out.select{|a| !a.empty? }.join "\n" +end + +$classes.sort_by!{|klass| + # sort by "type" first (widget/layout/element/etc.), then by name + klass[:name].split(/(?=Layout|Widget|Element|Dialog|Tool|Theme)/).reverse +} + +$classes.each{|klass| + puts describe klass[:name] +} diff --git a/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js b/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js index 8efffc9..9ded7b5 100644 --- a/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js +++ b/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js @@ -15,5 +15,5 @@ }; /* Setup */ -OO.inheritClass( Demo.DraggableHandledItemWidget, OO.ui.DecoratedOptionWidget ); +OO.inheritClass( Demo.DraggableHandledItemWidget, Demo.SimpleWidget ); OO.mixinClass( Demo.DraggableHandledItemWidget, OO.ui.mixin.DraggableElement ); diff --git a/oojs/oojs-ui/demos/classes/DraggableItemWidget.js b/oojs/oojs-ui/demos/classes/DraggableItemWidget.js index bc86360..ef5488a 100644 --- a/oojs/oojs-ui/demos/classes/DraggableItemWidget.js +++ b/oojs/oojs-ui/demos/classes/DraggableItemWidget.js @@ -15,5 +15,5 @@ }; /* Setup */ -OO.inheritClass( Demo.DraggableItemWidget, OO.ui.DecoratedOptionWidget ); +OO.inheritClass( Demo.DraggableItemWidget, Demo.SimpleWidget ); OO.mixinClass( Demo.DraggableItemWidget, OO.ui.mixin.DraggableElement ); diff --git a/oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js b/oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js new file mode 100644 index 0000000..be649fd --- /dev/null +++ b/oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js @@ -0,0 +1,17 @@ +Demo.DynamicLabelTextInputWidget = function DemoDynamicLabelTextInputWidget( config ) { + // Configuration initialization + config = $.extend( { getLabelText: $.noop }, config ); + // Parent constructor + Demo.DynamicLabelTextInputWidget.parent.call( this, config ); + // Properties + this.getLabelText = config.getLabelText; + // Events + this.connect( this, { change: 'onChange' } ); + // Initialization + this.setLabel( this.getLabelText( this.getValue() ) ); +}; +OO.inheritClass( Demo.DynamicLabelTextInputWidget, OO.ui.TextInputWidget ); + +Demo.DynamicLabelTextInputWidget.prototype.onChange = function ( value ) { + this.setLabel( this.getLabelText( value ) ); +}; diff --git a/oojs/oojs-ui/demos/classes/SimpleWidget.css b/oojs/oojs-ui/demos/classes/SimpleWidget.css new file mode 100644 index 0000000..b7f501f --- /dev/null +++ b/oojs/oojs-ui/demos/classes/SimpleWidget.css @@ -0,0 +1,40 @@ +.demo-simpleWidget { + display: block; + position: relative; + padding: 0.703125em 0.9375em 0.625em; + line-height: 1; +} + +.demo-simpleWidget.oo-ui-iconElement .oo-ui-iconElement-icon, +.demo-simpleWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { + top: 0; + height: 100%; +} + +.demo-simpleWidget.oo-ui-iconElement { + padding-left: 2.96875em; +} + +.demo-simpleWidget.oo-ui-iconElement .oo-ui-iconElement-icon { + position: absolute; + bottom: 0; + right: 0; + left: 0.9375em; +} + +.demo-simpleWidget.oo-ui-labelElement-label { + line-height: 1.172em; +} + +.demo-simpleWidget.oo-ui-indicatorElement { + padding-right: 2.5em; +} + +.demo-simpleWidget.oo-ui-indicatorElement-indicator { + right: 0.9375em; +} + +.demo-simpleWidget.oo-ui-widget-disabled .oo-ui-iconElement-icon, +.demo-simpleWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator { + opacity: 0.51; +} diff --git a/oojs/oojs-ui/demos/classes/SimpleWidget.js b/oojs/oojs-ui/demos/classes/SimpleWidget.js new file mode 100644 index 0000000..e5ad631 --- /dev/null +++ b/oojs/oojs-ui/demos/classes/SimpleWidget.js @@ -0,0 +1,31 @@ +/** + * Very simple custom widget. + * + * @class + * @extends OO.ui.Widget + * @mixins OO.ui.mixin.IconElement + * @mixins OO.ui.mixin.LabelElement + * + * @param {Object} [config] Configuration options + */ +Demo.SimpleWidget = function DemoSimpleWidget( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + Demo.SimpleWidget.parent.call( this, config ); + + // Mixin constructors + OO.ui.mixin.IconElement.call( this, config ); + OO.ui.mixin.LabelElement.call( this, config ); + + // Initialization + this.$element + .addClass( 'demo-simpleWidget' ) + .append( this.$icon, this.$label ); +}; + +/* Setup */ +OO.inheritClass( Demo.SimpleWidget, OO.ui.Widget ); +OO.mixinClass( Demo.SimpleWidget, OO.ui.mixin.IconElement ); +OO.mixinClass( Demo.SimpleWidget, OO.ui.mixin.LabelElement ); diff --git a/oojs/oojs-ui/demos/index.html b/oojs/oojs-ui/demos/index.html index 94c9203..aa05516 100644 --- a/oojs/oojs-ui/demos/index.html +++ b/oojs/oojs-ui/demos/index.html @@ -5,6 +5,7 @@ <title>OOjs UI Demos</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="classes/ButtonStyleShowcaseWidget.css"> + <link rel="stylesheet" href="classes/SimpleWidget.css"> <link rel="stylesheet" href="classes/FloatableTest.css"> <link rel="stylesheet" href="classes/PositionSelectWidget.css"> <link rel="stylesheet" href="node_modules/prismjs/themes/prism.css"> @@ -21,9 +22,11 @@ <script src="demo.js"></script> <script src="classes/ButtonStyleShowcaseWidget.js"></script> <script src="classes/CapsuleNumberPopupMultiselectWidget.js"></script> + <script src="classes/SimpleWidget.js"></script> <script src="classes/DraggableGroupWidget.js"></script> <script src="classes/DraggableItemWidget.js"></script> <script src="classes/DraggableHandledItemWidget.js"></script> + <script src="classes/DynamicLabelTextInputWidget.js"></script> <script src="classes/NumberLookupTextInputWidget.js"></script> <script src="classes/UnsupportedSelectFileWidget.js"></script> <script src="classes/BookletDialog.js"></script> diff --git a/oojs/oojs-ui/demos/pages/widgets.js b/oojs/oojs-ui/demos/pages/widgets.js index e9cee0b..915c4f0 100644 --- a/oojs/oojs-ui/demos/pages/widgets.js +++ b/oojs/oojs-ui/demos/pages/widgets.js @@ -230,13 +230,24 @@ ), new OO.ui.FieldLayout( new OO.ui.ButtonWidget( { - label: 'Accesskey: H', - accessKey: 'h' + label: 'Access key: G', + accessKey: 'g' } ), { label: 'ButtonWidget (with accesskey)\u200E', align: 'top', help: new OO.ui.HtmlSnippet( 'Notice: Using `accesskey` might <a href="http://webaim.org/techniques/keyboard/accesskey" target="_blank">negatively impact screen readers</a>!' ) + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonInputWidget( { + title: 'Accesskey is added to the title.', + label: 'Access key: H', + accessKey: 'h' + } ), + { + label: 'ButtonInputWidget (with accesskey and title)\u200E', + align: 'top' } ), new OO.ui.FieldLayout( @@ -412,7 +423,7 @@ ), new OO.ui.FieldLayout( new OO.ui.ButtonInputWidget( { - label: 'Accesskey: I', + label: 'Access key: I', accessKey: 'i' } ), { @@ -635,17 +646,17 @@ items: [ new OO.ui.ButtonOptionWidget( { data: 'a', - label: 'Accesskey: J', + label: 'Access key: J', accessKey: 'j' } ), new OO.ui.ButtonOptionWidget( { data: 'b', - label: 'Accesskey: K', + label: 'Access key: K', accessKey: 'k' } ), new OO.ui.ButtonOptionWidget( { data: 'c', - label: 'Accesskey: L', + label: 'Access key: L', accessKey: 'l' } ) ] @@ -859,13 +870,36 @@ ), new OO.ui.FieldLayout( new OO.ui.TextInputWidget( { - value: 'Accesskey: S', + value: 'Access key: S', accessKey: 's' } ), { label: 'TextInputWidget (with accesskey)\u200E', align: 'top', help: new OO.ui.HtmlSnippet( 'Notice: Using `accesskey` might <a href="http://webaim.org/techniques/keyboard/accesskey" target="_blank">negatively impact screen readers</a>!' ) + } + ), + new OO.ui.FieldLayout( + new Demo.DynamicLabelTextInputWidget( { + getLabelText: function ( value ) { + return String( value.length ); + } + } ), + { + label: 'TextInputWidget (with dynamic label – length)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new Demo.DynamicLabelTextInputWidget( { + maxLength: 300, + getLabelText: function ( value ) { + return String( 300 - value.length ); + } + } ), + { + label: 'TextInputWidget (with dynamic label – remaining length)\u200E', + align: 'top' } ), new OO.ui.FieldLayout( @@ -947,6 +981,17 @@ { align: 'inline', label: 'CheckboxInputWidget (disabled)\u200E' + } + ), + new OO.ui.FieldLayout( + new OO.ui.CheckboxInputWidget( { + selected: true, + accessKey: 't' + } ), + { + align: 'inline', + label: 'CheckboxInputWidget (with accesskey T and title)\u200E', + title: 'Access key is added to the title.' } ), new OO.ui.FieldLayout( @@ -1076,17 +1121,17 @@ items: [ new OO.ui.RadioOptionWidget( { data: 'a', - label: 'Accesskey: M', + label: 'Access key: M', accessKey: 'm' } ), new OO.ui.RadioOptionWidget( { data: 'b', - label: 'Accesskey: N', + label: 'Access key: N', accessKey: 'n' } ), new OO.ui.RadioOptionWidget( { data: 'c', - label: 'Accesskey: O', + label: 'Access key: O', accessKey: 'o' } ) ] @@ -1323,17 +1368,17 @@ items: [ new OO.ui.MenuOptionWidget( { data: 'a', - label: 'Accesskey: P', + label: 'Access key: P', accessKey: 'p' } ), new OO.ui.MenuOptionWidget( { data: 'b', - label: 'Accesskey: Q', + label: 'Access key: Q', accessKey: 'q' } ), new OO.ui.MenuOptionWidget( { data: 'c', - label: 'Accesskey: R', + label: 'Access key: R', accessKey: 'r' } ) ] diff --git a/oojs/oojs-ui/demos/pages/widgets.php b/oojs/oojs-ui/demos/pages/widgets.php index 34d95b7..cbfc240 100644 --- a/oojs/oojs-ui/demos/pages/widgets.php +++ b/oojs/oojs-ui/demos/pages/widgets.php @@ -303,8 +303,8 @@ ), new OOUI\FieldLayout( new OOUI\ButtonWidget( [ - 'label' => 'Accesskey: H', - 'accessKey' => 'h' + 'label' => 'Access key: G', + 'accessKey' => 'g' ] ), [ 'label' => "ButtonWidget (with accesskey)\xE2\x80\x8E", @@ -316,7 +316,18 @@ ), new OOUI\FieldLayout( new OOUI\ButtonInputWidget( [ - 'label' => 'Accesskey: I', + 'title' => 'Access key is added to the title.', + 'label' => 'Access key: H', + 'accessKey' => 'h' + ] ), + [ + 'label' => "ButtonInputWidget (with accesskey and title)\xE2\x80\x8E", + 'align' => 'top', + ] + ), + new OOUI\FieldLayout( + new OOUI\ButtonInputWidget( [ + 'label' => 'Access key: I', 'accessKey' => 'i' ] ), [ @@ -424,7 +435,7 @@ ), new OOUI\FieldLayout( new OOUI\TextInputWidget( [ - 'value' => 'Accesskey: S', + 'value' => 'Access key: S', 'accessKey' => 's' ] ), [ @@ -516,6 +527,17 @@ ] ), new OOUI\FieldLayout( + new OOUI\CheckboxInputWidget( [ + 'selected' => true, + 'accessKey' => 't' + ] ), + [ + 'align' => 'inline', + 'label' => "CheckboxInputWidget (with accesskey T and title)\xE2\x80\x8E", + 'title' => 'Access key is added to the title.', + ] + ), + new OOUI\FieldLayout( new OOUI\RadioInputWidget( [ 'name' => 'oojs-ui-radio-demo' ] ), diff --git a/oojs/oojs-ui/demos/styles/demo.css b/oojs/oojs-ui/demos/styles/demo.css index 34611fe..3a101a8 100644 --- a/oojs/oojs-ui/demos/styles/demo.css +++ b/oojs/oojs-ui/demos/styles/demo.css @@ -137,6 +137,7 @@ content: 'Hide code ↑'; } +.demo-link-example:focus, .oo-ui-fieldLayout:hover > .demo-link-example { opacity: 1; } diff --git a/oojs/oojs-ui/i18n/as.json b/oojs/oojs-ui/i18n/as.json index 5053280..54a4244 100644 --- a/oojs/oojs-ui/i18n/as.json +++ b/oojs/oojs-ui/i18n/as.json @@ -12,7 +12,7 @@ "ooui-toolbar-more": "অধিক", "ooui-toolgroup-expand": "অধিক", "ooui-toolgroup-collapse": "কম দেখাওক", - "ooui-dialog-message-accept": "শুদ্ধ", + "ooui-dialog-message-accept": "বাৰু", "ooui-dialog-message-reject": "বাতিল কৰক", "ooui-dialog-process-error": "কিবা ত্ৰুটি হৈছে", "ooui-dialog-process-dismiss": "বাতিল", diff --git a/oojs/oojs-ui/i18n/bs.json b/oojs/oojs-ui/i18n/bs.json index 7ef5a51..fc4c320 100644 --- a/oojs/oojs-ui/i18n/bs.json +++ b/oojs/oojs-ui/i18n/bs.json @@ -18,8 +18,8 @@ "ooui-dialog-process-dismiss": "Odbaci", "ooui-dialog-process-retry": "Pokušaj ponovo", "ooui-dialog-process-continue": "Nastavi", - "ooui-selectfile-button-select": "Izaberi datoteku", + "ooui-selectfile-button-select": "Izaberite datoteku", "ooui-selectfile-not-supported": "Izbor datoteke nije podržan", "ooui-selectfile-placeholder": "Nijedna datoteka nije izabrana", - "ooui-selectfile-dragdrop-placeholder": "Prevuci datoteku ovdje" + "ooui-selectfile-dragdrop-placeholder": "Prevucite datoteku ovdje" } diff --git a/oojs/oojs-ui/i18n/pt-br.json b/oojs/oojs-ui/i18n/pt-br.json index fc29962..41ce674 100644 --- a/oojs/oojs-ui/i18n/pt-br.json +++ b/oojs/oojs-ui/i18n/pt-br.json @@ -11,7 +11,8 @@ "OTAVIO1981", 555, "TheEduGobi", - "TheGabrielZaum" + "TheGabrielZaum", + "Felipe L. Ewald" ] }, "ooui-outline-control-move-down": "Mover item para baixo", @@ -24,7 +25,7 @@ "ooui-dialog-message-reject": "Cancelar", "ooui-dialog-process-error": "Algo deu errado", "ooui-dialog-process-dismiss": "Dispensar", - "ooui-dialog-process-retry": "Tentar novamente", + "ooui-dialog-process-retry": "Tente novamente", "ooui-dialog-process-continue": "Continuar", "ooui-selectfile-button-select": "Selecionar um arquivo", "ooui-selectfile-not-supported": "O selecionamento de arquivos não é suportado", diff --git a/oojs/oojs-ui/package.json b/oojs/oojs-ui/package.json index 139a202..a6a2365 100644 --- a/oojs/oojs-ui/package.json +++ b/oojs/oojs-ui/package.json @@ -1,6 +1,6 @@ { "name": "oojs-ui", - "version": "0.22.3", + "version": "0.22.4", "description": "User interface classes built on the OOjs framework.", "keywords": [ "oojs-plugin", diff --git a/oojs/oojs-ui/php/Tag.php b/oojs/oojs-ui/php/Tag.php index 5579f3d..9273455 100644 --- a/oojs/oojs-ui/php/Tag.php +++ b/oojs/oojs-ui/php/Tag.php @@ -275,7 +275,7 @@ /** * Generate a unique ID for element * - * @return {string} ID + * @return string ID */ public static function generateElementId() { self::$elementId++; diff --git a/oojs/oojs-ui/php/Widget.php b/oojs/oojs-ui/php/Widget.php index a93fbfb..13b937a 100644 --- a/oojs/oojs-ui/php/Widget.php +++ b/oojs/oojs-ui/php/Widget.php @@ -66,7 +66,7 @@ * Get an ID of a labelable node which is part of this widget, if any, to be used for * `<label for>` value. * - * @return {string|null} The ID of the labelable node + * @return string|null The ID of the labelable node */ public function getInputId() { return null; diff --git a/oojs/oojs-ui/php/layouts/FieldLayout.php b/oojs/oojs-ui/php/layouts/FieldLayout.php index 8039762..e070605 100644 --- a/oojs/oojs-ui/php/layouts/FieldLayout.php +++ b/oojs/oojs-ui/php/layouts/FieldLayout.php @@ -135,6 +135,8 @@ } $this->setAlignment( $config['align'] ); + // Call this again to take into account the widget's accessKey + $this->updateTitle(); } /** @@ -223,6 +225,20 @@ return $this; } + /** + * Include information about the widget's accessKey in our title. TitledElement calls this method. + * (This is a bit of a hack.) + * + * @param string $title Tooltip label for 'title' attribute + * @return string + */ + protected function formatTitleWithAccessKey( $title ) { + if ( $this->fieldWidget && method_exists( $this->fieldWidget, 'formatTitleWithAccessKey' ) ) { + return $this->fieldWidget->formatTitleWithAccessKey( $title ); + } + return $title; + } + public function getConfig( &$config ) { $config['fieldWidget'] = $this->fieldWidget; $config['align'] = $this->align; diff --git a/oojs/oojs-ui/php/layouts/FieldsetLayout.php b/oojs/oojs-ui/php/layouts/FieldsetLayout.php index e59ebad..a161008 100644 --- a/oojs/oojs-ui/php/layouts/FieldsetLayout.php +++ b/oojs/oojs-ui/php/layouts/FieldsetLayout.php @@ -28,13 +28,11 @@ // Traits $this->initializeIconElement( $config ); - $this->initializeLabelElement( array_merge( $config, [ - 'labelElement' => new Tag( 'div' ) - ] ) ); + $this->initializeLabelElement( $config ); $this->initializeGroupElement( $config ); // Properties - $this->header = new Tag( 'div' ); + $this->header = new Tag( 'legend' ); // Initialization $this->header diff --git a/oojs/oojs-ui/php/mixins/AccessKeyedElement.php b/oojs/oojs-ui/php/mixins/AccessKeyedElement.php index b395bca..3f46c7c 100644 --- a/oojs/oojs-ui/php/mixins/AccessKeyedElement.php +++ b/oojs/oojs-ui/php/mixins/AccessKeyedElement.php @@ -60,6 +60,11 @@ $this->accessKeyed->removeAttributes( [ 'accesskey' ] ); } $this->accessKey = $accessKey; + + // Only if this is a TitledElement + if ( method_exists( $this, 'updateTitle' ) ) { + $this->updateTitle(); + } } return $this; @@ -73,4 +78,19 @@ public function getAccessKey() { return $this->accessKey; } + + /** + * Add information about the access key to the element's tooltip label. + * (This is only public for hacky usage in FieldLayout.) + * + * @param string $title Tooltip label for `title` attribute + * @return string + */ + public function formatTitleWithAccessKey( $title ) { + $accessKey = $this->getAccessKey(); + if ( $accessKey ) { + $title .= " [$accessKey]"; + } + return $title; + } } diff --git a/oojs/oojs-ui/php/mixins/TabIndexedElement.php b/oojs/oojs-ui/php/mixins/TabIndexedElement.php index 5132d5d..398281e 100644 --- a/oojs/oojs-ui/php/mixins/TabIndexedElement.php +++ b/oojs/oojs-ui/php/mixins/TabIndexedElement.php @@ -92,7 +92,7 @@ * If the element already has an ID then that is returned, otherwise unique ID is * generated, set on the element, and returned. * - * @return {string|null} The ID of the focusable element + * @return string|null The ID of the focusable element */ public function getInputId() { $id = $this->tabIndexed->getAttribute( 'id' ); diff --git a/oojs/oojs-ui/php/mixins/TitledElement.php b/oojs/oojs-ui/php/mixins/TitledElement.php index 073cc74..16ed98e 100644 --- a/oojs/oojs-ui/php/mixins/TitledElement.php +++ b/oojs/oojs-ui/php/mixins/TitledElement.php @@ -54,17 +54,32 @@ if ( $this->title !== $title ) { $this->title = $title; - if ( $title !== null ) { - $this->titled->setAttributes( [ 'title' => $title ] ); - } else { - $this->titled->removeAttributes( [ 'title' ] ); - } + $this->updateTitle(); } return $this; } /** + * Update the title attribute, in case of changes to title or accessKey. + * + * @return $this + */ + protected function updateTitle() { + $title = $this->getTitle(); + if ( $title !== null ) { + // Only if this is an AccessKeyedElement + if ( method_exists( $this, 'formatTitleWithAccessKey' ) ) { + $title = $this->formatTitleWithAccessKey( $title ); + } + $this->titled->setAttributes( [ 'title' => $title ] ); + } else { + $this->titled->removeAttributes( [ 'title' ] ); + } + return $this; + } + + /** * Get title. * * @return string Title string -- To view, visit https://gerrit.wikimedia.org/r/369478 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I505e7c612b70a949d2b101172964bd7433fb8d5e Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/vendor Gerrit-Branch: master Gerrit-Owner: Jforrester <jforres...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits