Related pages: Toast, Dialog

Lead:  Liav Nadler  ONGOING

Description

A message popup is a small modal window containing a warning, error message, help text or other important information

Usually it appears on user's action (e.g. clicking help icon) and it must be dismissed by the user

The popup may contains these elements:

• Header, including a title (e.g. "Warning") and a closing icon
• Icon (e.g. question mark icon for help)
• The message text
• Primary action button (Usually OK)
• Cancel button (when relevant)

Types

Usage & Behaviour

General guidelines

• When relevant, clicking the Cancel button closes the popup without performing any other action

Validations and errors

N/A

Best practices

• The message popup is more intrusive than a toast. Use it only for important messages (or long messaged in the case of help)
• Keep the title short and informative
• Keep the message text short and informative

Dialog

A dialog is a small window that prompts the  user to make a decision or enter additional information.

A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed

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 Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design