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

Zeplin link	Screen thumbnail
<<Zeplin Link>>	<<Screen with 200 width>>

Code

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

Dialog