jenkins-bot has submitted this change and it was merged.
Change subject: ActionFieldLayout: Add description and example
......................................................................
ActionFieldLayout: Add description and example
Change-Id: I09427cbcc8f61746d1b8ee196f58c0fcae3d1517
---
M src/layouts/ActionFieldLayout.js
1 file changed, 40 insertions(+), 3 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/layouts/ActionFieldLayout.js b/src/layouts/ActionFieldLayout.js
index 3801755..59640ed 100644
--- a/src/layouts/ActionFieldLayout.js
+++ b/src/layouts/ActionFieldLayout.js
@@ -1,5 +1,41 @@
/**
- * Layout made of a field, a button, and an optional label.
+ * ActionFieldLayouts are used with OO.ui.FieldsetLayout. The layout consists
of a field-widget, a button,
+ * and an optional label and/or help text. The field-widget (e.g., a {@link
OO.ui.TextInputWidget TextInputWidget}),
+ * is required and is specified before any optional configuration settings.
+ *
+ * Labels can be aligned in one of four ways:
+ *
+ * - **left**: The label is placed before the field-widget and aligned with
the left margin.
+ * A left-alignment is used for forms with many fields.
+ * - **right**: The label is placed before the field-widget and aligned to the
right margin.
+ * A right-alignment is used for long but familiar forms which users tab
through,
+ * verifying the current field with a quick glance at the label.
+ * - **top**: The label is placed above the field-widget. A top-alignment is
used for brief forms
+ * that users fill out from top to bottom.
+ * - **inline**: The label is placed after the field-widget and aligned to the
left.
+ * An inline-alignment is best used with checkboxes or radio buttons.
+ *
+ * Help text is accessed via a help icon that appears in the upper right
corner of the rendered field layout when help
+ * text is specified.
+ *
+ * @example
+ * // Example of an ActionFieldLayout
+ * var actionFieldLayout = new OO.ui.ActionFieldLayout(
+ * new OO.ui.TextInputWidget( {
+ * placeholder: 'Field widget'
+ * } ),
+ * new OO.ui.ButtonWidget( {
+ * label: 'Button'
+ * } ),
+ * {
+ * label: 'An ActionFieldLayout. This label is aligned top',
+ * align: 'top',
+ * help: 'This is help text'
+ * }
+ * );
+ *
+ * $( 'body' ).append( actionFieldLayout.$element );
+ *
*
* @class
* @extends OO.ui.FieldLayout
@@ -8,8 +44,9 @@
* @param {OO.ui.Widget} fieldWidget Field widget
* @param {OO.ui.ButtonWidget} buttonWidget Button widget
* @param {Object} [config] Configuration options
- * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top'
or 'inline'
- * @cfg {string} [help] Explanatory text shown as a '?' icon.
+ * @cfg {string} [align='left'] Alignment of the label: 'left', 'right', 'top'
or 'inline'
+ * @cfg {string} [help] Help text. When help text is specified, a help icon
will appear in the
+ * upper-right corner of the rendered field.
*/
OO.ui.ActionFieldLayout = function OoUiActionFieldLayout( fieldWidget,
buttonWidget, config ) {
// Allow passing positional parameters inside the config object
--
To view, visit https://gerrit.wikimedia.org/r/200626
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I09427cbcc8f61746d1b8ee196f58c0fcae3d1517
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Kmenger <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
