Skip to content
Yin Zhang edited this page Aug 19, 2014 · 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 below the input fields. (To be determined)
  • 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.
  • ...

This section is incomplete...

Clone this wiki locally