Kmenger has uploaded a new change for review. https://gerrit.wikimedia.org/r/200626
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(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/26/200626/1 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: newchange Gerrit-Change-Id: I09427cbcc8f61746d1b8ee196f58c0fcae3d1517 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Kmenger <kmen...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits