Skip to content
andreasn edited this page Apr 24, 2015 · 30 revisions

Modal dialogs in Cockpit should have consistent behavior. These are the Human Interface Guidelines for dialogs.

Look

Dialogs should be implemented as Patternfly modals.

This section is incomplete...

Behavior

  • Disable affirmative button when dialog has invalid contents or the content is empty.

  • Show a warning message if some prerequisite to finish the function of the dialog is not satisfied. Disable most of the elements inside the dialog exept Cancel button(if there is one).

  • Make primary input field got focused when the dialog shows up. Primary input field is usually the first input field which needs required input contents.

  • Support Enter key for input fields and primary buttons in the dialog. (To be determined)

    1. Primary button is the button used for finishing the function of the dialog, is usually an affirmative button.
    2. If there is only one input field, pressing Enter key behaves the same as clicking primary button.
    3. If there are more than one input field, pressing Enter key moves the focus from the previous input field to the next one sequentially. When the last input field gets Enter key stroke, it behaves the same as clicking primary button.
  • Support Tab key for all interactive elements, the sequence of tab indices should be determined according to the positions of the elements, from top to bottom, from left to right.

  • Show error messages if there are invalid characters inside the input fields, indicating the last invalid character in the error message. (To be determined)

  • Replace the invalid characters with empty characters without showing error messages. (To be determined)

  • Show error(notification) message when some action needs to be taken, for example: user should check at least one checkbox to finish the dialog. (To be determined)

  • Show error messages directly below the input fields.

  • Fill out defaults where possible, for example name of a container, network bond, container etc.

  • Put the fields that are required closer to the top

  • Check for errors on form submit

  • Remove the error for the field if the input have changed and check again on submit

This section is incomplete...

See also

https://www.patternfly.org/wikis/patterns/pattern-development/draft-patterns/forms/#validation

Clone this wiki locally