Related Pages: Popups, Message Popup

Lead:  Liav Nadler ONGOING

Description

• A dialog is a popup window, allowing the user to enter information or make decisions
• In addition to the basic elements of a popup window, a dialog contains any set of form components, such as radio buttons, checkboxes, dropdown menus etc.
• A help icon (question mark) may appear next to the closing icon on the dialog's header, allowing the user to get help about the current popup. How does it open?

Usage & Behaviour

General guidelines

• For basic popup usage and behaviour see popups
• Dialogs may come in different widths and height. The width of a dialog is always fixed. In some cases the height of a dialog depends on values the user enters or error messages (see field validation)

Interaction

• For detailed popup interaction see Popups
• For form elements interactions browse the various form elements, including text field, radio button, check box, drop down menu, date picker etc.

Validations and errors

• For detailed validations and errors see Field Validation

Best practices

• Keep the dialog content as short as possible. A dialog may include several tabs, search component or drag and drop capabilities but you should avoid scrolling for the entire dialog

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

<<a box containing the code - discuss with Femi>>