OOUI/Elements/Flagged

From MediaWiki.org
< OOUI‎ | Elements
Jump to navigation Jump to search

The OO.ui.FlaggedElement class is an attribute mixin, meaning that it is used to add additional functionality to an element created by another class. The class provides a flags property assigned the name (or an array of names) of styling flags, which customize the look and feel of a widget to better describe its importance and functionality.

When an element is configured with a flags property, its CSS styling is updated. A widget that is configured to be ‘destructive’, for example, will be styled with the ‘oo-ui-flaggedElement-destructive’ CSS class.

For a full list of supported methods and configuration options provided by the FlaggedElement class, please see the code-level documentation.

Any flags can be set, and styling for them is defined in specific widgets/elements, including:

ButtonElement and Tool[edit]

  • progressive:  Progressive styling is applied to convey that the widget will move the user forward in whatever process they are in.
  • destructive: Destructive styling is applied to convey that the widget will remove something.
  • primary: Primary styling is applied when there is only one possible action, or to convey that this is the most common or recommended of several possible actions. (It is only meaningful for framed buttons with primary or destructive flag.)

Please see Buttons and Switches for an example of these flags.

ProcessDialog[edit]

Actions, which are a special kind of button used in process dialogs, use these flags:

  • primary: The primary action (e.g., ‘save’ or ‘done’) moves the user forward in whatever process they are in. The primary action is positioned in the upper right corner of the dialog window. Since this is a button, the meaning of primary action for ButtonElement above also applies.
  • safe: The safe action (e.g., ‘Cancel’) will make no changes. ‘Safe’ actions are usually configured without an action. Actions widgets that have no configured action will close the window without making changes. The safe action is positioned in the upper left corner of the dialog.
  • back: Indicates that this action will go to the previous panel in the dialog. Actions with this flag automatically receive a "back" icon, replacing the label (on mobile only). It should only be used on "safe" actions.
  • close: Indicates that this action will close the dialog. Actions with this flag automatically receive a "close" icon, replacing the label. It should only be used on "safe" actions.

Please see the documentation on action sets for more information about how the primary and safe flags are used.

TextInputWidget[edit]

The invalid flag is used internally to mark the user input as invalid. It should not be set directly, use setValidityFlag method.

MessageWidget[edit]

The error, warning, success, and notice flags are used internally to show different messages. It should not be set directly, use type instead.